UI框架系列-select

一、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
     }
  }
}

效果截图：

方法二

也可以通过给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事件触发时间更早。