快捷導(dǎo)航

Vue自定義詢(xún)問(wèn)彈框和輸入彈框的示例代碼

更新時(shí)間：2023年06月20日 09:27:27 作者：前端vue組件

這篇文章主要介紹了Vue自定義詢(xún)問(wèn)彈框和輸入彈框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前端Vue自定義詢(xún)問(wèn)彈框和輸入彈框，下載完整代碼請(qǐng)?jiān)L問(wèn)uni-app插件市場(chǎng)地址：https://ext.dcloud.net.cn/plugin?id=13119

效果圖如下：

使用方法

<!-- 提示框 -->
<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>
// 顯示詢(xún)問(wèn)彈框
showDialogBox() {
this.$refs['DialogBox'].confirm({
title: '請(qǐng)確認(rèn)您填寫(xiě)的信息',
content: '前端Vue開(kāi)發(fā)?',
DialogType: 'inquiry',
animation: 0
}).then((res)=>{
console.log('res = ', JSON.stringify(res));
})
},
// 顯示輸入彈框
showDialogBoxInput() {
this.$refs['DialogBox'].confirm({
title: '更改昵稱(chēng)',
placeholder: '請(qǐng)輸入修改的昵稱(chēng)',
value: this.nickname,
DialogType: 'input',
animation: 0
}).then((res)=>{
// 輸入框返回值res
this.nickname = res.value;
})
},

HTML代碼實(shí)現(xiàn)部分

<template>
<view class="content">
<!-- 提示框 -->
<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>
<!-- 顯示詢(xún)問(wèn)彈框 -->
<button @click="showDialogBox"
style="width: 160px; height: 50px;background-color: antiquewhite; margin-top: 26px;">顯示詢(xún)問(wèn)彈框</button>
<!-- 顯示輸入彈框 -->
<button @click="showDialogBoxInput"
style="width: 160px; height: 50px;background-color: antiquewhite; margin-top: 26px;">顯示輸入彈框</button>
</view>
</template>
<script>
export default {
data() {
return {
nickname: 'Hello'
}
},
onLoad() {
},
methods: {
// 顯示詢(xún)問(wèn)彈框
showDialogBox() {
this.$refs['DialogBox'].confirm({
title: '請(qǐng)確認(rèn)您填寫(xiě)的手機(jī)號(hào)',
content: '手機(jī)號(hào)碼：13999999999?',
DialogType: 'inquiry',
animation: 0
}).then((res) => {
console.log('res = ', JSON.stringify(res));
})
},
// 顯示輸入彈框
showDialogBoxInput() {
this.$refs['DialogBox'].confirm({
title: '更改昵稱(chēng)',
placeholder: '請(qǐng)輸入修改的昵稱(chēng)',
value: this.nickname,
DialogType: 'input',
animation: 0
}).then((res) => {
// 輸入框返回值res
this.nickname = res.value;
})
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
</style>

到此這篇關(guān)于Vue自定義詢(xún)問(wèn)彈框和輸入彈框的文章就介紹到這了,更多相關(guān)vue自定義彈框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
彈框

相關(guān)文章

淺談mint-ui loadmore組件注意的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談mint-ui loadmore組件注意的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
vue使用echarts實(shí)現(xiàn)地圖的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
Vue Router 路由匹配語(yǔ)法示例詳解
文章詳細(xì)介紹了Vue Router中的路由匹配語(yǔ)法,包括動(dòng)態(tài)參數(shù)、正則約束、可重復(fù)參數(shù)、可選參數(shù)以及敏感與嚴(yán)格選項(xiàng),這些高級(jí)特性使得URL設(shè)計(jì)更加靈活和精確,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-10-10
Vuex 使用 v-model 配合 state的方法
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
詳解Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
使用vuex存儲(chǔ)用戶(hù)信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶(hù)信息到localStorage的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue使用ECharts實(shí)現(xiàn)折線(xiàn)圖和餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實(shí)現(xiàn)折線(xiàn)圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)
這篇文章主要介紹了vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue強(qiáng)制刷新組件的三種方法
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見(jiàn)的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時(shí),可能會(huì)遇到數(shù)據(jù)聯(lián)動(dòng)的現(xiàn)象,即修改一個(gè)表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會(huì)跟著變化,這種現(xiàn)象通常是因?yàn)樗斜砀竦臄?shù)據(jù)引用了同一個(gè)對(duì)象或數(shù)組導(dǎo)致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象,感興趣的朋友一起看看吧
2024-11-11