快捷導(dǎo)航

Vue2 elementui2 中 el-switch 實(shí)現(xiàn)先判斷改變狀態(tài)

更新時(shí)間：2026年03月31日 09:05:10 作者：蠟臺(tái)

本文給大家介紹Vue2 elementui2中el-switch實(shí)現(xiàn)先判斷改變狀態(tài)的相關(guān)知識(shí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

Vue2 elementui2 中 el-switch 實(shí)現(xiàn)先判斷改變狀態(tài)

最后附上完整組件代碼

elementui 中 el-switch在使用時(shí)，直接使用change 事件，每次點(diǎn)擊時(shí)都先改變switch 狀態(tài)，然后再處理業(yè)務(wù)邏輯，體驗(yàn)上不優(yōu)好。根據(jù)產(chǎn)品要求需要先處理業(yè)務(wù)邏輯再改變switch狀態(tài)。

具體實(shí)現(xiàn): 給switch組件設(shè)置disable （必須設(shè)置）, 禁用掉操作，然后給switch 添加上@click.native 或 @click.native.prevent 事件

添加@click.native.prevent方法達(dá)到目的，
- 給vue組件綁定事件時(shí)候，必須加上native ，否則會(huì)認(rèn)為監(jiān)聽(tīng)的是來(lái)自Item組件自定義的事件
- prevent 是用來(lái)阻止默認(rèn)的，相當(dāng)于原生的event.preventDefault()
與此同時(shí)需要打開(kāi)disabled屬性
是因?yàn)椴患?code>disabled會(huì)出現(xiàn)調(diào)用兩次的非理想狀態(tài)

      ???????<el-table-column 
            label="渠道狀態(tài)" 
            prop="state" 
            width="80">
        <template slot-scope="{ row }">
          <el-switch 
                v-model="row.state" 
                :active-value="1" 
                :inactive-value="2" 
                @click.native="handleSwitchange(row.state, row)" 
                disabled 
            />
        </template>
      </el-table-column>

handleSwitchange(e,row) {
      const msg = e === 1 ? `確定關(guān)閉渠道 ${row.channelId}嗎？` : `確定開(kāi)啟渠道 ${row.channelId}嗎？`
      this.$modal.confirm(msg).then(() => {
        // 處理業(yè)務(wù)邏輯
        row.state = e === 1 ?2:1
      }).then(() => {
        // 成功時(shí)執(zhí)行
        row.state = e === 1 ?2:1
      }).catch(() => {
          //取消或失敗時(shí)處理
      });
    }

最后修改switch 的 disabled樣式問(wèn)題

• 保證修改完后同樣式正常無(wú)異

• 在設(shè)置disabled后開(kāi)關(guān)會(huì)有鼠標(biāo)禁用的樣式及透明度的變化，需要我們做修改。這里不建議直接在使用style 中修改避免污染其他界面樣式，建議使用深度選擇器deep進(jìn)行修改

<style lang="scss" scoped>
/* 深度選擇器進(jìn)行樣式穿透 */
::v-deep{    
/* 修改elementUI-switch組件 disabled樣式 */
 .el-switch.is-disabled {
   opacity: 1;
  }    
  /*修改鼠標(biāo)懸停顯示狀態(tài)*/
 .el-switch.is-disabled .el-switch__core,
 .el-switch.is-disabled .el-switch__label {
   cursor: pointer !important; /*這里修改成小手狀態(tài)*/
 }
}
</style>

不使用深度選擇器，這里需要去掉scoped

<style lang="scss" >
/* 修改elementUI-switch組件 disabled樣式 */
 .el-switch.is-disabled {
   opacity: 1;
  }    
  /*修改鼠標(biāo)懸停顯示狀態(tài)*/
 .el-switch.is-disabled .el-switch__core,
 .el-switch.is-disabled .el-switch__label {
   cursor: pointer !important; /*這里修改成小手狀態(tài)*/
 }
</style>

完整組件代碼：

使用：

?<switch-plus v-model="row.state" :active-value="1" :inactive-value="2" @onChange="handleSwitchange(row.state, row)" />

switchplus.vue:

<template>
  <el-switch v-bind="$attrs" @click.native.prevent="$emit('onChange')" disabled />
</template>
<script>
export default {
  name: 'SwitchPlus',
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
//直接寫(xiě)類(lèi)名（不帶deep） 
.el-switch.is-disabled {
  opacity: 1 !important;
  // 用 ::v-deep 包起來(lái)
  ::v-deep {
    .el-switch__core , .el-switch__label{
      pointer-events: auto !important;
      cursor: pointer !important;
    }
  }
}
</style>

到此這篇關(guān)于Vue2 elementui2 中 el-switch 實(shí)現(xiàn)先判斷改變狀態(tài)的文章就介紹到這了,更多相關(guān)Vue elementui el-switch判斷改變狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: