第vue自定義彈框效果(確認(rèn)框、提示框)本文實(shí)例為大家分享了vue自定義彈框效果的具體代碼，供大家參考，具體內(nèi)容如下

1、自定義確認(rèn)框和提示框

根據(jù)傳入的type來判斷是確認(rèn)框或提示框

template

transitionname="confirm-fade"

divv-if="isShowConfirm"@click.stop="clickFun('clickCancel')"

div@click.stop

h3v-show="titleText!=''"{{titleText}}/h3

p{{content}}/p

div

divv-if="type==='confirm'"@click="clickFun('clickCancel')"

p{{cancelText}}/p

/div

div@click="clickFun('clickConfirm')"

p{{confirmText}}/p

/div

/div

/div

/div

/transition

/template

scripttype="text/ecmascript-6"

exportdefault{

data(){

return{

isShowConfirm:false,//用于控制整個窗口的顯示/隱藏

titleText:'操作提示',//提示框標(biāo)題

content:'SaySomething...',//提示框的內(nèi)容

cancelText:'取消',//取消按鈕的文字

confirmText:'確認(rèn)',//確認(rèn)按鈕的文字

type:'confirm',//表明彈框的類型：confirm-確認(rèn)彈窗（有取消按鈕）；alert-通知彈框（沒有取消按鈕）

outerData:null//用于記錄外部傳進(jìn)來的數(shù)據(jù)，也可以給外部監(jiān)聽userBehavior，事件的函數(shù)提供判斷到底是哪個事件觸發(fā)的

methods:{

show(content,config){

this.content=content||'SaySomething...'

if(Ototype.toString.call(config)==='[objectObject]'){

//確保用戶傳遞的是一個對象

this.titleText=config.titleText||''

this.cancelText=config.cancelText||'取消'

this.confirmText=config.confirmText||'確認(rèn)'

this.type=config.type||'confirm'

this.outerData=config.data||null

this.isShowConfirm=true

hidden(){

this.isShowConfirm=false

this.titleText='操作提示'

this.cancelText='取消'

this.confirmText='確認(rèn)'

this.type='confirm'

this.outerData=null

clickFun(type){

this.$emit('userBehavior',type,this.outerData)

this.hidden()

/script

stylescoped

.my-confirm{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

background-color:rgba(0,0,0,0.5);

z-index:998;

/*這里防止當(dāng)用戶長按屏幕，出現(xiàn)的黑色背景色塊，以及iPhone橫平時字體的縮放問題*/

-webkit-text-size-adjust:100%;

-webkit-tap-highlight-color:rgba(0,0,0,0);

/*進(jìn)入和出去的動畫*/

.confirm-fade-enter-active{

animation:opacity0.3s;

.confirm-fade-enter-active.confirm-content-wrap{

animation:scale0.3s;

.confirm-fade-leave-active{

animation:outOpacity0.2s;

/*包裹層容器樣式*/

.confirm-content-wrap{

position:absolute;

top:28%;

left:0;

right:0;

width:280px;

margin:0auto;

background-color:#fff;

border-radius:5px;

z-index:999;

user-select:none;

/*頂部標(biāo)題部分*/

.my-confirm-title{

padding-top:20px;

text-align:center;

font-size:20px;

font-weight:500;

color:#333;

/*中間內(nèi)容部分*/

.my-confirm-content{

padding:015px;

padding-top:20px;

margin-bottom:32px;

text-align:center;

font-size:16px;

color:#666;

line-height:1.5;

/*底部按鈕樣式*/

.my-operation{

display:flex;

border-top:1pxsolid#eee;

.my-operation.my-cancel-btn,.confirm-btn{

flex:1;

.my-operation.confirm-btn{

color:#ffb000;

.my-operation.my-btn-text{

text-align:center;

font-size:16px;

margin:8px0;

padding:6px0;

/*其他修飾樣式*/

.my-border-right{

border-right:1pxsolid#eee;

/*進(jìn)來的動畫*/

@keyframesopacity{

0%{

opacity:0;

100%{

opacity:1;

@keyframesscale{

0%{

transform:scale(0);

60%{

transform:scale(1.1);

100%{

transform:scale(1);

/*出去的動畫*/

@keyframesoutOpacity{

0%{

opacity:1;

100%{

opacity:0;

/style

2、調(diào)用：

（1）提示框的使用：

DialogViewref="myDialog"@userBehavior="changeData"/DialogView

//提示框

this.$refs.myDialog.show(content,{

type:'alert',

confirmText:'OK',

cancelText:'取消',

titleText:'',

data:null

})

效果：

（2）確認(rèn)框：

this.$refs.myDialog.show('要兌換這個商品么？',{

type:'confirm',

confirmText:'立即兌換',

cancelText:'不用了',

titleText:'',

data:{shop:shop,operate:'exchange'}

})

效果：

當(dāng)為確認(rèn)框時的按鍵處理：changeData

DialogViewref="myDialog"@userBehavior="changeData"/DialogView

changeData(type,data){

console.log('changeData',data)

if(type==='clickConfirm'){

if(data.operate==='exchange'){

//this.reduceEnergy(data.shop)

this.exchangeCoupon(data.shop)

}elseif(data.operate==='d