最近做了一个需求,需要弹出一个 message box, 其中 msgbox 里包含一个输入框,输入框要填写内容,点击确认后要拿到这个输入的值。
// 这个函数返回一个 promise,该promise如果resolve会拿到输入的值。
function addDescription() {
const h = this.$createElement;
let desc = ''; // 这里保存输入的值
return new Promise(resolve => {
this.$msgbox({ // msgbox里面如果是dom元素,只能是原生的dom,如果想用elmentui,就应该手动给他添加类
title: '添加描述',
message: h(
'div',
{
class: {
'el-input': true,
'el-input--small': true,
'el-input--suffix': true
}
},
[
h('input', {
domProps: {
type: 'text',
value: desc,
placeholder: '请输入描述'
},
class: {
'el-input__inner': true
},
on: {
change: function(event) {
desc = event.target.value; // 监听change事件,手动的将值给保存到desc中
}
}
})
]
),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '不需要描述',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
resolve(desc);
done();
} else {
resolve('');
done();
}
}
});
});
}
使用的时候:
let res = await this.addDescription(); // 这样就能拿到填写的值了