likes
comments
collection
share

UI框架系列-select

作者站长头像
站长
· 阅读数 43

一、select切换选择

背景:实现在select选择后弹框让用户确认一下是否要选择切换,确定则改变值,取消则还原旧值。

change 选中值发生变化时触发

解决思路:可以通过定义一个变量,通过这个变量决定是否弹框提示用户是否选择切换,同时通过监听select的值(value),对数据进行赋值等操作。

方法一

HTML

<el-select v-model="value" placeholder="请选择" @change="modelChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

js

// 每次切换都要弹框进行确认是否切换
// 实际上change事件的时候,value的值已经被更改,只是目前添加弹框,取消的话使用旧值
modelChange(){
  if(!this.isModeChange){
     this.isModeChange = false
     this.$confirm('确定要切换?', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      this.$message({
        type: 'success',
        message: '切换成功!'
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消切换'
      })
      this.isModeChange = false
      this.value = this.oldVal
    })   
  } else {
    // 目前测试不会走到这一步
    this.isModeChange = false
  }
},
watch:{
  value:{
    handler(curVal,oldVal){
        this.oldVal = oldVal
     }
  }
}

效果截图:

UI框架系列-select

方法二

也可以通过给option添加click事件,选择后弹框让用户确认一下是否要选择切换。

HTML

<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
     @click.native="modelChange"
    >
  </el-option>
</el-select>

二、select点击事件

使用@click="msChange",事件不起作用

<el-select v-model="value" placeholder="请选择" @click="msChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

使用@click.native="msChange" ,该点击事件会比change事件触发时间更早。