From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-toast/u-toast.vue | 220 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 220 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-toast/u-toast.vue b/uview-ui/components/u-toast/u-toast.vue
new file mode 100644
index 0000000..a2209a5
--- /dev/null
+++ b/uview-ui/components/u-toast/u-toast.vue
@@ -0,0 +1,220 @@
+<template>
+ <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]" :style="{
+ zIndex: uZIndex
+ }">
+ <view class="u-icon-wrap">
+ <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon>
+ </view>
+ <text class="u-text">{{tmpConfig.title}}</text>
+ </view>
+</template>
+
+<script>
+ /**
+ * toast 娑堟伅鎻愮ず
+ * @description 姝ょ粍浠惰〃鐜板舰寮忕被浼紆ni鐨剈ni.showToastAPI锛屼絾涔熸湁涓嶅悓鐨勫湴鏂广��
+ * @tutorial https://www.uviewui.com/components/toast.html
+ * @property {String} z-index toast灞曠ず鏃剁殑z-index鍊�
+ * @event {Function} show 鏄剧ずtoast锛屽闇�涓�杩涘叆椤甸潰灏辨樉绀簍oast锛岃鍦╫nReady鐢熷懡鍛ㄦ湡璋冪敤
+ * @example <u-toast ref="uToast" />
+ */
+ export default {
+ name: "u-toast",
+ props: {
+ // z-index鍊�
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ },
+ },
+ data() {
+ return {
+ isShow: false,
+ timer: null, // 瀹氭椂鍣�
+ config: {
+ params: {}, // URL璺宠浆鐨勫弬鏁帮紝瀵硅薄
+ title: '', // 鏄剧ず鏂囨湰
+ type: '', // 涓婚绫诲瀷锛宲rimary锛宻uccess锛宔rror锛寃arning锛宐lack
+ duration: 2000, // 鏄剧ず鐨勬椂闂达紝姣
+ isTab: false, // 鏄惁璺宠浆tab椤甸潰
+ url: '', // toast娑堝け鍚庢槸鍚﹁烦杞〉闈紝鏈夊垯璺宠浆锛屼紭鍏堢骇楂樹簬back鍙傛暟
+ icon: true, // 鏄剧ず鐨勫浘鏍�
+ position: 'center', // toast鍑虹幇鐨勪綅缃�
+ callback: null, // 鎵ц瀹屽悗鐨勫洖璋冨嚱鏁�
+ back: false, // 缁撴潫toast鏄惁鑷姩杩斿洖涓婁竴椤�
+ },
+ tmpConfig: {}, // 灏嗙敤鎴烽厤缃拰鍐呯疆閰嶇疆鍚堝苟鍚庣殑涓存椂閰嶇疆鍙橀噺
+ };
+ },
+ computed: {
+ iconName() {
+ // 鍙湁涓嶄负none锛屽苟涓攖ype涓篹rror|warning|succes|info鏃跺�欙紝鎵嶆樉绀哄浘鏍�
+ if (['error', 'warning', 'success', 'info'].indexOf(this.tmpConfig.type) >= 0 && this.tmpConfig.icon) {
+ let icon = this.$u.type2icon(this.tmpConfig.type);
+ return icon;
+ }
+ },
+ uZIndex() {
+ // 鏄剧ずtoast鏃跺�欙紝濡傛灉鐢ㄦ埛鏈変紶閫抸-index鍊硷紝鏈夐檺浣跨敤
+ return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
+ }
+ },
+ methods: {
+ // 鏄剧ずtoast缁勪欢锛岀敱鐖剁粍浠堕�氳繃this.$refs.xxx.show(options)褰㈠紡璋冪敤
+ show(options) {
+ // 涓嶉檷缁撴灉鍚堝苟鍒皌his.config鍙橀噺锛岄伩鍏嶅娆℃潯鐢╱-toast锛屽墠鍚庣殑閰嶇疆閫犳垚娣疯
+ this.tmpConfig = this.$u.deepMerge(this.config, options);
+ if (this.timer) {
+ // 娓呴櫎瀹氭椂鍣�
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ this.isShow = true;
+ this.timer = setTimeout(() => {
+ // 鍊掕鏃剁粨鏉燂紝娓呴櫎瀹氭椂鍣紝闅愯棌toast缁勪欢
+ this.isShow = false;
+ clearTimeout(this.timer);
+ this.timer = null;
+ // 鍒ゆ柇鏄惁瀛樺湪callback鏂规硶锛屽鏋滃瓨鍦ㄥ氨鎵ц
+ typeof(this.tmpConfig.callback) === 'function' && this.tmpConfig.callback();
+ this.timeEnd();
+ }, this.tmpConfig.duration);
+ },
+ // 闅愯棌toast缁勪欢锛岀敱鐖剁粍浠堕�氳繃this.$refs.xxx.hide()褰㈠紡璋冪敤
+ hide() {
+ this.isShow = false;
+ if (this.timer) {
+ // 娓呴櫎瀹氭椂鍣�
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ },
+ // 鍊掕鏃剁粨鏉熶箣鍚庯紝杩涜鐨勪竴浜涙搷浣�
+ timeEnd() {
+ // 濡傛灉甯︽湁url鍊硷紝鏍规嵁isTab涓簍rue鎴栬�協alse杩涜璺宠浆
+ if (this.tmpConfig.url) {
+ // 濡傛灉url娌℃湁"/"寮�澶达紝娣诲姞涓婏紝鍥犱负uni鐨勮矾鐢辫烦杞渶瑕�"/"寮�澶�
+ if (this.tmpConfig.url[0] != '/') this.tmpConfig.url = '/' + this.tmpConfig.url;
+ // 鍒ゆ柇鏄惁鏈変紶閫掓樉寮忕殑鍙傛暟
+ if (Object.keys(this.tmpConfig.params).length) {
+ // 鍒ゆ柇鐢ㄦ埛浼犻�掔殑url涓紝鏄惁甯︽湁鍙傛暟
+ // 浣跨敤姝ｅ垯鍖归厤锛屼富瑕佷緷鎹槸鍒ゆ柇鏄惁鏈�"/","?","="绛夛紝濡傗��/page/index/index?name=mary"
+ // 濡傛灉鏈塸arams鍙傛暟锛岃浆鎹㈠悗鏃犻渶甯︿笂"?"
+ let query = '';
+ if (/.*\/.*\?.*=.*/.test(this.tmpConfig.url)) {
+ // object瀵硅薄杞负get绫诲瀷鐨勫弬鏁�
+ query = this.$u.queryParams(this.tmpConfig.params, false);
+ this.tmpConfig.url = this.tmpConfig.url + "&" + query;
+ } else {
+ query = this.$u.queryParams(this.tmpConfig.params);
+ this.tmpConfig.url += query;
+ }
+ }
+ // 濡傛灉鏄烦杞瑃ab椤甸潰锛屽氨浣跨敤uni.switchTab
+ if (this.tmpConfig.isTab) {
+ uni.switchTab({
+ url: this.tmpConfig.url
+ });
+ } else {
+ uni.navigateTo({
+ url: this.tmpConfig.url
+ });
+ }
+ } else if(this.tmpConfig.back) {
+ // 鍥為��鍒颁笂涓�椤�
+ this.$u.route({
+ type: 'back'
+ })
+ }
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-toast {
+ position: fixed;
+ z-index: -1;
+ transition: opacity 0.3s;
+ text-align: center;
+ color: #fff;
+ border-radius: 8rpx;
+ background: #585858;
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28rpx;
+ opacity: 0;
+ pointer-events: none;
+ padding: 18rpx 40rpx;
+ }
+
+ .u-toast.u-show {
+ opacity: 1;
+ }
+
+ .u-icon {
+ margin-right: 10rpx;
+ @include vue-flex;
+ align-items: center;
+ line-height: normal;
+ }
+
+ .u-position-center {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ /* #ifndef APP-NVUE */
+ max-width: 70%;
+ /* #endif */
+ }
+
+ .u-position-top {
+ left: 50%;
+ top: 20%;
+ transform: translate(-50%,-50%);
+ }
+
+ .u-position-bottom {
+ left: 50%;
+ bottom: 20%;
+ transform: translate(-50%,-50%);
+ }
+
+ .u-type-primary {
+ color: $u-type-primary;
+ background-color: $u-type-primary-light;
+ border: 1px solid rgb(215, 234, 254);
+ }
+
+ .u-type-success {
+ color: $u-type-success;
+ background-color: $u-type-success-light;
+ border: 1px solid #BEF5C8;
+ }
+
+ .u-type-error {
+ color: $u-type-error;
+ background-color: $u-type-error-light;
+ border: 1px solid #fde2e2;
+ }
+
+ .u-type-warning {
+ color: $u-type-warning;
+ background-color: $u-type-warning-light;
+ border: 1px solid #faecd8;
+ }
+
+ .u-type-info {
+ color: $u-type-info;
+ background-color: $u-type-info-light;
+ border: 1px solid #ebeef5;
+ }
+
+ .u-type-default {
+ color: #fff;
+ background-color: #585858;
+ }
+</style>
--
Gitblit v1.9.3