elementUI 两个Switch 开关能不能实现相互依赖?

408 阅读1分钟

思路:通过change点击事件,value1开关 监听 value2开关的value值,来实现项目依赖的效果!

image.png

代码在线运行

<template>
    <el-switch
          v-model="value1"
          :active-value="'day'" 
          :inactive-value="'weekly'"
          :active-text="value1 === 'day' ? '每日' : '每周'"
          @change="handleFrequency"
      >
    </el-switch> <br/>

    <el-switch
          v-model="value2"
          :active-value="true"
          :inactive-value="false"
          :active-text="value2 ? '是' : '否'"
          @change="handleFirm"
      >
    </el-switch>
</template>

<script>
    data() {
      return {
        value1: 'day', // 开启关闭除了可以传true/false, 还可以这样传
        value2: true
      }
    },
    methods: {
      handleFrequency(){// 按钮2在按钮1关闭状态下,才可改动
        if(this.value2 === true) this.value1 = 'day';
      },
      handleFirm(){ // 按钮2打开后,按钮1自动打开
        this.value1 = 'day'
      },
    }
</script>