mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="show_dev" @click.stop.prevent="maskClick" :class="[mask?'mask':'']"
|
||||
class="tm-message fixed t-0 l-0 fulled fulled-height flex-center">
|
||||
<view :class="[black_dev?'black bk':'',clickOverlay?'clickOverlay':'']" class="tm-message-body round-6 pa-24 flex-center shadow-24 ">
|
||||
<view class=" flex-center flex-col">
|
||||
<view :class="[
|
||||
model,
|
||||
|
||||
]"><text class="iconfont" style="font-size: 54rpx;"
|
||||
:class="[ `text-${color_tmeme[model]}`,icon_dev||icon[model],black_dev?'text-white':'']"></text>
|
||||
</view>
|
||||
<view class="pt-12 text-align-center">
|
||||
<text class="text-size-n text-align-center "
|
||||
:class="[black_dev?`text-${color_tmeme[model]||color_tmeme}`+' text-white bk':`text-grey-darken-5`]">
|
||||
{{label_dev||label[model]}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 提示框
|
||||
* @property {Object} color = [] 默认对应的类型主题色
|
||||
* @property {Object} icon = [] 默认对应的类型图标
|
||||
* @property {Object} label = [] 默认对应的类型提示文字
|
||||
* @property {Boolean} black = [] 默认false,是否使用暗黑主题。
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-message',
|
||||
props: {
|
||||
color: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
load: 'primary',
|
||||
error: 'red',
|
||||
info: 'grey-darken-4',
|
||||
warn: 'orange',
|
||||
quest: 'primary',
|
||||
success: 'green',
|
||||
disabled: 'pink',
|
||||
wait: 'primary',
|
||||
}
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
load: 'icon-loading',
|
||||
error: 'icon-times-circle',
|
||||
info: 'icon-info-circle',
|
||||
warn: 'icon-exclamation-circle',
|
||||
quest: 'icon-question-circle',
|
||||
success: 'icon-check-circle',
|
||||
disabled: 'icon-ban',
|
||||
wait: 'icon-clock',
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
load: '加载中',
|
||||
error: '出错啦',
|
||||
info: '信息提示',
|
||||
warn: '警告信息',
|
||||
quest: '似乎有问题',
|
||||
success: '操作成功',
|
||||
disabled: '禁止操作',
|
||||
wait: '请等待',
|
||||
}
|
||||
}
|
||||
},
|
||||
// 暗黑
|
||||
black: {
|
||||
type: Boolean | String,
|
||||
default: null
|
||||
},
|
||||
// 跟随主题色的改变而改变。
|
||||
fllowTheme: {
|
||||
type: Boolean | String,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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) {
|
||||
let cos = this.$tm.vx.state().tmVuetify.color;
|
||||
let co={...this.color,info:cos,quest:cos,load:cos,wait:cos};
|
||||
|
||||
|
||||
return co;
|
||||
}
|
||||
return this.color;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: 'wait', //load,error,info，warn，quest，success,disabled，wait
|
||||
icon_dev: '',
|
||||
label_dev: '',
|
||||
timeId: 8964566588,
|
||||
show_dev: false,
|
||||
mask: false,
|
||||
black_dev: false,
|
||||
clickOverlay:false,
|
||||
};
|
||||
},
|
||||
destroyed(){
|
||||
clearTimeout(this.timeId);
|
||||
},
|
||||
methods: {
|
||||
async anifeed(){
|
||||
|
||||
this.clickOverlay = true;
|
||||
await uni.$tm.sleep(50)
|
||||
this.clickOverlay = false;
|
||||
},
|
||||
//{label,model,icon,mask,wait,black}
|
||||
show() {
|
||||
let t = this;
|
||||
let def = {
|
||||
label: '',
|
||||
model: 'info',
|
||||
icon: '',
|
||||
mask: false,
|
||||
wait: 2000,
|
||||
black: this.black_tmeme
|
||||
};
|
||||
let arg = arguments[0] ? {
|
||||
...def,
|
||||
...arguments[0]
|
||||
} : def;
|
||||
const {
|
||||
label,
|
||||
model,
|
||||
icon,
|
||||
mask,
|
||||
wait,
|
||||
black
|
||||
} = arg;
|
||||
this.label_dev = label;
|
||||
this.model = model;
|
||||
this.icon_dev = icon;
|
||||
this.black_dev = black;
|
||||
this.mask = mask;
|
||||
clearTimeout(this.timeId);
|
||||
if (this.model == 'load') {
|
||||
this.show_dev = true;
|
||||
} else {
|
||||
this.show_dev = true;
|
||||
this.timeId = setTimeout(function() {
|
||||
t.hide();
|
||||
}, wait);
|
||||
}
|
||||
},
|
||||
async maskClick(){
|
||||
|
||||
await this.anifeed();
|
||||
},
|
||||
hide() {
|
||||
this.show_dev = false;
|
||||
clearTimeout(this.timeId);
|
||||
this.mask = false;
|
||||
this.label_dev = '';
|
||||
this.model = 'info';
|
||||
this.model = 'info';
|
||||
this.icon_dev = '';
|
||||
this.black_dev = this.black_tmeme;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-message {
|
||||
z-index: 601;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
|
||||
&.mask {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tm-message-body {
|
||||
min-width: 110rpx;
|
||||
min-height: 120rpx;
|
||||
max-width: 64%;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
|
||||
&.black {
|
||||
background-color: rgba(0, 0, 0, 0.90) !important;
|
||||
}
|
||||
|
||||
animation: outin 0.3s ease-in-out;
|
||||
&.clickOverlay{
|
||||
animation: none !important;
|
||||
}
|
||||
.load {
|
||||
animation: load 0.5s infinite linear;
|
||||
}
|
||||
|
||||
.error {
|
||||
animation: error 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.info {
|
||||
animation: info 0.5s linear;
|
||||
}
|
||||
|
||||
.warn {
|
||||
animation: warn 0.5s infinite linear;
|
||||
}
|
||||
|
||||
.quest {
|
||||
animation: quest 1s infinite linear;
|
||||
}
|
||||
|
||||
.success {
|
||||
animation: success 1s linear;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
animation: warn 0.5s infinite linear;
|
||||
}
|
||||
|
||||
.wait {
|
||||
animation: wait 3.5s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes outin {
|
||||
0% {
|
||||
transform: scale(0.64)
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
// wait:'primary',
|
||||
@keyframes wait {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes success {
|
||||
0% {
|
||||
transform: scale(1.9)
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(0.7)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(0.9)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes quest {
|
||||
0% {
|
||||
transform: rotate(-45deg)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(-45deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes warn {
|
||||
0% {
|
||||
transform: translateX(-10rpx)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(10rpx)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10rpx)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes info {
|
||||
0% {
|
||||
transform: scale(0.5)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes error {
|
||||
0% {
|
||||
transform: scale(0.8)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user