在项目中、在执行删除等不可撤销操作时，要提示用户。等用户二次确认后、才执行对应的方法。

效果展示

点击删除

等待二次确认

确定删除

删除成功

1、Vue官网

Popconfirm 气泡确认框
点击元素，弹出气泡确认框。

<template>
<el-popconfirmtitle="这是一段内容确定删除吗？"
><el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>

2、项目中的实际应用

            <template slot-scope="scope"><el-popconfirmconfirm-button-text="好的"cancel-button-text="不用了"icon="el-icon-info"icon-color="red"title="确定删除该商品吗？"@confirm="handleDelete(scope.$index, scope.row)"><el-buttontype="danger"icon="el-icon-delete"slot="reference"></el-button></el-popconfirm></template>

3、后语

学无止境。。。。。。

Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）相关推荐

vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
Vue中动态设置页面title
前言更多内容,请访问我的个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码在mian.js中引入 //设置title import VueWe ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
vue中脚手架设置自动打开浏览器打开后地址为http://0.0.0.0:8080/
1.问题描述在创建了一个vue-cli的时候,设置启动服务浏览器自动打开的时候,发生了如下图的情况 IP地址不是之前手动打开的loclhos:8080而是0.0.0.0:8080 解决方法只能将最 ...
Vue中splice的使用：删除替换添加
解释 splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组) index:数组开始下标 len: 替换/删除的长度 item:替换的 ...
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
Vue中使用v-for生成dom删除元素错乱的问题
项目上需要一个条件树的组件,多个条件这里使用一个数组去保存,然后使用v-for循环数组插入dom. vue组件里使用v-for时很容易忽略了每一项的key值,遇到的问题如果后续需要对数组进行删除操作的 ...
Vue中如何设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
vue中如何设置和清除定时器setInterval
data中生明定时器方法里使用和清除定时器

Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）

效果展示

1、Vue官网

2、项目中的实际应用

3、后语

Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）相关推荐

最新文章

热门文章