FKJ-HHArome/components/customSwitch/index.js

Component({
  mixins: [],
  data: {
    bgcolor: '#fff',
    bdcolor: '#ccc'
  },
  props: {
    disabled: false, // 是否禁用
    checked: false, // 是否选中
    fieldKey:'',
    color: "rgba(61, 115, 255, 1)", // 激活状态颜色
    type: "capsule" // 默认胶囊状 capsule，可选：方形 square
  },
  didUpdate(newVal, oldVal) {
    console.log('didUpdate',newVal, oldVal)
    if (newVal.checked !== oldVal.checked){
      this.changeColor()
    }
  },
  didMount() {
    this.changeColor()
  },
  didUnmount() { },
  methods: {
    changeColor(){
      let checked = false;
      if (this.props.checked) {
        checked = true;
      } else {
        checked = false;
      }
      this.setData({
        checked: checked
      })
      if (this.data.checked) {
        this.setData({
          bgcolor: this.props.color,
          bdcolor: this.props.color
        })
      }else {
        this.setData({
          bgcolor: '#fff',
          bdcolor: '#fff'
        })
      }
    },
    handleSwitch(e) {
      if (!this.props.disabled || this.props.disabled === 'false') {
        this.setData({
          checked: !e.currentTarget.dataset.checked
        })
        if (this.data.checked) {
          this.setData({
            bgcolor: this.props.color,
            bdcolor: this.props.color
          })
        } else {
          this.setData({
            bgcolor: "#fff",
            bdcolor: "#ccc"
          })
        }
        if (this.props.onChange) {
          this.props.onChange(this.props.fieldKey, this.data.checked);
        }
      }
    }
  },
});