@minix-iot/ui/dist/packages/switch/switch.jsx

基于Vue的移动端轻量级UI组件库

import { DOMExtension } from '../../utils/extensions/dom';
import { Namespace } from '../../utils/namespace';

const namespace = Namespace.Create('switch');

export default {
    name: namespace.name,
    props: {
        theme: {
            type: String,
            default: 'brand'
        },
        value: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        color: {
            type: String,
            default: ''
        }
    },
    model:{
        prop:'value',
        event:'change'
    },
    computed: {
        cls() {
          return namespace.derive([
            this.theme,
            {
              disabled: this.disabled,
              active: this.value
            }
          ]);
        },
        style() {
          const style = {};
          if (this.value && this.color) {
            style.backgroundColor = this.color;
            style.borderColor = this.color;
          }
          return style;
        },
        circleCls() {
          return namespace.derive('circle', { active: this.value });
        }
    },
    methods: {
        toggle(e) {
            DOMExtension.StopPropogation(e);
            if (this.disabled) {
                return;
            }
            this.$emit('change', !this.value);
        }
    },
    render(){
        return (
            <div class={this.cls} vOn:click_stop={this.toggle} style={this.style}>
                <div class={this.circleCls}></div>
            </div>
        )
    }
}