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

思路 :通过change点击事件,value1开关 监听 value2开关的value值,来实现项目依赖的效果! 代码 : 在线运行 < template > < el - switch v - model = "value1" : act...

这篇文章已从掘金同步到个人博客,原始发布地址为 掘金原文

思路:通过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>