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

更新時間：2026年03月31日 09:05:10 作者：蠟臺

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

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

最后附上完整組件代碼

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

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

添加@click.native.prevent方法達到目的，
- 給vue組件綁定事件時候，必須加上native ，否則會認為監(jiān)聽的是來自Item組件自定義的事件
- prevent 是用來阻止默認的，相當于原生的event.preventDefault()
與此同時需要打開disabled屬性
是因為不加disabled會出現(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 ? `確定關閉渠道 ${row.channelId}嗎？` : `確定開啟渠道 ${row.channelId}嗎？`
      this.$modal.confirm(msg).then(() => {
        // 處理業(yè)務邏輯
        row.state = e === 1 ?2:1
      }).then(() => {
        // 成功時執(zhí)行
        row.state = e === 1 ?2:1
      }).catch(() => {
          //取消或失敗時處理
      });
    }

最后修改switch 的 disabled樣式問題

• 保證修改完后同樣式正常無異

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

<style lang="scss" scoped>
/* 深度選擇器進行樣式穿透 */
::v-deep{    
/* 修改elementUI-switch組件 disabled樣式 */
 .el-switch.is-disabled {
   opacity: 1;
  }    
  /*修改鼠標懸停顯示狀態(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;
  }    
  /*修改鼠標懸停顯示狀態(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>
//直接寫類名（不帶deep） 
.el-switch.is-disabled {
  opacity: 1 !important;
  // 用 ::v-deep 包起來
  ::v-deep {
    .el-switch__core , .el-switch__label{
      pointer-events: auto !important;
      cursor: pointer !important;
    }
  }
}
</style>

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

您可能感興趣的文章: