uview-ui-wjf 1.0.0

package/components/u-line/u-line.vue

@@ -0,0 +1,62 @@
+<template>
+	<view
+	    class="u-line"
+	    :style="[lineStyle]"
+	>
+
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial https://www.uviewui.com/components/line.html
+	 * @property {String}			color		线条的颜色 ( 默认 '#d6d7d9' )
+	 * @property {String | Number}	length		长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
+	 * @property {String}			direction	线条的方向，row-横向，col-竖向 (默认 'row' )
+	 * @property {Boolean}			hairline	是否显示细线条 (默认 true )
+	 * @property {String | Number}	margin		线条与上下左右元素的间距，字符串形式，如"30px"  (默认 0 )
+	 * @property {Boolean}			dashed		是否虚线，true-虚线，false-实线 (默认 false )
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <u-line color="red"></u-line>
+	 */
+	export default {
+		name: 'u-line',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		computed: {
+			lineStyle() {
+				const style = {}
+				style.margin = this.margin
+				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+				if (this.direction === 'row') {
+					// 此处采用兼容分开写，兼容nvue的写法
+					style.borderBottomWidth = '1px'
+					style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
+					style.width = uni.$u.addUnit(this.length)
+					if (this.hairline) style.transform = 'scaleY(0.5)'
+				} else {
+					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+					style.borderLeftWidth = '1px'
+					style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
+					style.height = uni.$u.addUnit(this.length)
+					if (this.hairline) style.transform = 'scaleX(0.5)'
+				}
+
+				style.borderColor = this.color
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-line {
+		/* #ifndef APP-NVUE */
+		vertical-align: middle;
+		/* #endif */
+	}
+</style>

package/components/u-line-progress/props.js

@@ -0,0 +1,28 @@
+export default {
+    props: {
+        // 激活部分的颜色
+        activeColor: {
+            type: String,
+            default: uni.$u.props.lineProgress.activeColor
+        },
+        inactiveColor: {
+            type: String,
+            default: uni.$u.props.lineProgress.color
+        },
+        // 进度百分比，数值
+        percentage: {
+            type: [String, Number],
+            default: uni.$u.props.lineProgress.inactiveColor
+        },
+        // 是否在进度条内部显示百分比的值
+        showText: {
+            type: Boolean,
+            default: uni.$u.props.lineProgress.showText
+        },
+        // 进度条的高度，单位px
+        height: {
+            type: [String, Number],
+            default: uni.$u.props.lineProgress.height
+        }
+    }
+}

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

@@ -0,0 +1,144 @@
+<template>
+	<view
+	    class="u-line-progress"
+	    :style="[$u.addStyle(customStyle)]"
+	>
+		<view
+		    class="u-line-progress__background"
+		    ref="u-line-progress__background"
+		    :style="[{
+				backgroundColor: inactiveColor,
+				height: $u.addUnit(height),
+			}]"
+		>
+		</view>
+		<view
+		    class="u-line-progress__line"
+		    :style="[progressStyle]"
+		> 
+			<slot>
+				<text v-if="showText && percentage >= 10" class="u-line-progress__text">{{innserPercentage + '%'}}</text>
+			</slot> 
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uviewui.com/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 <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+	 */
+	export default {
+		name: "u-line-progress",
+		mixins: [uni.$u.mpMixin, uni.$u.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 = uni.$u.addUnit(this.height)
+				return style
+			},
+			innserPercentage() {
+				// 控制范围在0-100之间
+				return uni.$u.range(0, 100, this.percentage)
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				uni.$u.sleep(20).then(() => {
+					this.resizeProgressWidth()
+				})
+			},
+			getProgressWidth() {
+				// #ifndef APP-NVUE
+				return this.$uGetRect('.u-line-progress__background')
+				// #endif
+
+				// #ifdef APP-NVUE
+				// 返回一个promise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs['u-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";
+
+	.u-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/u-link/props.js

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

package/components/u-link/u-link.vue

@@ -0,0 +1,83 @@
+<template>
+	<text
+	    class="u-link"
+	    @tap.stop="openLink"
+	    :style="[linkStyle, $u.addStyle(customStyle)]"
+	>{{text}}</text>
+</template>
+
+<script>
+	import props from './props.js';
+
+	/**
+	 * link 超链接
+	 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @tutorial https://www.uviewui.com/components/link.html
+	 * @property {String}			color		文字颜色 （默认 color['u-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 <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
+	 */
+	export default {
+		name: "u-link",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		computed: {
+			linkStyle() {
+				const style = {
+					color: this.color,
+					fontSize: uni.$u.addUnit(this.fontSize),
+					// line-height设置为比字体大小多2px
+					lineHeight: uni.$u.addUnit(uni.$u.getPx(this.fontSize) + 2),
+					textDecoration: this.underLine ? 'underline' : 'none'
+				}
+				// if (this.underLine) {
+				// 	style.borderBottomColor = this.lineColor || this.color
+				// 	style.borderBottomWidth = '1px'
+				// }
+				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(() => {
+							uni.$u.toast(this.mpTips);
+						})
+					}
+				});
+				// #endif
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$u-link-line-height:1 !default;
+
+	.u-link {
+		/* #ifndef APP-NVUE */
+		line-height: $u-link-line-height;
+		/* #endif */
+		@include flex;
+		flex-wrap: wrap;
+		flex: 1;
+	}
+</style>

package/components/u-list/props.js

@@ -0,0 +1,76 @@
+export default {
+    props: {
+        // 控制是否出现滚动条，仅nvue有效
+        showScrollbar: {
+            type: Boolean,
+            default: uni.$u.props.list.showScrollbar
+        },
+        // 距底部多少时触发scrolltolower事件
+        lowerThreshold: {
+            type: [String, Number],
+            default: uni.$u.props.list.lowerThreshold
+        },
+        // 距顶部多少时触发scrolltoupper事件，非nvue有效
+        upperThreshold: {
+            type: [String, Number],
+            default: uni.$u.props.list.upperThreshold
+        },
+        // 设置竖向滚动条位置
+        scrollTop: {
+            type: [String, Number],
+            default: uni.$u.props.list.scrollTop
+        },
+        // 控制 onscroll 事件触发的频率，仅nvue有效
+        offsetAccuracy: {
+            type: [String, Number],
+            default: uni.$u.props.list.offsetAccuracy
+        },
+        // 启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效
+        enableFlex: {
+            type: Boolean,
+            default: uni.$u.props.list.enableFlex
+        },
+        // 是否按分页模式显示List，默认值false
+        pagingEnabled: {
+            type: Boolean,
+            default: uni.$u.props.list.pagingEnabled
+        },
+        // 是否允许List滚动
+        scrollable: {
+            type: Boolean,
+            default: uni.$u.props.list.scrollable
+        },
+        // 值应为某子元素id（id不能以数字开头）
+        scrollIntoView: {
+            type: String,
+            default: uni.$u.props.list.scrollIntoView
+        },
+        // 在设置滚动条位置时使用动画过渡
+        scrollWithAnimation: {
+            type: Boolean,
+            default: uni.$u.props.list.scrollWithAnimation
+        },
+        // iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效
+        enableBackToTop: {
+            type: Boolean,
+            default: uni.$u.props.list.enableBackToTop
+        },
+        // 列表的高度
+        height: {
+            type: [String, Number],
+            default: uni.$u.props.list.height
+        },
+        // 列表宽度
+        width: {
+            type: [String, Number],
+            default: uni.$u.props.list.width
+        },
+        // 列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度
+        preLoadScreen: {
+            type: [String, Number],
+            default: uni.$u.props.list.preLoadScreen
+        }
+        // vue下，是否开启虚拟列表
+
+    }
+}

package/components/u-list/u-list.vue

@@ -0,0 +1,157 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<list
+		class="u-list"
+		:enableBackToTop="enableBackToTop"
+		:loadmoreoffset="lowerThreshold"
+		:showScrollbar="showScrollbar"
+		:style="[listStyle]"
+		:offset-accuracy="Number(offsetAccuracy)"
+		@scroll="onScroll"
+		@loadmore="scrolltolower"
+	>
+		<slot />
+	</list>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<scroll-view
+		class="u-list"
+		:scroll-into-view="scrollIntoView"
+		:style="[listStyle]"
+		scroll-y
+		:scroll-top="Number(scrollTop)"
+		:lower-threshold="Number(lowerThreshold)"
+		:upper-threshold="Number(upperThreshold)"
+		:show-scrollbar="showScrollbar"
+		:enable-back-to-top="enableBackToTop"
+		:scroll-with-animation="scrollWithAnimation"
+		@scroll="onScroll"
+		@scrolltolower="scrolltolower"
+		@scrolltoupper="scrolltoupper"
+	>
+		<view>
+			<slot />
+		</view>
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * List 列表
+	 * @description 该组件为高性能列表组件
+	 * @tutorial https://www.uviewui.com/components/list.html
+	 * @property {Boolean}			showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
+	 * @property {String ｜ Number}	lowerThreshold		距底部多少时触发scrolltolower事件 （默认 50 ）
+	 * @property {String ｜ Number}	upperThreshold		距顶部多少时触发scrolltoupper事件，非nvue有效 （默认 0 ）
+	 * @property {String ｜ Number}	scrollTop			设置竖向滚动条位置（默认 0 ）
+	 * @property {String ｜ Number}	offsetAccuracy		控制 onscroll 事件触发的频率，仅nvue有效（默认 10 ）
+	 * @property {Boolean}			enableFlex			启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效（默认 false ）
+	 * @property {Boolean}			pagingEnabled		是否按分页模式显示List，（默认 false ）
+	 * @property {Boolean}			scrollable			是否允许List滚动（默认 true ）
+	 * @property {String}			scrollIntoView		值应为某子元素id（id不能以数字开头）
+	 * @property {Boolean}			scrollWithAnimation	在设置滚动条位置时使用动画过渡 （默认 false ）
+	 * @property {Boolean}			enableBackToTop		iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 （默认 false ）
+	 * @property {String ｜ Number}	height				列表的高度 （默认 0 ）
+	 * @property {String ｜ Number}	width				列表宽度 （默认 0 ）
+	 * @property {String ｜ Number}	preLoadScreen		列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度  （默认 1 ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 *
+	 * @example <u-list @scrolltolower="scrolltolower"></u-list>
+	 */
+	export default {
+		name: 'u-list',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		watch: {
+			scrollIntoView(n) {
+				this.scrollIntoViewById(n)
+			}
+		},
+		data() {
+			return {
+				// 记录内部滚动的距离
+				innerScrollTop: 0,
+				// vue下，scroll-view在上拉加载时的偏移值
+				offset: 0,
+				sys: uni.$u.sys()
+			}
+		},
+		computed: {
+			listStyle() {
+				const style = {},
+					addUnit = uni.$u.addUnit
+				if (this.width != 0) style.width = addUnit(this.width)
+				if (this.height != 0) style.height = addUnit(this.height)
+				// 如果没有定义列表高度，则默认使用屏幕高度
+				if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px')
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+			}
+		},
+		provide() {
+			return {
+				uList: this
+			}
+		},
+		created() {
+			this.refs = []
+			this.children = []
+			this.anchors = []
+		},
+		mounted() {},
+		methods: {
+			updateOffsetFromChild(top) {
+				this.offset = top
+			},
+			onScroll(e) {
+				let scrollTop = 0
+				// #ifdef APP-NVUE
+				scrollTop = e.contentOffset.y
+				// #endif
+				// #ifndef APP-NVUE
+				scrollTop = e.detail.scrollTop
+				// #endif
+				this.innerScrollTop = scrollTop
+				this.$emit('scroll', Math.abs(scrollTop))
+			},
+			scrollIntoViewById(id) {
+				// #ifdef APP-NVUE
+				// 根据id参数，找到所有u-list-item中匹配的节点，再通过dom模块滚动到对应的位置
+				const item = this.refs.find(item => item.$refs[id] ? true : false)
+				dom.scrollToElement(item.$refs[id], {
+					// 是否需要滚动动画
+					animated: this.scrollWithAnimation
+				})
+				// #endif
+			},
+			// 滚动到底部触发事件
+			scrolltolower(e) {
+				uni.$u.sleep(30).then(() => {
+					this.$emit('scrolltolower')
+				})
+			},
+			// #ifndef APP-NVUE
+			// 滚动到底部时触发，非nvue有效
+			scrolltoupper(e) {
+				uni.$u.sleep(30).then(() => {
+					this.$emit('scrolltoupper')
+					// 这一句很重要，能绝对保证在性功能障碍的webview，滚动条到顶时，取消偏移值，让页面置顶
+					this.offset = 0
+				})
+			}
+			// #endif
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-list {
+		@include flex(column);
+
+	}
+</style>

package/components/u-list-item/props.js

@@ -0,0 +1,9 @@
+export default {
+    props: {
+        // 用于滚动到指定item
+        anchor: {
+            type: [String, Number],
+            default: uni.$u.props.listItem.anchor
+        }
+    }
+}