Element-ui 使用 MessageBox 弹框 实现一个自定义的文本输入框
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
官网例子
这样并不是我们想要的输入框,所以可以优化一下
1、代码如下
const h = this.$createElement;
this.$msgbox({
title: "确认回复",
message: h(
"div",
{
attrs: {
class: "el-textarea"
}
},
[
h("textarea", {
attrs: {
placeholder: "请输入回复内容",
class: "el-textarea__inner",
autocomplete: "off",
rows: 15,
id: "commentContent"
},
value: this.commentContent,
on: { input: this.onCommentInputChange }
})
]
),
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
beforeClose: (action, instance, done) => {
if (action === "confirm") {
// 点击确定 要做的事情
} else {
done();
}
}
}).then(action => {
this.$message({
type: "info",
message: "message"
});
});
2、要注意的是,此时vue双向绑定不生效,需要手动监听一下数值变化
// 监听输入框值
onCommentInputChange() {
this.commentContent = document.getElementById("commentContent").value;
},
3、效果如下
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)