VUE使⽤MintUI(MessageBox)实现⾃定义提⽰框中的内容
项⽬需求将提⽰框中的提⽰内容修改成可以添加备注的多⾏⽂本域
效果图
准备⼯作
1. 引⼊ mint-ui
npm intall mint-ui --save
2. 在main.js中引⼊mintUI
// 引⼊mintUI
import MintUI from'mint-ui'
import'mint-ui/lib/style.css'
Vue.use(MintUI)
3. 在项⽬中引⼊mintUI的MessageBox模块
// 引⼊MessageBox模块
import{ MessageBox }from'mint-ui';
代码实现
// 效果图中展⽰的结构
let html =`<textarea id="textarea_val" cols="35" rows="5"></textarea>`
MessageBox({
$type:'confirm',
title:'请输⼊拒接原因',
message: html,
showCancelButton:true,
// showInput: true
}).then((res)=>{
console.log(res);
if(res =='confirm'){
let textarea_val = ElementById('textarea_val');
console.log(textarea_val.value)// 输⼊框中的值
// 判断写逻辑····
}
}).catch(err =>{
console.log(err);
let textarea_val = ElementById('textarea_val');
textarea_val.value ="";
})
textarea中cols表示个⼈实际开发中⽤到的效果问题总结出来便于⾃⼰以后开发查看调⽤
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论