el-select 选中后二次确认弹窗～

1.需求：在el-select下拉选择的时候，当我们更换选项时需要弹出二次确认弹窗。

2.思路：利用el-select中change事件，通过watch监听数据变换，定义一个初始状态，当点击弹窗中确认时设置成功，点击取消时，将将监听到的旧值赋给点击的值。

3.代码：

 <el-select v-model="tab_id" placeholder="请选择" @change="tabidChange"><el-option v-for="item in tabList" :key="item.id" :label="item.title" :value="item.id"> </el-option></el-select>watch: {tab_id(val,oldval){console.log(val,oldval,"监听");this.oldval = oldval}},tabidChange(val){let tab_titel = this.tabList.find((res)=>{return res.id == val})this.$confirm(`确认将「${tab_titel.title}」频道页面设置成得到首页?`, "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$message({type: "success",message: "设置成功!",});}).catch(() => {this.$message({type: "error",message: "已取消设置",});//将监听到的旧值赋给点击的值this.tab_id = this.oldval;});},

el-select 选中后二次确认弹窗～相关推荐

Element ui Switch 开关二次确认弹窗后再更改开关状态
Element ui Switch 开关二次确认弹窗后再更改开关状态 Switch 开关基本用法 Events 重点: 禁用状态 Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/ ...
vue二次确认弹窗组件
1.二次确认弹窗组件reconfirm.vue <template><el-dialog :visible="dialogFlag" @close="c ...
微信公众号 h5 退出强制二次确认弹窗
微信公众号 h5 退出强制二次确认弹窗 $(function () {pushHistory();window.addEventListener("popstate", f ...
封装一个全局使用的二次确认弹窗
背景: 如图所示,在项目中进行删除.取消.停用等等操作的时候,出于考虑误操作等,我们通常会需要用户进行二次确认,然后再进行操作.对于这种使用比较多的公共功能,我们如何才能保持一致并且简单的使用呢?出于 ...
vue结合el-dialog 封装自己的confirm二次确认弹窗
这里使用el-dialog 主要是用他的关闭动画,让关闭更加丝滑首先在components 添加 ConfirmAlert文件夹然后添加vue和js 文件 index.js import Vue ...
“二次确认”设计策略
概述二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作. 二次确认是一种打断用户流程的设计,只是迫不得已的折中方案.所以在是否使用,如何使用上需要有一定的考 ...
Modal的二次确认弹框触发时机
Modal的二次确认弹框触发时机 react中modal中的值变化了之后点击取消弹出二次确认弹窗,要是值没有变化可以直接关闭modal. 在项目里边有个需求,就是需要我们的modal弹窗(modal里 ...
Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）
在项目中.在执行删除等不可撤销操作时,要提示用户.等用户二次确认后.才执行对应的方法. 效果展示点击删除等待二次确认确定删除删除成功 1.Vue官网 Popconfirm 气泡确认框点击元素 ...
uniapp uni-file-picker 组件删除时增加二次确认弹框
全文放在下面,先写一下思路 1.思路首先看了一下api文档,只有删除的事件,然后发现抛出的删除事件是已经删除了图片之后的事件,然后去源码里看在哪里抛出的删除发现是在点击按钮的事件里做的删除,所以我 ...

el-select 选中后二次确认弹窗～

el-select 选中后二次确认弹窗～相关推荐

最新文章

热门文章