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

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

效果图如下:


使用方法

使用方法

<!-- 提示框 --><cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>// 显示询问弹框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;}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容