关于前端: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

// 每次切换都要弹框进行确认是否切换
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 事件触发工夫更早。