Vue.js使用this.$confirm换行显示提示信息实例

2024-11-3 10:26| 发布者: ae2942d9| 查看: 86| 评论: 0

摘要: 目次Vue.js使用this.$confirm换行显示提示信息解释Vue的this.$confirm中注意this的指向解决方法总结Vue.js使用this.$confirm换行显示提示信息在写一个简朴的按钮点击确认框信息的时候，发现换行不能用\n。用了< br

Vue.js使用this.$confirm换行显示提示信息

在写一个简朴的按钮点击确认框信息的时候，发现换行不能用\n。用了< br>发现也是字符串的输出情势

去查了下发现必要使用$createElement来创建

这里我必要显示两行信息。

代码如下：

[code]creatNew(){ const h = this.$createElement this.$confirm('提示', { title: '提示', message: h('div', [ h('p', '新建会导致之前设置失效'), h('p', '是否继承新建？') ]), confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => { ....//调用新建方法 }).catch(()=>({}))//不要忘记catch //末了可以.finally(()=>({})) }[/code]

解释

[code]h('div')[/code]就体现创建一个div标签，
如果写成[code]h('div',{class:'...'})[/code]就可以定义class，如：

[code] h('i', { class: 'el-icon-question' })[/code]

如果写成下面的，则可以定义props。（以element的弹出框el-tooltip为例）

[code]h('el-tooltip',{props:{ content: (function() { return '弹出信息' })(), placement: 'top' }})[/code]

包罗关系用[code]h('div',[...])[/code]，如div中包罗两个p标签：（可以继承嵌套）

[code]h('div', [ h('p', '第一个p'), h('p', '第二个p') ])[/code]

Vue的this.$confirm中注意this的指向

Vue开发过程中遇到this. confirm( )里面的this失效题目，就是当你想在里面使用data数据的时候，我们每每是 this.dataName这种方式拿到值，但在 this.confirm()里面的this失效题目，就是当你想在里面使用data数据的时候，我们每每是this.dataName这种方式拿到值，但在this. confirm()里面的this失效题目，就是当你想在里面使用data数据的时候，我们每每是this.dataName这种方式拿到值，但在this.confirm()里面的this不是指向当前vue了，以是是取不到data的数据。

解决方法

因此我们在使用this.$confirm()前先保存this

[code]let _this = this[/code] [code] const _this = this this.$confirm({ title: '當前郵件正文内容爲空', content: h => <div style="color:red;">確認是否發佈?</div>, onOk () { console.log('保存提交的对象', this.objData) _this.loading = true initAxios.saveMail(_this.objData).then((res) => { _this.loading = false if (res.data.code === '200' && res.data.result) { _this.$router.go(-1) // 处置处罚返回必要点两次的题目 _this.$message.success('發佈成功！') } }) }, onCancel () { return false } }) [/code]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/328924fdz.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：在Nginx上摆设前端Vue项目的具体步调(超级简单!)下一篇：Vue项目如何安装引入使用Vant

账号		自动登录	找回密码
密码			立即注册

Vue.js使用this.$confirm换行显示提示信息实例

目次