drip-ui/es/select-button/index.js

Lightweight Mobile UI Components built on Vue

import _extends from "@babel/runtime/helpers/esm/extends";
import create from '../utils/create';
import dripButton from '../button';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "radio"
    }, [_c('ul', {
      staticClass: "radio-ul"
    }, _vm._l(_vm.list, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "radio-ul-li"
      }, [_c('drip-button', {
        style: {
          width: _vm.width
        },
        attrs: {
          "type": !item.disabled && _vm.values.includes(item.value) ? 'orange' : 'default',
          "disabled": item.disabled
        },
        domProps: {
          "innerHTML": _vm._s(item.name)
        },
        on: {
          "click": function click($event) {
            _vm.checkButton(item);
          }
        }
      })], 1);
    }))]);
  },
  name: 'select-button',
  props: {
    // 要求数据格式为[{name: '', value: ''}]
    list: {
      type: Array,
      required: true
    },
    // 要求是list某个元素的value值
    values: {
      type: Array,
      "default": function _default() {
        return [];
      },
      required: true
    },
    type: {
      type: String,
      "default": 'radio'
    },
    width: {
      type: String
    }
  },
  methods: {
    checkButton: function checkButton(item) {
      var index = this.values.indexOf(item.value);

      if (index == -1) {
        if (this.type === 'radio') {
          this.values.length = [];
        }

        this.values.push(item.value);
      } else {
        if (this.type !== 'radio' && this.values.length !== 1) {
          this.values.splice(index, 1);
        }
      }

      this.$emit('getValue', _extends(item, {
        isSelect: index === -1
      }));
    }
  },
  components: {
    dripButton: dripButton
  }
});