From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-toast/u-toast.vue | 291 ----------------------------------------------------------
1 files changed, 0 insertions(+), 291 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-toast/u-toast.vue b/minipro_standard/uni_modules/uview-ui/components/u-toast/u-toast.vue
index f194830..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-toast/u-toast.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-toast/u-toast.vue
@@ -1,291 +0,0 @@
-<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