mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,347 @@
|
||||
<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" :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: {
|
||||
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.35);
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.35s;
|
||||
.success {
|
||||
animation: success 0.35s linear;
|
||||
|
||||
// transform: scale(1);
|
||||
}
|
||||
.clickover {
|
||||
animation: clickover 0.35s linear;
|
||||
}
|
||||
}
|
||||
@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>
|
||||
Reference in New Issue
Block a user