网站首页被k怎么恢复,网站推送,wordpress版本对应的php版本号,英文网站如何做关键词在Vue.js项目中#xff0c;this.$confirm 通常是基于某些UI库#xff08;如Element UI或Ant Design Vue#xff09;的对话框确认方法。
以下是基于Element UI的this.$confirm的用法示例。
在此之前#xff0c;你的项目要已经安装了Element UI#xff0c;如果没安装话就打…在Vue.js项目中this.$confirm 通常是基于某些UI库如Element UI或Ant Design Vue的对话框确认方法。
以下是基于Element UI的this.$confirm的用法示例。
在此之前你的项目要已经安装了Element UI如果没安装话就打开你的控制台到根目录
执行以下操作
如若未安装Element UI
1. 使用npm或yarn进行安装
npm install element-ui --save
# 或者
yarn add element-ui
2. Vue项目入口文件main.js或main.ts中引入Element UI
import Vue from vue;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
使用this.$confirm: 1. 简单举例点击button是否确认删除 confirmButtonText (String): 确认按钮的文本默认为“确定”。cancelButtonText (String): 取消按钮的文本默认为“取消”。type (String): 确认框的类型可以是success、warning、info或error默认为info。
templatedivel-button typetext clickhandleDelete删除/el-button/div
/templatescript
export default {methods: {handleDelete() {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {//删除逻辑}).catch(() {//取消逻辑});},},
};
/scriptstyle scoped
/* 你的样式代码 */
/style
以下举例的 确认取消 为 释放取消 / 继续离开
2. 是否显示确认取消及是否点击遮罩层离开 具体解释如下代码 this.$confirm(当前集货位订单司机未装车是否释放, 释放集货位, {confirmButtonText: 释放,cancelButtonText: 取消,type: warning,showCancelButton:false, //控制取消是否显示showConfirmButton:false, //控制释放是否显示closeOnClickModal: false //点击遮罩层是否离开}).then((){});}) 3.调换默认的确定及取消的按钮位置
3.1 使用customClass 自定义类名 来改变按钮的位置深度修改 this.$confirm(当前集货位订单司机未装车是否释放, 释放集货位, {confirmButtonText: 释放,cancelButtonText: 取消,type: warning,customClass:set_custom_class,closeOnClickModal: false}).then((){})3.2 设置样式
在原有基础上再加一个style使用scoped无效 拿到里面的两个button用css调换 style langscss
.set_custom_class {.el-message-box__btns {.el-button:nth-child(1) {float:right;}.el-button:nth-child(2) {margin-right:10px;background-color:#2d8cf0;border-color:#2d8cf0;}}
}
/style
效果如下 4.自定义图标文字标题 使用 h 函数创建的虚拟DOM节点就是createElement函数 第一个 h 函数调用创建了一个 div 元素。它的第二个参数是 null表示没有数据对象没有属性、样式或事件监听器。第三个参数是一个数组包含了该 div 的子节点可以设置自己的类名及样式。 const h this.$createElement
this.$confirm(, {message:h(div,null, [h(i,{ class:el-icon-warning,style:color:#f90;font-size:30px; }),h(span,{class:set_span, style:}, 释放集货位),h(p,{ style:margin:10px 0 0 40px; },当前集货位订单司机未装车是否释放)]),confirmButtonText: 继续,cancelButtonText: 离开,
}).then(() {}).catch(() {});style langscss
.set_span{margin-left:10px;font-size:16px;line-height:30px;font-weight:600;vertical-align:top;
}
.set_i{color:#f90;font-size:30px;
}
/style
最后的自定义效果如下 注意点
如果设置了type这个属性他不会改变你通过HTML嵌入的图标type属性会改变对话框的背景色和按钮样式但它不直接控制图标 到底啦
