From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 06 Nov 2023 08:48:39 +0800 Subject: [PATCH] fix:小程序订阅消息 --- uni_modules/uview-ui/components/u-toast/u-toast.vue | 291 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 291 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-toast/u-toast.vue b/uni_modules/uview-ui/components/u-toast/u-toast.vue new file mode 100644 index 0000000..f194830 --- /dev/null +++ b/uni_modules/uview-ui/components/u-toast/u-toast.vue @@ -0,0 +1,291 @@ +<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, // ��������������������� + }, + 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' + } + // ������������������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> -- Gitblit v1.8.0