@gmcb/uv-ui 0.2.26

package/components/uv-tags/uv-tags.vue

@@ -0,0 +1,379 @@
+<template>
+	<uv-transition
+		mode="fade"
+		:show="show"
+		:cell-child="cellChild"
+	>
+		<view class="uv-tags-wrapper">
+			<view
+				class="uv-tags"
+				:class="[`uv-tags--${shape}`, !plain && `uv-tags--${type}`, plain && `uv-tags--${type}--plain`, `uv-tags--${size}`,`uv-tags--${size}--${closePlace}`, plain && plainFill && `uv-tags--${type}--plain--fill`]"
+				@tap.stop="clickHandler"
+				:style="[{
+					marginRight: closable&& closePlace=='right-top' ? '10px' : 0,
+					marginTop: closable && closePlace=='right-top' ? '10px' : 0,
+				}, style, $uv.addStyle(customStyle)]"
+			>
+				<slot name="icon">
+					<view
+						class="uv-tags__icon"
+						v-if="icon"
+					>
+						<image
+							v-if="$uv.test.image(icon)"
+							:src="icon"
+							:style="[imgStyle]"
+						></image>
+						<uv-icon
+							v-else
+							:color="elIconColor"
+							:name="icon"
+							:size="iconSize"
+						></uv-icon>
+					</view>
+				</slot>
+				<text
+					class="uv-tags__text"
+					:style="[textColor, textStyle]"
+					:class="[`uv-tags__text--${type}`, plain && `uv-tags__text--${type}--plain`, `uv-tags__text--${size}`]"
+				>{{ text }}</text>
+				<view
+					class="uv-tags__close"
+					:class="[`uv-tags__close--${size}`,`uv-tags__close--${closePlace}`]"
+					v-if="closable && closePlace=='right'"
+					@tap.stop="closeHandler"
+					:style="{backgroundColor: closeColor}"
+				>
+					<uv-icon
+						name="close"
+						:size="closeSize"
+						color="#ffffff"
+					></uv-icon>
+				</view>
+			</view>
+			<view
+				class="uv-tags__close"
+				:class="[`uv-tags__close--${size}`,`uv-tags__close--${closePlace}`]"
+				v-if="closable && closePlace=='right-top'"
+				@tap.stop="closeHandler"
+				:style="{backgroundColor: closeColor}"
+			>
+				<uv-icon
+					name="close"
+					:size="closeSize"
+					color="#ffffff"
+				></uv-icon>
+			</view>
+		</view>
+	</uv-transition>
+</template>
+
+<script>
+	import { image } from '../../libs/function/test.js'
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Tag 标签
+	 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+	 * @tutorial https://www.uvui.cn/components/tag.html
+	 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
+	 * @property {Boolean | String}	disabled	不可用（默认 false ）
+	 * @property {String}			size		标签的大小，large，medium，mini （默认 '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	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
+	 * @property {Boolean}			show		标签显示与否（默认 true ）
+	 * @property {String}			icon		内置图标，或绝对路径的图片
+	 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
+	 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
+	 * @example <uv-tags text="标签" type="error" plain plainFill></uv-tags>
+	 */
+	export default {
+		name: 'uv-tags',
+		emits: ['click','close'],
+		mixins: [mpMixin, mixin, props],
+		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';
+	@import '../../libs/css/color.scss';
+	.uv-tags-wrapper {
+		position: relative;
+	}
+
+	.uv-tags {
+		@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;
+			&--right {
+				padding-right: 2px;
+			}
+		}
+
+		&--medium {
+			height: 26px;
+			line-height: 22px;
+			padding: 0 10px;
+			&--right {
+				padding: 0 4px 0 8px;
+			}
+		}
+
+		&--large {
+			height: 32px;
+			line-height: 32px;
+			padding: 0 15px;
+			&--right {
+				padding: 0 4px 0 8px;
+			}
+		}
+
+		&--primary {
+			background-color: $uv-primary;
+			border-width: 1px;
+			border-color: $uv-primary;
+		}
+
+		&--primary--plain {
+			border-width: 1px;
+			border-color: $uv-primary;
+		}
+
+		&--primary--plain--fill {
+			background-color: #ecf5ff;
+		}
+
+		&__text--primary {
+			color: #FFFFFF;
+		}
+
+		&__text--primary--plain {
+			color: $uv-primary;
+		}
+
+		&--error {
+			background-color: $uv-error;
+			border-width: 1px;
+			border-color: $uv-error;
+		}
+
+		&--error--plain {
+			border-width: 1px;
+			border-color: $uv-error;
+		}
+
+		&--error--plain--fill {
+			background-color: #fef0f0;
+		}
+
+		&__text--error {
+			color: #FFFFFF;
+		}
+
+		&__text--error--plain {
+			color: $uv-error;
+		}
+
+		&--warning {
+			background-color: $uv-warning;
+			border-width: 1px;
+			border-color: $uv-warning;
+		}
+
+		&--warning--plain {
+			border-width: 1px;
+			border-color: $uv-warning;
+		}
+
+		&--warning--plain--fill {
+			background-color: #fdf6ec;
+		}
+
+		&__text--warning {
+			color: #FFFFFF;
+		}
+
+		&__text--warning--plain {
+			color: $uv-warning;
+		}
+
+		&--success {
+			background-color: $uv-success;
+			border-width: 1px;
+			border-color: $uv-success;
+		}
+
+		&--success--plain {
+			border-width: 1px;
+			border-color: $uv-success;
+		}
+
+		&--success--plain--fill {
+			background-color: #f5fff0;
+		}
+
+		&__text--success {
+			color: #FFFFFF;
+		}
+
+		&__text--success--plain {
+			color: $uv-success;
+		}
+
+		&--info {
+			background-color: $uv-info;
+			border-width: 1px;
+			border-color: $uv-info;
+		}
+
+		&--info--plain {
+			border-width: 1px;
+			border-color: $uv-info;
+		}
+
+		&--info--plain--fill {
+			background-color: #f4f4f5;
+		}
+
+		&__text--info {
+			color: #FFFFFF;
+		}
+
+		&__text--info--plain {
+			color: $uv-info;
+		}
+
+		&__close {
+			border-radius: 100px;
+			background-color: #C6C7CB;
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			transform: scale(0.6);
+			&--right-top {
+				position: absolute;
+				z-index: 1;
+				top: 10px;
+				right: 10px;
+				/* #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>

package/components/uv-text/props.js

@@ -0,0 +1,113 @@
+export default {
+	props: {
+		// 主题颜色
+		type: {
+			type: String,
+			default: ''
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 显示的值
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 前置图标
+		prefixIcon: {
+			type: String,
+			default: ''
+		},
+		// 后置图标
+		suffixIcon: {
+			type: String,
+			default: ''
+		},
+		// 文本处理的匹配模式
+		// text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+		mode: {
+			type: String,
+			default: ''
+		},
+		// mode=link下，配置的链接
+		href: {
+			type: String,
+			default: ''
+		},
+		// 格式化规则
+		format: {
+			type: [String, Function],
+			default: ''
+		},
+		// mode=phone时，点击文本是否拨打电话
+		call: {
+			type: Boolean,
+			default: true
+		},
+		// 小程序的打开方式
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 是否粗体，默认normal
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 是否块状
+		block: {
+			type: Boolean,
+			default: false
+		},
+		// 文本显示的行数，如果设置，超出此行数，将会显示省略号
+		lines: {
+			type: [String, Number],
+			default: ''
+		},
+		// 文本颜色
+		color: {
+			type: String,
+			default: '#303133'
+		},
+		// 字体大小
+		size: {
+			type: [String, Number],
+			default: 15
+		},
+		// 图标的样式
+		iconStyle: {
+			type: [Object, String],
+			default: () => ({
+				fontSize: '15px'
+			})
+		},
+		// 文字装饰，下划线，中划线等，可选值 none|underline|line-through
+		decoration: {
+			type: String,
+			default: 'none'
+		},
+		// 外边距，对象、字符串，数值形式均可
+		margin: {
+			type: [Object, String, Number],
+			default: 0
+		},
+		// 文本行高
+		lineHeight: {
+			type: [String, Number],
+			default: ''
+		},
+		// 文本对齐方式，可选值left|center|right
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 文字换行，可选值break-word|normal|anywhere
+		wordWrap: {
+			type: String,
+			default: 'normal'
+		},
+		...uni.$uv?.props?.text
+	}
+}

package/components/uv-text/uv-text.vue

@@ -0,0 +1,218 @@
+<template>
+    <view
+      class="uv-text"
+      :class="[]"
+      v-if="show"
+      :style="{
+        margin: margin,
+				justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'
+      }"
+      @tap="clickHandler"
+    >
+      <text
+        :class="['uv-text__price', type && `uv-text__value--${type}`]"
+        v-if="mode === 'price'"
+        :style="[valueStyle]"
+        >￥</text
+      >
+      <view class="uv-text__prefix-icon" v-if="prefixIcon">
+        <uv-icon
+          :name="prefixIcon"
+          :customStyle="$uv.addStyle(iconStyle)"
+        ></uv-icon>
+      </view>
+      <uv-link
+        v-if="mode === 'link'"
+        :text="value"
+        :href="href"
+        underLine
+      ></uv-link>
+      <template v-else-if="openType && isMp">
+        <button
+          class="uv-reset-button uv-text__value"
+          :style="[valueStyle]"
+          :openType="openType"
+          @getuserinfo="onGetUserInfo"
+          @contact="onContact"
+          @getphonenumber="onGetPhoneNumber"
+          @error="onError"
+          @launchapp="onLaunchApp"
+          @opensetting="onOpenSetting"
+          :lang="lang"
+          :session-from="sessionFrom"
+          :send-message-title="sendMessageTitle"
+          :send-message-path="sendMessagePath"
+          :send-message-img="sendMessageImg"
+          :show-message-card="showMessageCard"
+          :app-parameter="appParameter"
+        >
+          {{ value }}
+        </button>
+      </template>
+      <text
+        v-else
+        class="uv-text__value"
+        :style="[valueStyle]"
+        :class="[
+          type && `uv-text__value--${type}`,
+          lines && `uv-line-${lines}`
+        ]"
+        >{{ value }}</text
+      >
+      <view class="uv-text__suffix-icon" v-if="suffixIcon">
+        <uv-icon
+          :name="suffixIcon"
+          :customStyle="$uv.addStyle(iconStyle)"
+        ></uv-icon>
+      </view>
+    </view>
+</template>
+<script>
+	import value from './value.js'
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import button from '../../libs/mixin/button.js'
+	import openType from '../../libs/mixin/openType.js'
+	import props from './props.js'
+	/**
+	 * Text 文本
+	 * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+	 * @tutorial https://www.uvui.cn/components/loading.html
+	 * @property {String} 					type		主题颜色
+	 * @property {Boolean} 					show		是否显示（默认 true ）
+	 * @property {String | Number}			text		显示的值
+	 * @property {String}					prefixIcon	前置图标
+	 * @property {String} 					suffixIcon	后置图标
+	 * @property {String} 					mode		文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+	 * @property {String} 					href		mode=link下，配置的链接
+	 * @property {String | Function} 		format		格式化规则
+	 * @property {Boolean} 					call		mode=phone时，点击文本是否拨打电话（默认 false ）
+	 * @property {String} 					openType	小程序的打开方式
+	 * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
+	 * @property {Boolean} 					block		是否块状（默认 false ）
+	 * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
+	 * @property {String} 					color		文本颜色（默认 '#303133' ）
+	 * @property {String | Number} 			size		字体大小（默认 15 ）
+	 * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
+	 * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+	 * @property {Object | String | Number}	margin		外边距，对象、字符串，数值形式均可（默认 0 ）
+	 * @property {String | Number} 			lineHeight	文本行高
+	 * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+	 * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+	 * @event {Function} click  点击触发事件
+	 * @example <uv-text text="我用十年青春,赴你最后之约"></uv-text>
+	 */
+	export default {
+		name: 'uv-text',
+		emits: ['click'],
+		// #ifdef MP
+		mixins: [mpMixin, mixin, value, button, openType, props],
+		// #endif
+		// #ifndef MP
+		mixins: [mpMixin, mixin, value, props],
+		// #endif
+		computed: {
+			valueStyle() {
+				const style = {
+					textDecoration: this.decoration,
+					fontWeight: this.bold ? 'bold' : 'normal',
+					wordWrap: this.wordWrap,
+					fontSize: this.$uv.addUnit(this.size)
+				};
+				!this.type && (style.color = this.color);
+				this.isNvue && this.lines && (style.lines = this.lines);
+				if(this.isNvue && this.mode != 'price' && !this.prefixIcon && !this.suffixIcon) {
+					 style.flex = 1;
+					 style.textAlign = this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'right';
+				}
+				this.lineHeight && (style.lineHeight = this.$uv.addUnit(this.lineHeight));
+				!this.isNvue && this.block && (style.display = 'block');
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
+			},
+			isNvue() {
+				let nvue = false
+				// #ifdef APP-NVUE
+				nvue = true
+				// #endif
+				return nvue
+			},
+			isMp() {
+				let mp = false
+				// #ifdef MP
+				mp = true
+				// #endif
+				return mp
+			}
+		},
+		data() {
+			return {}
+		},
+		methods: {
+			clickHandler() {
+				// 如果为手机号模式，拨打电话
+				if (this.call && this.mode === 'phone') {
+					uni.makePhoneCall({
+						phoneNumber: this.text
+					})
+				}
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	$show-lines: 1;
+	$show-reset-button: 1;
+	@import '../../libs/css/variable.scss';
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	.uv-text {
+		@include flex(row);
+		align-items: center;
+		flex-wrap: nowrap;
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		&__price {
+			font-size: 14px;
+			color: $uv-content-color;
+		}
+		&__value {
+			font-size: 14px;
+			@include flex;
+			color: $uv-content-color;
+			flex-wrap: wrap;
+			// flex: 1;
+			text-overflow: ellipsis;
+			align-items: center;
+			&--primary {
+				color: $uv-primary;
+			}
+			&--warning {
+				color: $uv-warning;
+			}
+			&--success {
+				color: $uv-success;
+			}
+			&--info {
+				color: $uv-info;
+			}
+			&--error {
+				color: $uv-error;
+			}
+			&--main {
+				color: $uv-main-color;
+			}
+			&--content {
+				color: $uv-content-color;
+			}
+			&--tips {
+				color: $uv-tips-color;
+			}
+			&--light {
+				color: $uv-light-color;
+			}
+		}
+	}
+</style>