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-tag/u-tag.vue | 358 -----------------------------------------------------------
1 files changed, 0 insertions(+), 358 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-tag/u-tag.vue b/minipro_standard/uni_modules/uview-ui/components/u-tag/u-tag.vue
index 93a02db..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-tag/u-tag.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-tag/u-tag.vue
@@ -1,358 +0,0 @@
-<template>
- <u-transition
- mode="fade"
- :show="show"
- >
- <view class="u-tag-wrapper">
- <view
- class="u-tag"
- :class="[`u-tag--${shape}`, !plain && `u-tag--${type}`, plain && `u-tag--${type}--plain`, `u-tag--${size}`, plain && plainFill && `u-tag--${type}--plain--fill`]"
- @tap.stop="clickHandler"
- :style="[{
- marginRight: closable ? '10px' : 0,
- marginTop: closable ? '10px' : 0,
- }, style]"
- >
- <slot name="icon">
- <view
- class="u-tag__icon"
- v-if="icon"
- >
- <image
- v-if="$u.test.image(icon)"
- :src="icon"
- :style="[imgStyle]"
- ></image>
- <u-icon
- v-else
- :color="elIconColor"
- :name="icon"
- :size="iconSize"
- ></u-icon>
- </view>
- </slot>
- <text
- class="u-tag__text"
- :style="[textColor]"
- :class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
- >{{ text }}</text>
- </view>
- <view
- class="u-tag__close"
- :class="[`u-tag__close--${size}`]"
- v-if="closable"
- @tap.stop="closeHandler"
- :style="{backgroundColor: closeColor}"
- >
- <u-icon
- name="close"
- :size="closeSize"
- color="#ffffff"
- ></u-icon>
- </view>
- </view>
- </u-transition>
-</template>
-
-<script>
- import props from './props.js';
- /**
- * Tag 鏍囩
- * @description tag缁勪欢涓�鑸敤浜庢爣璁板拰閫夋嫨锛屾垜浠彁渚涗簡鏇村姞涓板瘜鐨勮〃鐜板舰寮忥紝鑳藉杈冨叏闈㈢殑娑电洊鎮ㄧ殑浣跨敤鍦烘櫙
- * @tutorial https://www.uviewui.com/components/tag.html
- * @property {String} type 鏍囩绫诲瀷info銆乸rimary銆乻uccess銆亀arning銆乪rror 锛堥粯璁� 'primary' 锛�
- * @property {Boolean | String} disabled 涓嶅彲鐢紙榛樿 false 锛�
- * @property {String} size 鏍囩鐨勫ぇ灏忥紝large锛宮edium锛宮ini 锛堥粯璁� 'medium' 锛�
- * @property {String} shape tag鐨勫舰鐘讹紝circle锛堜袱杈瑰崐鍦嗗舰锛�, square锛堟柟褰紝甯﹀渾瑙掞級锛堥粯璁� 'square' 锛�
- * @property {String | Number} text 鏍囩鐨勬枃瀛楀唴瀹�
- * @property {String} bgColor 鑳屾櫙棰滆壊锛岄粯璁や负绌哄瓧绗︿覆锛屽嵆涓嶅鐞�
- * @property {String} color 鏍囩瀛椾綋棰滆壊锛岄粯璁や负绌哄瓧绗︿覆锛屽嵆涓嶅鐞�
- * @property {String} borderColor 闀傜┖褰㈠紡鏍囩鐨勮竟妗嗛鑹�
- * @property {String} closeColor 鍏抽棴鎸夐挳鍥炬爣鐨勯鑹诧紙榛樿 #C6C7CB锛�
- * @property {String | Number} name 鐐瑰嚮鏃惰繑鍥炵殑绱㈠紩鍊硷紝鐢ㄤ簬鍖哄垎渚嬮亶鐨勬暟缁勫摢涓厓绱犺鐐瑰嚮浜�
- * @property {Boolean} plainFill 闀傜┖鏃舵槸鍚﹀～鍏呰儗鏅壊锛堥粯璁� false 锛�
- * @property {Boolean} plain 鏄惁闀傜┖锛堥粯璁� false 锛�
- * @property {Boolean} closable 鏄惁鍙叧闂紝璁剧疆涓簍rue锛屾枃瀛楀彸杈逛細鍑虹幇涓�涓叧闂浘鏍囷紙榛樿 false 锛�
- * @property {Boolean} show 鏍囩鏄剧ず涓庡惁锛堥粯璁� true 锛�
- * @property {String} icon 鍐呯疆鍥炬爣锛屾垨缁濆璺緞鐨勫浘鐗�
- * @event {Function(index)} click 鐐瑰嚮鏍囩鏃惰Е鍙� index: 浼犻�掔殑index鍙傛暟鍊�
- * @event {Function(index)} close closable涓簍rue鏃讹紝鐐瑰嚮鏍囩鍏抽棴鎸夐挳瑙﹀彂 index: 浼犻�掔殑index鍙傛暟鍊�
- * @example <u-tag text="鏍囩" type="error" plain plainFill></u-tag>
- */
- export default {
- name: 'u-tag',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- }
- },
- computed: {
- style() {
- const style = {}
- if (this.bgColor) {
- style.backgroundColor = this.bgColor
- }
- if (this.color) {
- style.color = this.color
- }
- if(this.borderColor) {
- style.borderColor = this.borderColor
- }
- return style
- },
- // nvue涓嬶紝鏂囨湰棰滆壊鏃犳硶缁ф壙鐖跺厓绱�
- textColor() {
- const style = {}
- if (this.color) {
- style.color = this.color
- }
- return style
- },
- imgStyle() {
- const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
- return {
- width,
- height: width
- }
- },
- // 鏂囨湰鐨勬牱寮�
- closeSize() {
- const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
- return size
- },
- // 鍥炬爣澶у皬
- iconSize() {
- const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
- return size
- },
- // 鍥炬爣棰滆壊
- elIconColor() {
- return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
- }
- },
- methods: {
- // 鐐瑰嚮鍏抽棴鎸夐挳
- closeHandler() {
- this.$emit('close', this.name)
- },
- // 鐐瑰嚮鏍囩
- clickHandler() {
- this.$emit('click', this.name)
- }
- }
- }
-</script>
-
-<style
- lang="scss"
- scoped
->
- @import "../../libs/css/components.scss";
-
- .u-tag-wrapper {
- position: relative;
- }
-
- .u-tag {
- @include flex;
- align-items: center;
- border-style: solid;
-
- &--circle {
- border-radius: 100px;
- }
-
- &--square {
- border-radius: 3px;
- }
-
- &__icon {
- margin-right: 4px;
- }
-
- &__text {
- &--mini {
- font-size: 12px;
- line-height: 12px;
- }
-
- &--medium {
- font-size: 13px;
- line-height: 13px;
- }
-
- &--large {
- font-size: 15px;
- line-height: 15px;
- }
- }
-
- &--mini {
- height: 22px;
- line-height: 22px;
- padding: 0 5px;
- }
-
- &--medium {
- height: 26px;
- line-height: 22px;
- padding: 0 10px;
- }
-
- &--large {
- height: 32px;
- line-height: 32px;
- padding: 0 15px;
- }
-
- &--primary {
- background-color: $u-primary;
- border-width: 1px;
- border-color: $u-primary;
- }
-
- &--primary--plain {
- border-width: 1px;
- border-color: $u-primary;
- }
-
- &--primary--plain--fill {
- background-color: #ecf5ff;
- }
-
- &__text--primary {
- color: #FFFFFF;
- }
-
- &__text--primary--plain {
- color: $u-primary;
- }
-
- &--error {
- background-color: $u-error;
- border-width: 1px;
- border-color: $u-error;
- }
-
- &--error--plain {
- border-width: 1px;
- border-color: $u-error;
- }
-
- &--error--plain--fill {
- background-color: #fef0f0;
- }
-
- &__text--error {
- color: #FFFFFF;
- }
-
- &__text--error--plain {
- color: $u-error;
- }
-
- &--warning {
- background-color: $u-warning;
- border-width: 1px;
- border-color: $u-warning;
- }
-
- &--warning--plain {
- border-width: 1px;
- border-color: $u-warning;
- }
-
- &--warning--plain--fill {
- background-color: #fdf6ec;
- }
-
- &__text--warning {
- color: #FFFFFF;
- }
-
- &__text--warning--plain {
- color: $u-warning;
- }
-
- &--success {
- background-color: $u-success;
- border-width: 1px;
- border-color: $u-success;
- }
-
- &--success--plain {
- border-width: 1px;
- border-color: $u-success;
- }
-
- &--success--plain--fill {
- background-color: #f5fff0;
- }
-
- &__text--success {
- color: #FFFFFF;
- }
-
- &__text--success--plain {
- color: $u-success;
- }
-
- &--info {
- background-color: $u-info;
- border-width: 1px;
- border-color: $u-info;
- }
-
- &--info--plain {
- border-width: 1px;
- border-color: $u-info;
- }
-
- &--info--plain--fill {
- background-color: #f4f4f5;
- }
-
- &__text--info {
- color: #FFFFFF;
- }
-
- &__text--info--plain {
- color: $u-info;
- }
-
- &__close {
- position: absolute;
- z-index: 999;
- top: 10px;
- right: 10px;
- border-radius: 100px;
- background-color: #C6C7CB;
- @include flex(row);
- align-items: center;
- justify-content: center;
- /* #ifndef APP-NVUE */
- transform: scale(0.6) translate(80%, -80%);
- /* #endif */
- /* #ifdef APP-NVUE */
- transform: scale(0.6) translate(50%, -50%);
- /* #endif */
-
- &--mini {
- width: 18px;
- height: 18px;
- }
-
- &--medium {
- width: 22px;
- height: 22px;
- }
-
- &--large {
- width: 25px;
- height: 25px;
- }
- }
-
- }
-</style>
--
Gitblit v1.9.3