一、select切换选择
背景：实现在select选择后弹框让用户确认一下是否要选择切换，确定则改变值，取消则还原旧值。
change 选中值发生变化时触发
解决思路：可以通过定义一个变量，通过这个变量决定是否弹框提示用户是否选择切换，同时通过监听select的值（value），对数据进行赋值等操作。
方法一
HTML
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 = https://www.it610.com/article/this.oldVal
})
} else {
// 目前测试不会走到这一步
this.isModeChange = false
}
},
watch:{
value:{
handler(curVal,oldVal){
this.oldVal = oldVal
}
}
}效果截图：
文章图片
方法二 也可以通过给option添加click事件，选择后弹框让用户确认一下是否要选择切换。
HTML
二、select点击事件
【UI框架系列-select】使用@click="msChange"，事件不起作用
使用@click.native="msChange" ，该点击事件会比change事件触发时间更早。
