From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 08 Jan 2024 16:16:12 +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