drip-ui/es/switch/index.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      "class": {
        'drip-switch__outer': true,
        'is-single': _vm.single
      },
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          _vm.disabled ? '' : _vm.changeStatus();
        }
      }
    }, [_c('div', {
      "class": {
        'is-check': _vm.isCheck
      }
    }, [_c('span', {
      "class": {
        'drip-switch__bkg': true,
        'is-disabled': _vm.disabled
      }
    }, [_vm._l(_vm.currentData, function (item, index) {
      return _c('span', {
        key: index,
        "class": _vm.b([_vm.single && item.value ? _vm.type : '', 'tip']),
        domProps: {
          "textContent": _vm._s(item.name)
        }
      });
    }), !_vm.single ? _c('span', {
      "class": _vm.b(['button', _vm.isCheck ? 'is-active' : '', !_vm.single ? _vm.type : '']),
      domProps: {
        "textContent": _vm._s(_vm.currentContent)
      }
    }) : _c('span', {
      "class": {
        'drip-switch--button': true,
        'is-active': _vm.isCheck
      }
    })], 2)])]);
  },
  name: 'switch',
  props: {
    // true与false的值
    data: {
      type: Array,
      "default": function _default() {
        return [{
          name: '',
          value: true
        }, {
          name: '',
          value: false
        }];
      }
    },
    // 绑定的值
    value: {
      type: [String, Number, Boolean, Object],
      "default": true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      "default": false
    },
    // 是否只显示一个值
    single: {
      type: Boolean,
      "default": false
    },
    // 样式
    type: {
      type: String,
      "default": 'primary'
    }
  },
  data: function data() {
    return {
      // 是否选中状态
      isCheck: !this.value,
      // true与false的值
      currentData: this.data,
      // 选中的value
      currentValue: this.value,
      // 显示选中的值
      currentContent: ''
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.data.forEach(function (item) {
      if (item.value === _this.value) {
        _this.currentContent = item.name;
      }
    });
  },
  methods: {
    // 改变状态
    changeStatus: function changeStatus() {
      this.isCheck = !this.isCheck;

      if (this.isCheck) {
        this.currentValue = this.currentData[1].value;
        this.currentContent = this.currentData[1].name;
      } else {
        this.currentValue = this.currentData[0].value;
        this.currentContent = this.currentData[0].name;
      }

      this.$emit('changed', {
        currentValue: this.currentValue,
        currentName: this.currentContent
      });
    }
  }
});