352 lines
8.5 KiB
Vue
352 lines
8.5 KiB
Vue
<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>
|