前端Vue自定义询问弹框和输入弹框

前端Vue自定义询问弹框和输入弹框, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13119

效果图如下:


使用方法

使用方法

// 显示询问弹框showDialogBox() {this.$refs['DialogBox'].confirm({title: '请确认您填写的信息',content: '前端Vue开发?',DialogType: 'inquiry',animation: 0}).then((res)=>{console.log('res = ', JSON.stringify(res));})},// 显示输入弹框showDialogBoxInput() {this.$refs['DialogBox'].confirm({title: '更改昵称',placeholder: '请输入修改的昵称',value: this.nickname,DialogType: 'input',animation: 0}).then((res)=>{// 输入框返回值resthis.nickname = res.value;})},

HTML代码实现部分

html

显示询问弹框显示输入弹框exportdefault{data() {return{nickname:'Hello'}},onLoad() {},methods: {// 显示询问弹框showDialogBox() {this.$refs['DialogBox'].confirm({title:'请确认您填写的手机号',content:'手机号码:13999999999?',DialogType:'inquiry',animation:0}).then((res) =>{console.log('res = ',JSON.stringify(res));})},// 显示输入弹框showDialogBoxInput() {this.$refs['DialogBox'].confirm({title:'更改昵称',placeholder:'请输入修改的昵称',value:this.nickname,DialogType:'input',animation:0}).then((res) =>{// 输入框返回值resthis.nickname= res.value;})},}}.content{display: flex;flex-direction: column;}

你可能感兴趣的:(前端Vue自定义询问弹框和输入弹框)