vivo-ui/lib/components/switch/index.js

vivo ui component lib for vue

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import mixinType from '../../mixins/type';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .src-components-switch-index--switch--1kI-j { position: relative; display: inline-block; width: 1.35rem; height: .8rem; background: #dfdfdf center / contain no-repeat; -moz-background-origin: border-box; -o-background-origin: border-box; background-origin: border-box; border: .03rem solid transparent; -webkit-border-radius: .43rem / 50%; -moz-border-radius: .43rem / 50%; border-radius: .43rem / 50%; -webkit-transition: background .35s; -o-transition: background .35s; -moz-transition: background .35s; transition: background .35s; } .src-components-switch-index--switch--1kI-j > :first-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; -webkit-border-radius: .4rem / 50%; -moz-border-radius: .4rem / 50%; border-radius: .4rem / 50%; -webkit-transition: -webkit-transform .35s cubic-bezier(0.45, 1, 0.4, 1); transition: -webkit-transform .35s cubic-bezier(0.45, 1, 0.4, 1); -o-transition: -o-transform .35s cubic-bezier(0.45, 1, 0.4, 1); -moz-transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1), -moz-transform .35s cubic-bezier(0.45, 1, 0.4, 1); transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1); transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform .35s cubic-bezier(0.45, 1, 0.4, 1), -moz-transform .35s cubic-bezier(0.45, 1, 0.4, 1), -o-transform .35s cubic-bezier(0.45, 1, 0.4, 1); } .src-components-switch-index--switch--1kI-j > :last-child { position: absolute; right: 100%; top: 0; bottom: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); width: .8rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #fff; -webkit-box-shadow: 0 .03rem .09rem rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 .03rem .09rem rgba(0, 0, 0, 0.4); box-shadow: 0 .03rem .09rem rgba(0, 0, 0, 0.4); -webkit-transition: .35s cubic-bezier(0.4, 0.4, 0.25, 1.35); -o-transition: .35s cubic-bezier(0.4, 0.4, 0.25, 1.35); -moz-transition: .35s cubic-bezier(0.4, 0.4, 0.25, 1.35); transition: .35s cubic-bezier(0.4, 0.4, 0.25, 1.35); -webkit-transition-property: right, -webkit-transform; transition-property: right, -webkit-transform; -o-transition-property: right, -o-transform; -moz-transition-property: right, transform, -moz-transform; transition-property: right, transform; transition-property: right, transform, -webkit-transform, -moz-transform, -o-transform; } .src-components-switch-index--checked--bIX34 > :first-child { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .src-components-switch-index--checked--bIX34 > :last-child { right: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .src-components-switch-index--disabled--lDNq9 { opacity: .6; } /*pc样式*/ .src-components-switch-index--pc--1hbUQ { width: 50px; height: 30px; border-width: 1px; -webkit-border-radius: 16px / 50%; -moz-border-radius: 16px / 50%; border-radius: 16px / 50%; } .src-components-switch-index--pc--1hbUQ > :first-child { -webkit-border-radius: 15px / 50%; -moz-border-radius: 15px / 50%; border-radius: 15px / 50%; } .src-components-switch-index--pc--1hbUQ > :last-child { width: 30px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _ref;

    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: [_vm.$style.switch, _vm.$style[_vm.page.type], (_ref = {}, _defineProperty(_ref, _vm.$style.checked, _vm.value), _defineProperty(_ref, _vm.$style.disabled, _vm.disabled), _ref)], style: _vm.style, on: { "click": _vm.click } }, [!this.image || !this.image.length ? [_c('div', { style: { backgroundColor: _vm.color[0] } }), _vm._v(" "), _c('div')] : _vm._e()], 2);
  }, staticRenderFns: [], cssModules: { "switch": "src-components-switch-index--switch--1kI-j", "checked": "src-components-switch-index--checked--bIX34", "disabled": "src-components-switch-index--disabled--lDNq9", "pc": "src-components-switch-index--pc--1hbUQ" },
  name: 'vswitch',
  inheritAttrs: false,
  mixins: [mixinType],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    color: { // 背景色
      type: Array,
      default: function _default() {
        return ['#fff', '#ffe26d'];
      }
    },
    image: { // 背景图片
      type: Array,
      default: function _default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prevent: { // 是否阻止自动切换
      type: Boolean,
      default: false
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    },
    style: function style() {
      if (this.image && this.image.length) {
        // 优先使用背景图
        return {
          backgroundColor: 'transparent',
          backgroundImage: 'url(' + this.image[this.value ? 1 : 0] + ')'
        };
      } else {
        return this.value ? {
          backgroundColor: this.color[1]
        } : {};
      }
    }
  },
  watch: {
    value: function value(_value) {
      this.$emit('change', _value);
    }
  },
  methods: {
    click: function click() {
      if (!this.disabled) {
        this.$emit('click', this.value);
        !this.prevent && this.$emit('input', !this.value);
      }
    }
  }
};

export default index;