From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 01 Nov 2023 16:07:03 +0800
Subject: [PATCH] fix:小程序分享功能和秒级数据
---
uni_modules/uview-ui/components/u-notify/u-notify.vue | 211 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 211 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-notify/u-notify.vue b/uni_modules/uview-ui/components/u-notify/u-notify.vue
new file mode 100644
index 0000000..30adb72
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-notify/u-notify.vue
@@ -0,0 +1,211 @@
+<template>
+ <u-transition
+ mode="slide-down"
+ :customStyle="containerStyle"
+ :show="open"
+ >
+ <view
+ class="u-notify"
+ :class="[`u-notify--${tmpConfig.type}`]"
+ :style="[backgroundColor, $u.addStyle(customStyle)]"
+ >
+ <u-status-bar v-if="tmpConfig.safeAreaInsetTop"></u-status-bar>
+ <view class="u-notify__warpper">
+ <slot name="icon">
+ <u-icon
+ v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+ :name="tmpConfig.icon"
+ :color="tmpConfig.color"
+ :size="1.3 * tmpConfig.fontSize"
+ :customStyle="{marginRight: '4px'}"
+ ></u-icon>
+ </slot>
+ <text
+ class="u-notify__warpper__text"
+ :style="{
+ fontSize: $u.addUnit(tmpConfig.fontSize),
+ color: tmpConfig.color
+ }"
+ >{{ tmpConfig.message }}</text>
+ </view>
+ </view>
+ </u-transition>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * notify ������������
+ * @description ���������������������������������������������������������������������������������������
+ * @tutorial
+ * @property {String | Number} top ������������������ ( ������ 0 )
+ * @property {String} type ���������primary���success���warning���error ( ������ 'primary' )
+ * @property {String} color ������������ ( ������ '#ffffff' )
+ * @property {String} bgColor ������������
+ * @property {String} message ���������������������
+ * @property {String | Number} duration ������������������0���������������������ms ( ������ 3000 )
+ * @property {String | Number} fontSize ������������ ( ������ 15 )
+ * @property {Boolean} safeAreaInsetTop ��������������������������������������������������� ( ������ false )
+ * @property {Object} customStyle ������������������������������
+ * @event {Function} open ������������������������������
+ * @event {Function} close ������������������������������
+ * @example <u-notify message="Hi uView"></u-notify>
+ */
+ export default {
+ name: 'u-notify',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ data() {
+ return {
+ // ������������������
+ open: false,
+ timer: null,
+ config: {
+ // ������������������
+ top: uni.$u.props.notify.top,
+ // type���������primary���success���warning���error
+ type: uni.$u.props.notify.type,
+ // ������������
+ color: uni.$u.props.notify.color,
+ // ������������
+ bgColor: uni.$u.props.notify.bgColor,
+ // ���������������������
+ message: uni.$u.props.notify.message,
+ // ������������������0���������������������ms
+ duration: uni.$u.props.notify.duration,
+ // ������������
+ fontSize: uni.$u.props.notify.fontSize,
+ // ���������������������������������������������������
+ safeAreaInsetTop: uni.$u.props.notify.safeAreaInsetTop
+ },
+ // ���������������������������������������������������������������������������������������������
+ tmpConfig: {}
+ }
+ },
+ computed: {
+ containerStyle() {
+ let top = 0
+ if (this.tmpConfig.top === 0) {
+ // #ifdef H5
+ // H5������������������������������������������������������������������������������
+ // H5���������������������44px
+ top = 44
+ // #endif
+ }
+ const style = {
+ top: uni.$u.addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
+ // ���������������������u-transition������������������������������fixed������
+ // ������������������������������
+ position: 'fixed',
+ left: 0,
+ right: 0,
+ zIndex: 10076
+ }
+ return style
+ },
+ // ������������������
+ backgroundColor() {
+ const style = {}
+ if (this.tmpConfig.bgColor) {
+ style.backgroundColor = this.tmpConfig.bgColor
+ }
+ return style
+ },
+ // ������������������������
+ icon() {
+ let icon
+ if (this.tmpConfig.type === 'success') {
+ icon = 'checkmark-circle'
+ } else if (this.tmpConfig.type === 'error') {
+ icon = 'close-circle'
+ } else if (this.tmpConfig.type === 'warning') {
+ icon = 'error-circle'
+ }
+ return icon
+ }
+ },
+ created() {
+ // ���������������������������toast���������������������������
+ ['primary', 'success', 'error', 'warning'].map(item => {
+ this[item] = message => this.show({
+ type: item,
+ message
+ })
+ })
+ },
+ methods: {
+ show(options) {
+ // ���������������������this.config���������������������������u-toast������������������������������
+ this.tmpConfig = uni.$u.deepMerge(this.config, options)
+ // ���������������������������������������������������������������������������������������
+ this.clearTimer()
+ this.open = true
+ if (this.tmpConfig.duration > 0) {
+ this.timer = setTimeout(() => {
+ this.open = false
+ // ������������������������������������������toast������
+ this.clearTimer()
+ // ������������������callback������������������������������
+ typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
+ }, this.tmpConfig.duration)
+ }
+ },
+ // ������notify
+ close() {
+ this.clearTimer()
+ },
+ clearTimer() {
+ this.open = false
+ // ���������������
+ clearTimeout(this.timer)
+ this.timer = null
+ }
+ },
+ beforeDestroy() {
+ this.clearTimer()
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ $u-notify-padding: 8px 10px !default;
+ $u-notify-text-font-size: 15px !default;
+ $u-notify-primary-bgColor: $u-primary !default;
+ $u-notify-success-bgColor: $u-success !default;
+ $u-notify-error-bgColor: $u-error !default;
+ $u-notify-warning-bgColor: $u-warning !default;
+
+
+ .u-notify {
+ padding: $u-notify-padding;
+
+ &__warpper {
+ @include flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+
+ &__text {
+ font-size: $u-notify-text-font-size;
+ text-align: center;
+ }
+ }
+
+ &--primary {
+ background-color: $u-notify-primary-bgColor;
+ }
+
+ &--success {
+ background-color: $u-notify-success-bgColor;
+ }
+
+ &--error {
+ background-color: $u-notify-error-bgColor;
+ }
+
+ &--warning {
+ background-color: $u-notify-warning-bgColor;
+ }
+ }
+</style>
--
Gitblit v1.8.0