elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

2020-06-14 06:26:41易采站长站整理

},
//方法
methods: {
startUsingSubmit() {
this.startUsingLoading=true
this.$confirm("提示", "你好!", {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(()=>{
this.startUsingLoading=false
})
this.$message({
showClose: true,
message: '这是一条消息提示',
duration: 0 //表示显示几秒, 0 表示不消失
});
}
},
})
</script>
</body>
</html>




ps:下面看下vue-elementUI 弹出框


<div class="dial-header">
<el-dialog title="请选择适配器" :visible.sync="showFlag" style="width:900px">
<div style="text-align: left; margin: 0;width:400px;" >
<div class="adp" v-for="adapter in adapters" style="width:300px;height:30px;line-height:30px;border-top:none;margin:0px 0px 0px 40px">
<el-radio :label="adapter.ip" style="width:200px;padding-left:40px" v-model="radio"></el-radio>
<div style="display: inline-block;width:30px"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></div>
</div>
<div style="padding-top:20px;text-align: right">
<el-button type="text" size="small" @click="showFlag = false">取消</el-button>
<el-button type="primary" size="small" @click="radioEvent()">确定</el-button>
</div>
</div>
</el-dialog>
<el-button type="primary" @click="showFlag = true">选择</el-button>
</div>
<script>
export default {
data () {
return {
showFlag: false,
radio:""
}
},
methods:{
radioEvent(){
this.showFlag = false;
this.adapterSelected = this.radio;
},
}
</script>

总结

以上所述是小编给大家介绍的elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!