让前端飞uni-appWEB前端程序开发

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

2023-06-20  本文已影响0人  前端组件分享

前端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;}

上一篇下一篇

猜你喜欢

热点阅读