151 lines
4.0 KiB
Vue
151 lines
4.0 KiB
Vue
<template>
|
|
<view style="height: 100%">
|
|
<view @tap="close" :class="'weui-mask ' + (!showClone ? 'weui-mask_hidden' : '')" v-if="mask"></view>
|
|
<view v-if="showClone" @tap="close" :class="'weui-dialog__wrp ' + extClass">
|
|
<view class="weui-dialog" @tap.stop.prevent="stopEvent">
|
|
<view class="weui-dialog__hd">
|
|
<view class="weui-dialog__title">
|
|
{{ title }}
|
|
<slot name="title"></slot>
|
|
</view>
|
|
</view>
|
|
<view class="weui-dialog__bd">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="weui-dialog__ft">
|
|
<block v-if="buttonsClone && buttonsClone.length">
|
|
<view
|
|
:class="'weui-dialog__btn ' + item.className + ' ' + item.extClass"
|
|
:data-index="index"
|
|
@tap="buttonTap"
|
|
v-for="(item, index) in buttonsClone"
|
|
:key="index"
|
|
>
|
|
{{ item.text }}
|
|
</view>
|
|
<!-- <view class="weui-dialog__btn" bindtap="confirm">确认</view> -->
|
|
</block>
|
|
<slot name="footer" v-else></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
innerShow: false,
|
|
buttonsClone: '',
|
|
showClone: false
|
|
};
|
|
},
|
|
options: {
|
|
multipleSlots: true,
|
|
addGlobalClass: true
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
extClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
maskClosable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
mask: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
buttons: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
mounted() {
|
|
// 处理小程序 ready 生命周期
|
|
this.$nextTick(() => this.ready());
|
|
},
|
|
methods: {
|
|
ready: function ready() {
|
|
var buttons = this.buttons;
|
|
var len = buttons.length;
|
|
buttons.forEach(function (btn, index) {
|
|
if (len === 1) {
|
|
btn.className = 'weui-dialog__btn_primary';
|
|
} else if (index === 0) {
|
|
btn.className = 'weui-dialog__btn_default';
|
|
} else {
|
|
btn.className = 'weui-dialog__btn_primary';
|
|
}
|
|
});
|
|
this.buttonsClone=buttons
|
|
},
|
|
|
|
buttonTap: function buttonTap(e) {
|
|
var index = e.currentTarget.dataset.index;
|
|
this.$emit(
|
|
'buttontap',
|
|
{
|
|
detail: {
|
|
index: index,
|
|
item: this.buttons[index]
|
|
}
|
|
},
|
|
{}
|
|
);
|
|
},
|
|
|
|
close: function close() {
|
|
var data = this;
|
|
if (!data.maskClosable) {
|
|
return;
|
|
}
|
|
this.showClone=false
|
|
this.$emit(
|
|
'close',
|
|
{
|
|
detail: {}
|
|
},
|
|
{}
|
|
);
|
|
},
|
|
|
|
stopEvent: function stopEvent() {}
|
|
},
|
|
created: function () {},
|
|
watch: {
|
|
buttons: {
|
|
handler: function (newVal, oldVal) {
|
|
this.buttonsClone = newVal;
|
|
},
|
|
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
|
|
show: {
|
|
handler: function (newVal, oldVal) {
|
|
this.showClone = newVal;
|
|
},
|
|
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
|
|
/***/
|
|
</script>
|
|
<style>
|
|
@import './dialog.css';
|
|
</style>
|