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-toast/u-toast.vue | 291 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 291 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-toast/u-toast.vue b/uni_modules/uview-ui/components/u-toast/u-toast.vue new file mode 100644 index 0000000..f194830 --- /dev/null +++ b/uni_modules/uview-ui/components/u-toast/u-toast.vue @@ -0,0 +1,291 @@ +<template> + <view class="u-toast"> + <u-overlay + :show="isShow" + :custom-style="overlayStyle" + > + <view + class="u-toast__content" + :style="[contentStyle]" + :class="['u-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ? 'u-toast__content--loading' : '']" + > + <u-loading-icon + v-if="tmpConfig.type === 'loading'" + mode="circle" + color="rgb(255, 255, 255)" + inactiveColor="rgb(120, 120, 120)" + size="25" + ></u-loading-icon> + <u-icon + v-else-if="tmpConfig.type !== 'defalut' && iconName" + :name="iconName" + size="17" + :color="tmpConfig.type" + :customStyle="iconStyle" + ></u-icon> + <u-gap + v-if="tmpConfig.type === 'loading' || tmpConfig.loading" + height="12" + bgColor="transparent" + ></u-gap> + <text + class="u-toast__content__text" + :class="['u-toast__content__text--' + tmpConfig.type]" + style="max-width: 400rpx;" + >{{ tmpConfig.message }}</text> + </view> + </u-overlay> + </view> +</template> + +<script> + /** + * toast 娑堟伅鎻愮ず + * @description 姝ょ粍浠惰〃鐜板舰寮忕被浼紆ni鐨剈ni.showToastAPI锛屼絾涔熸湁涓嶅悓鐨勫湴鏂广�� + * @tutorial https://www.uviewui.com/components/toast.html + * @property {String | Number} zIndex toast灞曠ず鏃剁殑zIndex鍊� (榛樿 10090 ) + * @property {Boolean} loading 鏄惁鍔犺浇涓� 锛堥粯璁� false 锛� + * @property {String | Number} message 鏄剧ず鐨勬枃瀛楀唴瀹� + * @property {String} icon 鍥炬爣锛屾垨鑰呯粷瀵硅矾寰勭殑鍥剧墖 + * @property {String} type 涓婚绫诲瀷 锛堥粯璁� default锛� + * @property {Boolean} show 鏄惁鏄剧ず璇ョ粍浠� 锛堥粯璁� false锛� + * @property {Boolean} overlay 鏄惁鏄剧ず閫忔槑閬僵锛岄槻姝㈢偣鍑荤┛閫� 锛堥粯璁� false 锛� + * @property {String} position 浣嶇疆 锛堥粯璁� 'center' 锛� + * @property {Object} params 璺宠浆鐨勫弬鏁� + * @property {String | Number} duration 灞曠ず鏃堕棿锛屽崟浣峬s 锛堥粯璁� 2000 锛� + * @property {Boolean} isTab 鏄惁杩斿洖鐨勪负tab椤甸潰 锛堥粯璁� false 锛� + * @property {String} url toast娑堝け鍚庢槸鍚﹁烦杞〉闈紝鏈夊垯璺宠浆锛屼紭鍏堢骇楂樹簬back鍙傛暟 + * @property {Function} complete 鎵ц瀹屽悗鐨勫洖璋冨嚱鏁� + * @property {Boolean} back 缁撴潫toast鏄惁鑷姩杩斿洖涓婁竴椤� 锛堥粯璁� false 锛� + * @property {Object} customStyle 缁勪欢鐨勬牱寮忥紝瀵硅薄褰㈠紡 + * @event {Function} show 鏄剧ずtoast锛屽闇�涓�杩涘叆椤甸潰灏辨樉绀簍oast锛岃鍦╫nReady鐢熷懡鍛ㄦ湡璋冪敤 + * @example <u-toast ref="uToast" /> + */ + export default { + name: 'u-toast', + mixins: [uni.$u.mpMixin, uni.$u.mixin], + data() { + return { + isShow: false, + timer: null, // 瀹氭椂鍣� + config: { + message: '', // 鏄剧ず鏂囨湰 + type: '', // 涓婚绫诲瀷锛宲rimary锛宻uccess锛宔rror锛寃arning锛宐lack + duration: 2000, // 鏄剧ず鐨勬椂闂达紝姣 + icon: true, // 鏄剧ず鐨勫浘鏍� + position: 'center', // toast鍑虹幇鐨勪綅缃� + complete: null, // 鎵ц瀹屽悗鐨勫洖璋冨嚱鏁� + overlay: false, // 鏄惁闃叉瑙︽懜绌块�� + loading: false, // 鏄惁鍔犺浇涓姸鎬� + }, + tmpConfig: {}, // 灏嗙敤鎴烽厤缃拰鍐呯疆閰嶇疆鍚堝苟鍚庣殑涓存椂閰嶇疆鍙橀噺 + } + }, + computed: { + iconName() { + // 鍙湁涓嶄负none锛屽苟涓攖ype涓篹rror|warning|succes|info鏃跺�欙紝鎵嶆樉绀哄浘鏍� + if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') { + return ''; + } + if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) { + return uni.$u.type2icon(this.tmpConfig.type) + } else { + return '' + } + }, + overlayStyle() { + const style = { + justifyContent: 'center', + alignItems: 'center', + display: 'flex' + } + // 灏嗛伄缃╄缃负100%閫忔槑搴︼紝閬垮厤鍑虹幇鐏拌壊鑳屾櫙 + style.backgroundColor = 'rgba(0, 0, 0, 0)' + return style + }, + iconStyle() { + const style = {} + // 鍥炬爣闇�瑕佷竴涓彸杈硅窛锛屼互璺熷彸杈圭殑鏂囧瓧鏈夐殧寮�鐨勮窛绂� + style.marginRight = '4px' + // #ifdef APP-NVUE + // iOSAPP涓嬶紝鍥炬爣鏈�1px鐨勫悜涓嬪亸绉伙紝杩欓噷杩涜淇 + if (uni.$u.os() === 'ios') { + style.marginTop = '-1px' + } + // #endif + return style + }, + loadingIconColor() { + let color = 'rgb(255, 255, 255)' + if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) { + // loading-icon缁勪欢鍐呴儴浼氬color鍙傛暟杩涜涓�涓�忔槑搴﹀鐞嗭紝璇ユ柟娉曡姹備紶鍏ョ殑棰滆壊鍊� + // 蹇呴』涓簉gb鏍煎紡鐨勶紝鎵�浠ヨ繖閲屽仛涓�涓鐞� + color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type]) + } + return color + }, + // 鍐呭鐩掑瓙鐨勬牱寮� + contentStyle() { + const windowHeight = uni.$u.sys().windowHeight, style = {} + let value = 0 + // 鏍规嵁top鍜宐ottom锛屽Y杞磋繘琛岀獥浣撻珮搴︾殑鐧惧垎姣斿亸绉� + if(this.tmpConfig.position === 'top') { + value = - windowHeight * 0.25 + } else if(this.tmpConfig.position === 'bottom') { + value = windowHeight * 0.25 + } + style.transform = `translateY(${value}px)` + return style + } + }, + created() { + // 閫氳繃涓婚鐨勫舰寮忚皟鐢╰oast锛屾壒閲忕敓鎴愭柟娉曞嚱鏁� + ['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => { + this[item] = message => this.show({ + type: item, + message + }) + }) + }, + methods: { + // 鏄剧ずtoast缁勪欢锛岀敱鐖剁粍浠堕�氳繃this.$refs.xxx.show(options)褰㈠紡璋冪敤 + show(options) { + // 涓嶅皢缁撴灉鍚堝苟鍒皌his.config鍙橀噺锛岄伩鍏嶅娆¤皟鐢╱-toast锛屽墠鍚庣殑閰嶇疆閫犳垚娣蜂贡 + this.tmpConfig = uni.$u.deepMerge(this.config, options) + // 娓呴櫎瀹氭椂鍣� + this.clearTimer() + this.isShow = true + this.timer = setTimeout(() => { + // 鍊掕鏃剁粨鏉燂紝娓呴櫎瀹氭椂鍣紝闅愯棌toast缁勪欢 + this.clearTimer() + // 鍒ゆ柇鏄惁瀛樺湪callback鏂规硶锛屽鏋滃瓨鍦ㄥ氨鎵ц + typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete() + }, this.tmpConfig.duration) + }, + // 闅愯棌toast缁勪欢锛岀敱鐖剁粍浠堕�氳繃this.$refs.xxx.hide()褰㈠紡璋冪敤 + hide() { + this.clearTimer() + }, + clearTimer() { + this.isShow = false + // 娓呴櫎瀹氭椂鍣� + clearTimeout(this.timer) + this.timer = null + } + }, + beforeDestroy() { + this.clearTimer() + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + $u-toast-color:#fff !default; + $u-toast-border-radius:4px !default; + $u-toast-border-background-color:#585858 !default; + $u-toast-border-font-size:14px !default; + $u-toast-border-padding:12px 20px !default; + $u-toast-loading-border-padding: 20px 20px !default; + $u-toast-content-text-color:#fff !default; + $u-toast-content-text-font-size:15px !default; + $u-toast-u-icon:10rpx !default; + $u-toast-u-type-primary-color:$u-primary !default; + $u-toast-u-type-primary-background-color:#ecf5ff !default; + $u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default; + $u-toast-u-type-primary-border-width:1px !default; + $u-toast-u-type-success-color: $u-success !default; + $u-toast-u-type-success-background-color: #dbf1e1 !default; + $u-toast-u-type-success-border-color: #BEF5C8 !default; + $u-toast-u-type-success-border-width: 1px !default; + $u-toast-u-type-error-color:$u-error !default; + $u-toast-u-type-error-background-color:#fef0f0 !default; + $u-toast-u-type-error-border-color:#fde2e2 !default; + $u-toast-u-type-error-border-width: 1px !default; + $u-toast-u-type-warning-color:$u-warning !default; + $u-toast-u-type-warning-background-color:#fdf6ec !default; + $u-toast-u-type-warning-border-color:#faecd8 !default; + $u-toast-u-type-warning-border-width: 1px !default; + $u-toast-u-type-default-color:#fff !default; + $u-toast-u-type-default-background-color:#585858 !default; + + .u-toast { + &__content { + @include flex; + padding: $u-toast-border-padding; + border-radius: $u-toast-border-radius; + background-color: $u-toast-border-background-color; + color: $u-toast-color; + align-items: center; + /* #ifndef APP-NVUE */ + max-width: 600rpx; + /* #endif */ + position: relative; + + &--loading { + flex-direction: column; + padding: $u-toast-loading-border-padding; + } + + &__text { + color: $u-toast-content-text-color; + font-size: $u-toast-content-text-font-size; + line-height: $u-toast-content-text-font-size; + + &--default { + color: $u-toast-content-text-color; + } + + &--error { + color: $u-error; + } + + &--primary { + color: $u-primary; + } + + &--success { + color: $u-success; + } + + &--warning { + color: $u-warning; + } + } + } + } + + .u-type-primary { + color: $u-toast-u-type-primary-color; + background-color: $u-toast-u-type-primary-background-color; + border-color: $u-toast-u-type-primary-border-color; + border-width: $u-toast-u-type-primary-border-width; + } + + .u-type-success { + color: $u-toast-u-type-success-color; + background-color: $u-toast-u-type-success-background-color; + border-color: $u-toast-u-type-success-border-color; + border-width: 1px; + } + + .u-type-error { + color: $u-toast-u-type-error-color; + background-color: $u-toast-u-type-error-background-color; + border-color: $u-toast-u-type-error-border-color; + border-width: $u-toast-u-type-error-border-width; + } + + .u-type-warning { + color: $u-toast-u-type-warning-color; + background-color: $u-toast-u-type-warning-background-color; + border-color: $u-toast-u-type-warning-border-color; + border-width: 1px; + } + + .u-type-default { + color: $u-toast-u-type-default-color; + background-color: $u-toast-u-type-default-background-color; + } +</style> -- Gitblit v1.9.3