cyber-web-ui/es/switch/SwitchControl.js

spring-cyber前端ui框架

import { createVNode as _createVNode } from "vue";
import { defineComponent, ref, computed, watch } from "vue";
export default defineComponent({
  name: "CSwitchControl",
  props: {
    // 是否选中
    checked: {
      type: [Boolean, String, Number],
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 选中时的值
    checkedValue: {
      type: [Boolean, String, Number],
      default: true
    },
    // 未选中时的值
    unCheckedValue: {
      type: [Boolean, String, Number],
      default: false
    }
  },
  setup: function setup(props, _ref) {
    var attrs = _ref.attrs,
      slots = _ref.slots,
      emit = _ref.emit,
      expose = _ref.expose;
    var checked = ref();
    var animationFlag = ref(false);
    var timeout = undefined;
    var checkedStatus = computed(function () {
      return checked.value == props.checkedValue;
    });
    function onClick() {
      if (props.disabled) return;
      animationFlag.value = false;
      checked.value = checkedStatus.value ? props.unCheckedValue : props.checkedValue;
      setTimeout(function () {
        animationFlag.value = true;
        timeout && clearTimeout(timeout);
        timeout = setTimeout(function () {
          animationFlag.value = false;
        }, 3000);
      });
      emit('update:checked', checked.value);
      emit('change', checked.value);
    }
    watch(function () {
      return props.checked;
    }, function () {
      checked.value = props.checked;
    }, {
      immediate: true
    });
    return function () {
      var _slots$default;
      return _createVNode("button", {
        "class": ['cyber-switch-control', {
          'active': checkedStatus.value
        }, {
          'cyber-switch-control-disabled': props.disabled
        }],
        "onClick": onClick
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), _createVNode("div", {
        "class": "circle"
      }, null), animationFlag.value ? _createVNode("div", {
        "class": "switch-control-click-animating"
      }, null) : undefined]);
    };
  }
});