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