@gmcb/uv-ui 0.2.26

package/components/uv-line-progress/uv-line-progress.vue

@@ -0,0 +1,146 @@
+<template>
+	<view
+	    class="uv-line-progress"
+	    :style="[$uv.addStyle(customStyle)]"
+	>
+		<view
+		    class="uv-line-progress__background"
+		    ref="uv-line-progress__background"
+		    :style="[{
+				backgroundColor: inactiveColor,
+				height: $uv.addUnit($uv.getPx(height))
+			}]"
+		>
+		</view>
+		<view
+		    class="uv-line-progress__line"
+		    :style="[progressStyle]"
+		> 
+			<slot>
+				<text v-if="showText && percentage >= 10" class="uv-line-progress__text">{{innserPercentage + '%'}}</text>
+			</slot> 
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uvui.cn/components/lineProgress.html
+	 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
+	 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
+	 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
+	 * @property {Boolean}			showText		是否在进度条内部显示百分比的值 ( 默认 true )
+	 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
+	 * 
+	 * @example <uv-line-progress :percent="70" :show-percent="true"></uv-line-progress>
+	 */
+	export default {
+		name: "uv-line-progress",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				lineWidth: 0,
+			}
+		},
+		watch: {
+			percentage(n) {
+				this.resizeProgressWidth()
+			}
+		},
+		computed: {
+			progressStyle() { 
+				let style = {}
+				style.width = this.lineWidth
+				style.backgroundColor = this.activeColor
+				style.height = this.$uv.addUnit(this.$uv.getPx(this.height))
+				return style
+			},
+			innserPercentage() {
+				// 控制范围在0-100之间
+				return this.$uv.range(0, 100, this.percentage)
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.$uv.sleep(20).then(() => {
+					this.resizeProgressWidth()
+				})
+			},
+			getProgressWidth() {
+				// #ifndef APP-NVUE
+				return this.$uvGetRect('.uv-line-progress__background')
+				// #endif
+
+				// #ifdef APP-NVUE
+				// 返回一个promise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs['uv-line-progress__background'], (res) => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			resizeProgressWidth() {
+				this.getProgressWidth().then(size => {
+					const {
+						width
+					} = size
+					// 通过设置的percentage值，计算其所占总长度的百分比
+					this.lineWidth = width * this.innserPercentage / 100 + 'px'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.uv-line-progress {
+		align-items: stretch;
+		position: relative;
+		@include flex(row);
+		flex: 1;
+		overflow: hidden;
+		border-radius: 100px;
+
+		&__background {
+			background-color: #ececec;
+			border-radius: 100px;
+			flex: 1;
+		}
+
+		&__line {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			align-items: center;
+			@include flex(row);
+			color: #ffffff;
+			border-radius: 100px;
+			transition: width 0.5s ease;
+			justify-content: flex-end;
+		}
+
+		&__text {
+			font-size: 10px;
+			align-items: center;
+			text-align: right;
+			color: #FFFFFF;
+			margin-right: 5px;
+			transform: scale(0.9);
+		}
+	}
+</style>

package/components/uv-link/props.js

@@ -0,0 +1,40 @@
+export default {
+	props: {
+		// 文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 字体大小，单位px
+		fontSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 是否显示下划线
+		underLine: {
+			type: Boolean,
+			default: false
+		},
+		// 要跳转的链接
+		href: {
+			type: String,
+			default: ''
+		},
+		// 小程序中复制到粘贴板的提示语
+		mpTips: {
+			type: String,
+			default: '链接已复制，请在浏览器打开'
+		},
+		// 下划线颜色
+		lineColor: {
+			type: String,
+			default: ''
+		},
+		// 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色
+		text: {
+			type: String,
+			default: ''
+		},
+		...uni.$uv?.props?.link
+	}
+}

package/components/uv-link/uv-link.vue

@@ -0,0 +1,83 @@
+<template>
+	<text
+	    class="uv-link"
+	    @tap.stop="openLink"
+	    :style="[linkStyle, $uv.addStyle(customStyle)]"
+	>{{text}}</text>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * link 超链接
+	 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @tutorial https://www.uvui.cn/components/link.html
+	 * @property {String}			color		文字颜色 （默认 color['uv-primary'] ）
+	 * @property {String ｜ Number}	fontSize	字体大小，单位px （默认 15 ）
+	 * @property {Boolean}			underLine	是否显示下划线 （默认 false ）
+	 * @property {String}			href		跳转的链接，要带上http(s)
+	 * @property {String}			mpTips		各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+	 * @property {String}			lineColor	下划线颜色，默认同color参数颜色 
+	 * @property {String}			text		超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @example <uv-link href="http://www.uvui.cn">蜀道难，难于上青天</uv-link>
+	 */
+	export default {
+		name: "uv-link",
+		emits:['click'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			linkStyle() {
+				const style = {
+					color: this.color,
+					fontSize: this.$uv.addUnit(this.fontSize),
+					// line-height设置为比字体大小多2px
+					lineHeight: this.$uv.addUnit(this.$uv.getPx(this.fontSize) + 2),
+					textDecoration: this.underLine ? 'underline' : 'none'
+				}
+				return style
+			}
+		},
+		methods: {
+			openLink() {
+				// #ifdef APP-PLUS
+				plus.runtime.openURL(this.href)
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href,
+					success: () => {
+						uni.hideToast();
+						this.$nextTick(() => {
+							this.$uv.toast(this.mpTips);
+						})
+					}
+				});
+				// #endif
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-link-line-height:1 !default;
+
+	.uv-link {
+		/* #ifndef APP-NVUE */
+		line-height: $uv-link-line-height;
+		/* #endif */
+		@include flex;
+		flex-wrap: wrap;
+		flex: 1;
+		color: $uv-primary;
+	}
+</style>

package/components/uv-list/uv-list.vue

@@ -0,0 +1,147 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view 
+		class="uv-list"
+		:style="[$uv.addStyle(customStyle)]"
+	>
+		<view 
+			v-if="border" 
+			class="uv-list--border-top"
+			:style="[{ 'background-color': borderColor }]"
+		></view>
+		<slot />
+		<view 
+			v-if="border" 
+			class="uv-list--border-bottom"
+			:style="[{ 'background-color': borderColor }]"
+		></view>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<list 
+		:bounce="true" 
+		:scrollable="true" 
+		show-scrollbar 
+		:render-reverse="false" 
+		class="uv-list" 
+		:class="{ 'uv-list--border': border }"
+		:style="[
+			{ 'border-top-color': borderColor, 'border-bottom-color':borderColor  },
+			$uv.addStyle(customStyle)
+		]"
+		:enableBackToTop="false"
+		:loadmoreoffset="15"
+		@scroll="scroll"
+		@loadmore="loadMore">
+		<slot />
+	</list>
+	<!-- #endif -->
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	/**
+	 * List 列表
+	 * @description 列表组件
+	 * @tutorial https://www.uvui.cn/components/list.html
+	 * @property {Boolean} border = [true|false] 是否显示边框
+	 * @property {String} borderColor 边框颜色
+	 * @property {String} direction 排版方向，默认row，列表里面使用其他组件  最好设置成column
+	 */
+	export default {
+		name: 'uv-list',
+		mixins: [mpMixin, mixin],
+		'mp-weixin': {
+			options: {
+				multipleSlots: false
+			}
+		},
+		props: {
+			border: {
+				type: Boolean,
+				default: false
+			},
+			borderColor: {
+				type: String,
+				default: '#dadbde'
+			},
+			// 排版方向，默认row，列表里面使用其他组件  最好设置成column
+			direction: {
+				type: String,
+				default: 'row'
+			},
+			// 内边距
+			padding: {
+				type: [String,Number],
+				default: '20rpx 30rpx'
+			}
+		},
+		created() {
+			this.firstChildAppend = false;
+		},
+		computed: {
+			parentData() {
+				return [this.direction,this.padding];
+			}
+		},
+		methods: {
+			loadMore(e) {
+				this.$emit('scrolltolower');
+			},
+			scroll(e) {
+				this.$emit('scroll', e);
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	
+	.uv-list {
+		position: relative;
+		@include flex(column);
+		background-color: #fff;
+	}
+
+	.uv-list--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-top-color: $uv-border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		border-bottom-color: $uv-border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 0.5px;
+		/* #endif */
+		z-index: -1;
+	}
+
+	/* #ifndef APP-NVUE */
+
+	.uv-list--border-top {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $uv-border-color;
+		z-index: 1;
+	}
+
+	.uv-list--border-bottom {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		height: 1px;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		background-color: $uv-border-color;
+	}
+
+	/* #endif */
+</style>