307 lines
9.9 KiB
Vue
307 lines
9.9 KiB
Vue
<template>
|
||
<view class="u-toast">
|
||
<u-overlay :show="isShow" :custom-style="overlayStyle">
|
||
<view
|
||
class="u-toast__content"
|
||
:style="[contentStyle]"
|
||
:class="[
|
||
'u-type-' + tmpConfig.type,
|
||
tmpConfig.type === 'loading' || tmpConfig.loading
|
||
? 'u-toast__content--loading'
|
||
: '',
|
||
]"
|
||
>
|
||
<u-loading-icon
|
||
v-if="tmpConfig.type === 'loading'"
|
||
mode="circle"
|
||
color="rgb(255, 255, 255)"
|
||
inactiveColor="rgb(120, 120, 120)"
|
||
size="25"
|
||
></u-loading-icon>
|
||
<u-icon
|
||
v-else-if="tmpConfig.type !== 'defalut' && iconName"
|
||
:name="iconName"
|
||
size="17"
|
||
:color="tmpConfig.type"
|
||
:customStyle="iconStyle"
|
||
></u-icon>
|
||
<u-gap
|
||
v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
|
||
height="12"
|
||
bgColor="transparent"
|
||
></u-gap>
|
||
<text
|
||
class="u-toast__content__text"
|
||
:class="['u-toast__content__text--' + tmpConfig.type]"
|
||
style="max-width: 400rpx"
|
||
>
|
||
{{ tmpConfig.message }}
|
||
</text>
|
||
</view>
|
||
</u-overlay>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* toast 消息提示
|
||
* @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
|
||
* @tutorial https://www.uviewui.com/components/toast.html
|
||
* @property {String | Number} zIndex toast展示时的zIndex值 (默认 10090 )
|
||
* @property {Boolean} loading 是否加载中 （默认 false ）
|
||
* @property {String | Number} message 显示的文字内容
|
||
* @property {String} icon 图标，或者绝对路径的图片
|
||
* @property {String} type 主题类型 （默认 default）
|
||
* @property {Boolean} show 是否显示该组件 （默认 false）
|
||
* @property {Boolean} overlay 是否显示透明遮罩，防止点击穿透 （默认 false ）
|
||
* @property {String} position 位置 （默认 'center' ）
|
||
* @property {Object} params 跳转的参数
|
||
* @property {String | Number} duration 展示时间，单位ms （默认 2000 ）
|
||
* @property {Boolean} isTab 是否返回的为tab页面 （默认 false ）
|
||
* @property {String} url toast消失后是否跳转页面，有则跳转，优先级高于back参数
|
||
* @property {Function} complete 执行完后的回调函数
|
||
* @property {Boolean} back 结束toast是否自动返回上一页 （默认 false ）
|
||
* @property {Object} customStyle 组件的样式，对象形式
|
||
* @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
|
||
* @example <u-toast ref="uToast" />
|
||
*/
|
||
export default {
|
||
name: "u-toast",
|
||
mixins: [uni.$u.mpMixin, uni.$u.mixin],
|
||
data() {
|
||
return {
|
||
isShow: false,
|
||
timer: null, // 定时器
|
||
config: {
|
||
message: "", // 显示文本
|
||
type: "", // 主题类型，primary，success，error，warning，black
|
||
duration: 2000, // 显示的时间，毫秒
|
||
icon: true, // 显示的图标
|
||
position: "center", // toast出现的位置
|
||
complete: null, // 执行完后的回调函数
|
||
overlay: false, // 是否防止触摸穿透
|
||
loading: false, // 是否加载中状态
|
||
zIndex: 12000,
|
||
},
|
||
tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
|
||
};
|
||
},
|
||
computed: {
|
||
iconName() {
|
||
// 只有不为none，并且type为error|warning|succes|info时候，才显示图标
|
||
if (!this.tmpConfig.icon || this.tmpConfig.icon == "none") {
|
||
return "";
|
||
}
|
||
if (
|
||
["error", "warning", "success", "primary"].includes(this.tmpConfig.type)
|
||
) {
|
||
return uni.$u.type2icon(this.tmpConfig.type);
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
overlayStyle() {
|
||
const style = {
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
display: "flex",
|
||
zIndex: this.zIndex,
|
||
};
|
||
// 将遮罩设置为100%透明度，避免出现灰色背景
|
||
style.backgroundColor = "rgba(0, 0, 0, 0)";
|
||
return style;
|
||
},
|
||
iconStyle() {
|
||
const style = {};
|
||
// 图标需要一个右边距，以跟右边的文字有隔开的距离
|
||
style.marginRight = "4px";
|
||
// #ifdef APP-NVUE
|
||
// iOSAPP下，图标有1px的向下偏移，这里进行修正
|
||
if (uni.$u.os() === "ios") {
|
||
style.marginTop = "-1px";
|
||
}
|
||
// #endif
|
||
return style;
|
||
},
|
||
loadingIconColor() {
|
||
let color = "rgb(255, 255, 255)";
|
||
if (
|
||
["error", "warning", "success", "primary"].includes(this.tmpConfig.type)
|
||
) {
|
||
// loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
|
||
// 必须为rgb格式的，所以这里做一个处理
|
||
color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type]);
|
||
}
|
||
return color;
|
||
},
|
||
// 内容盒子的样式
|
||
contentStyle() {
|
||
const windowHeight = uni.$u.sys().windowHeight,
|
||
style = {};
|
||
let value = 0;
|
||
// 根据top和bottom，对Y轴进行窗体高度的百分比偏移
|
||
if (this.tmpConfig.position === "top") {
|
||
value = -windowHeight * 0.25;
|
||
} else if (this.tmpConfig.position === "bottom") {
|
||
value = windowHeight * 0.25;
|
||
}
|
||
style.transform = `translateY(${value}px)`;
|
||
return style;
|
||
},
|
||
},
|
||
created() {
|
||
// 通过主题的形式调用toast，批量生成方法函数
|
||
["primary", "success", "error", "warning", "default", "loading"].map(
|
||
(item) => {
|
||
this[item] = (message) =>
|
||
this.show({
|
||
type: item,
|
||
message,
|
||
});
|
||
}
|
||
);
|
||
},
|
||
methods: {
|
||
// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
|
||
show(options) {
|
||
// 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
|
||
this.tmpConfig = uni.$u.deepMerge(this.config, options);
|
||
// 清除定时器
|
||
this.clearTimer();
|
||
this.isShow = true;
|
||
this.timer = setTimeout(() => {
|
||
// 倒计时结束，清除定时器，隐藏toast组件
|
||
this.clearTimer();
|
||
// 判断是否存在callback方法，如果存在就执行
|
||
typeof this.tmpConfig.complete === "function" &&
|
||
this.tmpConfig.complete();
|
||
}, this.tmpConfig.duration);
|
||
},
|
||
// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
|
||
hide() {
|
||
this.clearTimer();
|
||
},
|
||
clearTimer() {
|
||
this.isShow = false;
|
||
// 清除定时器
|
||
clearTimeout(this.timer);
|
||
this.timer = null;
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
this.clearTimer();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../libs/css/components.scss";
|
||
|
||
$u-toast-color: #fff !default;
|
||
$u-toast-border-radius: 4px !default;
|
||
$u-toast-border-background-color: #585858 !default;
|
||
$u-toast-border-font-size: 14px !default;
|
||
$u-toast-border-padding: 12px 20px !default;
|
||
$u-toast-loading-border-padding: 20px 20px !default;
|
||
$u-toast-content-text-color: #fff !default;
|
||
$u-toast-content-text-font-size: 15px !default;
|
||
$u-toast-u-icon: 10rpx !default;
|
||
$u-toast-u-type-primary-color: $u-primary !default;
|
||
$u-toast-u-type-primary-background-color: #ecf5ff !default;
|
||
$u-toast-u-type-primary-border-color: rgb(215, 234, 254) !default;
|
||
$u-toast-u-type-primary-border-width: 1px !default;
|
||
$u-toast-u-type-success-color: $u-success !default;
|
||
$u-toast-u-type-success-background-color: #dbf1e1 !default;
|
||
$u-toast-u-type-success-border-color: #bef5c8 !default;
|
||
$u-toast-u-type-success-border-width: 1px !default;
|
||
$u-toast-u-type-error-color: $u-error !default;
|
||
$u-toast-u-type-error-background-color: #fef0f0 !default;
|
||
$u-toast-u-type-error-border-color: #fde2e2 !default;
|
||
$u-toast-u-type-error-border-width: 1px !default;
|
||
$u-toast-u-type-warning-color: $u-warning !default;
|
||
$u-toast-u-type-warning-background-color: #fdf6ec !default;
|
||
$u-toast-u-type-warning-border-color: #faecd8 !default;
|
||
$u-toast-u-type-warning-border-width: 1px !default;
|
||
$u-toast-u-type-default-color: #fff !default;
|
||
$u-toast-u-type-default-background-color: #585858 !default;
|
||
|
||
.u-toast {
|
||
&__content {
|
||
@include flex;
|
||
padding: $u-toast-border-padding;
|
||
border-radius: $u-toast-border-radius;
|
||
background-color: $u-toast-border-background-color;
|
||
color: $u-toast-color;
|
||
align-items: center;
|
||
/* #ifndef APP-NVUE */
|
||
max-width: 600rpx;
|
||
/* #endif */
|
||
position: relative;
|
||
|
||
&--loading {
|
||
flex-direction: column;
|
||
padding: $u-toast-loading-border-padding;
|
||
}
|
||
|
||
&__text {
|
||
color: $u-toast-content-text-color;
|
||
font-size: $u-toast-content-text-font-size;
|
||
line-height: $u-toast-content-text-font-size;
|
||
|
||
&--default {
|
||
color: $u-toast-content-text-color;
|
||
}
|
||
|
||
&--error {
|
||
color: $u-error;
|
||
}
|
||
|
||
&--primary {
|
||
color: $u-primary;
|
||
}
|
||
|
||
&--success {
|
||
color: $u-success;
|
||
}
|
||
|
||
&--warning {
|
||
color: $u-warning;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-type-primary {
|
||
color: $u-toast-u-type-primary-color;
|
||
background-color: $u-toast-u-type-primary-background-color;
|
||
border-color: $u-toast-u-type-primary-border-color;
|
||
border-width: $u-toast-u-type-primary-border-width;
|
||
}
|
||
|
||
.u-type-success {
|
||
color: $u-toast-u-type-success-color;
|
||
background-color: $u-toast-u-type-success-background-color;
|
||
border-color: $u-toast-u-type-success-border-color;
|
||
border-width: 1px;
|
||
}
|
||
|
||
.u-type-error {
|
||
color: $u-toast-u-type-error-color;
|
||
background-color: $u-toast-u-type-error-background-color;
|
||
border-color: $u-toast-u-type-error-border-color;
|
||
border-width: $u-toast-u-type-error-border-width;
|
||
}
|
||
|
||
.u-type-warning {
|
||
color: $u-toast-u-type-warning-color;
|
||
background-color: $u-toast-u-type-warning-background-color;
|
||
border-color: $u-toast-u-type-warning-border-color;
|
||
border-width: 1px;
|
||
}
|
||
|
||
.u-type-default {
|
||
color: $u-toast-u-type-default-color;
|
||
background-color: $u-toast-u-type-default-background-color;
|
||
}
|
||
</style>
|