<template>
<view
@click.stop="overCloseCHange"
v-if="show"
class="tm-dialog fixed flex-center"
:style="{
height: sysinfo + 'px'
}"
>
<view @click.stop="" :class="[show ? 'success' : '']">
<view :class="[clickOverlay ? 'clickover' : '']">
<tm-sheet :black="black_tmeme" :padding="[0, 0]" classname="overflow" :width="600" :round="round" shadow="10">
<view class="text-size-g flex-center text-weight-b px-32 pt-32 " :class="[black_tmeme ? 'bk' : '', bottomBorder ? 'border-b-1' : '']">
<slot name="title">{{ title }}</slot>
</view>
<view class="px-50 py-n12 text-size-n text-align-center" style="max-height:700rpx;overflow-y: auto;">
<slot name="default">
<view >
<text :class="[black_tmeme ? 'text-white' : 'text-grey-darken-3']">{{ content }}</text>
<view v-if="model == 'confirm'" class="pt-24">
<tm-input bg-color="grey-lighten-5" @input="suren" :placeholder="placeholder" :black="black_tmeme" v-model="inputValSd" :border-bottom="false" :flat="true"></tm-input>
</view>
</view>
</slot>
</view>
<slot name="button">
<view v-if="theme == 'merge'" class="py-0 flex-between">
<tm-button
:fllowTheme="fllowTheme"
:height="80"
text
:black="black_tmeme"
@click="concelClick"
v-if="showCancel"
:theme="black_tmeme ? 'grey-darken-4' : color_tmeme"
round="0"
shadow="0"
style="width: 50%;"
block
>
{{ cancelText }}
</tm-button>
<tm-button
:fllowTheme="fllowTheme"
:height="80"
:black="black_tmeme"
@click="confirmClick"
:theme="color_tmeme"
round="0"
shadow="0"
:style="{
width: showCancel ? '50%' : '100%'
}"
block
>
{{ confirmText }}
</tm-button>
</view>
<view v-if="theme == 'split'" class="px-40 pb-40 flex-between">
<tm-button
:fllowTheme="fllowTheme"
text
:height="72"
:black="black_tmeme"
@click="concelClick"
v-if="showCancel"
:theme="black_tmeme ? 'grey-darken-4' : color_tmeme"
round="24"
font-size="30"
shadow="0"
style="width: 46%;"
block
>
{{ cancelText }}
</tm-button>
<tm-button
:fllowTheme="fllowTheme"
:height="72"
:black="black_tmeme"
@click="confirmClick"
:theme="color_tmeme"
round="24"
font-size="30"
shadow="0"
:style="{
width: showCancel ? '46%' : '100%'
}"
block
>
{{ confirmText }}
</tm-button>
</view>
</slot>
</tm-sheet>
</view>
</view>
</view>
</template>
<script>
/**
* 对话框
* @property {Boolean} value = [] 显示对话框，推荐使用value.sync或者v-model
* @property {Boolean} black = [] 暗黑模式。
* @property {Boolean} bottom-border = [] true,是否显示标题正文的边线。
* @property {String} confirmColor = [] 默认：primary，确认按钮的主题颜色
* @property {String} confirmText = [] 默认：确认，确认按钮的文字
* @property {Boolean} showCancel = [] 默认：true，是否显示取消按钮。
* @property {Boolean} disabled = [] 默认：false，禁用后，点击哪都关闭不了，只能通过手动设置v-model来关闭窗体。
* @property {String} cancelColor = [] 默认：primary，取消按钮的主题色。
* @property {String} cancelText = [] 默认：取消，取消按钮显示的文字。
* @property {String} title = [] 默认：提示，标题。
* @property {String} content = [] 默认：''，内容文字
* @property {String} theme = [merge|split] 默认：'merge'，merge合并按钮，split分割按钮
* @property {String} model = [dialog|confirm] 默认：'dialog'，对话框类型.dialog|confirm
* @property {Number|String} round = [] 默认：'4'，圆角
* @property {String} input-val = [] 默认：''，model=confirm,显示的输入框内容。confirm
* @property {Boolean} over-close = [] 默认：true，点击遮罩是否关闭窗体。
* @property {Function} confirm 确认按钮时触发，注意：如果类型为confirm则返回 的参数包含输入框的内容。
* @property {Function} cancel 点击取消按钮时触发。
* @example <tm-dialog v-model="show" content="这是测试的内容"></tm-dialog>
*/
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
export default {
components: { tmSheet, tmButton, tmInput },
name: 'tm-dialog',
model: {
prop: 'value',
event: 'input'
},
props: {
placeholder:{
type:String,
default:'请输入'
},
value: {
type: Boolean,
default: false
},
bottomBorder: {
type: Boolean,
default: false
},
black: {
type: Boolean | String,
default: null
},
confirmColor: {
type: String,
default: 'primary'
},
confirmText: {
type: String,
default: '确认'
},
showCancel: {
type: Boolean,
default: true
},
cancelColor: {
type: String,
default: 'primary'
},
cancelText: {
type: String,
default: '取消'
},
title: {
type: String,
default: '消息提示'
},
content: {
type: String,
default: ''
},
// 样式。
theme: {
type: String,
default: 'merge' //merge|split merge合并按钮，split分割按钮
},
// 对话框类型.dialog|confirm
model: {
type: String,
default: 'dialog' // dialog|confirm
},
round: {
type: Number | String,
default: 8
},
inputVal: {
type: String,
default: ''
},
// 跟随主题色的改变而改变。
fllowTheme: {
type: Boolean | String,
default: true
},
overClose: {
type: Boolean | String,
default: false
},
//如果为true,需要你手动关闭。点按钮关闭不了。
disabled: {
type: Boolean | String,
default: false
}
},
computed: {
show: {
get: function() {
return this.value;
},
set: async function(val) {
this.$emit('input', val);
this.$emit('update:value', val);
}
},
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: function() {
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
return this.$tm.vx.state().tmVuetify.color;
}
return this.confirmColor;
}
},
data() {
return {
inputValSd: '',
sysinfo: 0,
clickOverlay: false
};
},
created() {
let sysinfo = uni.getSystemInfoSync();
// #ifdef APP || MP
if (sysinfo.windowHeight == sysinfo.screenHeight) {
this.sysinfo = sysinfo.screenHeight;
} else if (sysinfo.windowHeight < sysinfo.screenHeight) {
this.sysinfo = sysinfo.windowHeight;
}
// #endif
// #ifdef H5
if(sysinfo.screenHeight>=sysinfo.windowHeight){
this.sysinfo = sysinfo.windowHeight;
}else{
this.sysinfo = sysinfo.screenHeight;
}
// #endif
this.show = this.value;
},
methods: {
overCloseCHange() {
if (this.overClose) {
this.concelClick();
} else {
this.anifeed();
}
},
anifeed() {
let t = this;
if (this.clickOverlay) this.clickOverlay = !this.clickOverlay;
this.clickOverlay = true;
uni.$tm.sleep(100).then(() => {
t.clickOverlay = false;
});
},
confirmClick() {
if (this.model == 'confirm') {
if (!this.inputValSd) {
uni.$tm.toast('请输入内容');
this.anifeed();
return;
}
this.$emit('confirm', this.inputValSd);
} else {
this.$emit('confirm');
}
if (this.disabled == false) {
this.show = false;
}
},
suren(e) {
this.$emit('update:inputVal', this.inputValSd);
},
concelClick() {
this.$emit('concel');//错误的拼写兼容
this.$emit('cancel');//正常的拼写
if (this.disabled == false) {
this.show = false;
}
}
}
};
</script>
<style lang="scss">
.tm-dialog {
width: 100%;
z-index: 600;
background-color: rgba(0, 0, 0, 0.3);
left: 0;
top: 0;
backdrop-filter: blur(3px);
transition: all 0.24s;
.success {
animation: success 0.24s ease;
// transform: scale(1);
}
.clickover {
animation: clickover 0.24s ease;
}
}
@keyframes clickover {
0% {
transform: scale(0.95);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes success {
0% {
transform: scale(0.75);
opacity: 0;
}
75% {
transform: scale(1.05);
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>