iep-ui/es/iep-sundry-rate/IepSundryRate.js

An enterprise-class UI design language and Vue-based implementation

import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Satisfice from "./icons/satisfice";
import SSatisfice from "./icons/sSatisfice";
import { isEmpty } from "lodash";

export default {
  name: 'IepSundryRate',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    text: PropTypes.string,
    value: PropTypes.value,
    normalColor: PropTypes.string.def('#8a97a0'),
    activeColor: PropTypes.string.def('#00c822')
  },
  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      localValue: false
    };
  },

  watch: {
    value: {
      handler: function handler(e) {
        this.localValue = e;
      }
    }
  },
  methods: {
    handleTap: function handleTap() {
      this.localValue = !this.localValue;
      this.$emit('change', this.localValue);
    }
  },

  render: function render() {
    var _this = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $slots = this.$slots,
        $props = this.$props,
        localValue = this.localValue;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-sundry-rate', customizePrefixCls);
    var text = $props.text,
        normalColor = $props.normalColor,
        activeColor = $props.activeColor;

    var textVNodes = h(
      'div',
      { 'class': prefixCls + '-text' },
      [localValue ? '满意' : '不满意']
    );
    if (!isEmpty(text)) {
      textVNodes = h(
        'div',
        { 'class': prefixCls + '-text' },
        [text]
      );
    }

    if (!isEmpty($slots['default'])) {
      textVNodes = h(
        'div',
        { 'class': prefixCls + '-text' },
        [$slots['default']]
      );
    }

    return h(
      'div',
      { 'class': prefixCls, on: {
          'click': function click() {
            return _this.handleTap();
          }
        }
      },
      [h(
        'div',
        { 'class': prefixCls + '-icon' },
        [localValue ? h(SSatisfice, {
          attrs: { color: activeColor }
        }) : h(Satisfice, {
          attrs: { color: normalColor }
        })]
      ), textVNodes]
    );
  }
};