美文网首页让前端飞uni-appWEB前端程序开发
前端Vue自定义询问弹框和输入弹框

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

作者: 前端组件分享 | 来源:发表于2023-06-20 00:14 被阅读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;}

    相关文章

      网友评论

        本文标题:前端Vue自定义询问弹框和输入弹框

        本文链接:https://www.haomeiwen.com/subject/twasydtx.html