From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
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 涓婚锛宲rimary锛宻uccess锛寃arning锛宔rror ( 榛樿 'primary' )
+ * @property {String} color 瀛椾綋棰滆壊 ( 榛樿 '#ffffff' )
+ * @property {String} bgColor 鑳屾櫙棰滆壊
+ * @property {String} message 灞曠ず鐨勬枃瀛楀唴瀹�
+ * @property {String | Number} duration 灞曠ず鏃堕暱锛屼负0鏃朵笉娑堝け锛屽崟浣峬s ( 榛樿 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涓婚锛宲rimary锛宻uccess锛寃arning锛宔rror
+ 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鏃朵笉娑堝け锛屽崟浣峬s
+ 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),
+ // 鍥犱负缁勪欢搴曞眰涓簎-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() {
+ // 閫氳繃涓婚鐨勫舰寮忚皟鐢╰oast锛屾壒閲忕敓鎴愭柟娉曞嚱鏁�
+ ['primary', 'success', 'error', 'warning'].map(item => {
+ this[item] = message => this.show({
+ type: item,
+ message
+ })
+ })
+ },
+ methods: {
+ show(options) {
+ // 涓嶅皢缁撴灉鍚堝苟鍒皌his.config鍙橀噺锛岄伩鍏嶅娆¤皟鐢╱-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.9.3