create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-row/u-row.vue

@@ -0,0 +1,96 @@
+<template>
+	<view
+	    class="u-row"
+		ref="u-row"
+	    :style="[rowStyle]"
+	    @tap="clickHandler"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge, sleep } from '../../libs/function/index';
+	/**
+	 * Row 栅格系统中的行
+	 * @description 通过基础的 12 分栏，迅速简便地创建布局 
+	 * @tutorial https://ijry.github.io/uview-plus/components/layout.html
+	 * @property {String | Number}	gutter		栅格间隔，左右各为此值的一半，单位px  (默认 0 )
+	 * @property {String}			justify		水平排列方式(微信小程序暂不支持) 可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)  (默认 'start' )
+	 * @property {String}			align		垂直排列方式 (默认 'center' )
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} click row被点击
+	 * @example <u-row justify="space-between" customStyle="margin-bottom: 10px"></u-row>
+	 */
+	export default {
+		name: "u-row",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify
+				else return this.justify
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start'
+				if (this.align == 'bottom') return 'flex-end'
+				else return this.align
+			},
+			rowStyle() {
+				const style = {
+					alignItems: this.uAlignItem,
+					justifyContent: this.uJustify
+				}
+				// 通过给u-row左右两边的负外边距，消除u-col在有gutter时，第一个和最后一个元素的左内边距和右内边距造成的影响
+				if(this.gutter) {
+					style.marginLeft = addUnit(-Number(this.gutter)/2)
+					style.marginRight = addUnit(-Number(this.gutter)/2)
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		emits: ["click"],
+		methods: {
+			clickHandler(e) {
+				this.$emit('click')
+			},
+			async getComponentWidth() {
+				// 延时一定时间，以确保节点渲染完成
+				await sleep()
+				return new Promise(resolve => {
+					// uView封装的获取节点的方法，详见文档
+					// #ifndef APP-NVUE
+					this.$uGetRect('.u-row').then(res => {
+						resolve(res.width)
+					})
+					// #endif
+					// #ifdef APP-NVUE
+					// nvue的dom模块用于获取节点
+					dom.getComponentRect(this.$refs['u-row'], (res) => {
+						resolve(res.size.width)
+					})
+					// #endif
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+	.u-row {
+		@include flex;
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-row-notice/props.js

@@ -0,0 +1,41 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 显示的内容，字符串
+        text: {
+            type: String,
+            default: () => defProps.rowNotice.text
+        },
+        // 是否显示左侧的音量图标
+        icon: {
+            type: String,
+            default: () => defProps.rowNotice.icon
+        },
+        // 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+        mode: {
+            type: String,
+            default: () => defProps.rowNotice.mode
+        },
+        // 文字颜色，各图标也会使用文字颜色
+        color: {
+            type: String,
+            default: () => defProps.rowNotice.color
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.rowNotice.bgColor
+        },
+        // 字体大小，单位px
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.rowNotice.fontSize
+        },
+        // 水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度
+        speed: {
+            type: [String, Number],
+            default: () => defProps.rowNotice.speed
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-row-notice/rowNotice.js

@@ -0,0 +1,21 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:19:13
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/rowNotice.js
+ */
+export default {
+    // rowNotice
+    rowNotice: {
+        text: '',
+        icon: 'volume',
+        mode: '',
+        color: '#f9ae3d',
+        bgColor: '#fdf6ec',
+        fontSize: 14,
+        speed: 80
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-row-notice/u-row-notice.vue

@@ -0,0 +1,336 @@
+<template>
+	<view
+		class="u-notice"
+		@tap="clickHandler"
+	>
+		<slot name="icon">
+			<view
+				class="u-notice__left-icon"
+				v-if="icon"
+			>
+				<u-icon
+					:name="icon"
+					:color="color"
+					size="19"
+				></u-icon>
+			</view>
+		</slot>
+		<view
+			class="u-notice__content"
+			ref="u-notice__content"
+		>
+			<view
+				ref="u-notice__content__text"
+				class="u-notice__content__text"
+				:style="[animationStyle]"
+			>
+				<text
+					v-for="(item, index) in innerText"
+					:key="index"
+					:style="[textStyle]"
+				>{{item}}</text>
+			</view>
+		</view>
+		<view
+			class="u-notice__right-icon"
+			v-if="['link', 'closable'].includes(mode)"
+		>
+			<u-icon
+				v-if="mode === 'link'"
+				name="arrow-right"
+				:size="17"
+				:color="color"
+			></u-icon>
+			<u-icon
+				v-if="mode === 'closable'"
+				@click="close"
+				name="close"
+				:size="16"
+				:color="color"
+			></u-icon>
+		</view>
+	</view>
+</template>
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, error, sleep, getPx } from '../../libs/function/index';
+	import test from '../../libs/function/test';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * RowNotice 滚动通知中的水平滚动模式
+	 * @description 水平滚动
+	 * @tutorial https://ijry.github.io/uview-plus/components/noticeBar.html
+	 * @property {String | Number}	text			显示的内容，字符串
+	 * @property {String}			icon			是否显示左侧的音量图标 (默认 'volume' )
+	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 (默认 '#f9ae3d' )
+	 * @property {String}			bgColor			背景颜色 (默认 ''#fdf6ec' )
+	 * @property {String | Number}	fontSize		字体大小，单位px (默认 14 )
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度  (默认 80 )
+	 * 
+	 * @event {Function} click 点击通告文字触发
+	 * @event {Function} close 点击右侧关闭图标触发
+	 * @example 
+	 */
+	export default {
+		name: 'u-row-notice',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				animationDuration: '0', // 动画执行时间
+				animationPlayState: 'paused', // 动画的开始和结束执行
+				// nvue下，内容发生变化，导致滚动宽度也变化，需要标志为是否需要重新计算宽度
+				// 不能在内容变化时直接重新计算，因为nvue的animation模块上一次的滚动不是刚好结束，会有影响
+				nvueInit: true,
+				show: true
+			};
+		},
+		watch: {
+			text: {
+				immediate: true,
+				handler(newValue, oldValue) {
+					// #ifdef APP-NVUE
+					this.nvueInit = true
+					// #endif
+					// #ifndef APP-NVUE
+					this.vue()
+					// #endif
+					
+					if(!test.string(newValue)) {
+						error('noticebar组件direction为row时，要求text参数为字符串形式')
+					}
+				}
+			},
+			fontSize() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			},
+			speed() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			}
+		},
+		computed: {
+			// 文字内容的样式
+			textStyle() {
+				let style = {}
+				style.whiteSpace = 'nowrap !important'
+				style.color = this.color
+				style.fontSize = addUnit(this.fontSize)
+				return style
+			},
+			animationStyle() {
+				let style = {}
+				style.animationDuration = this.animationDuration
+				style.animationPlayState = this.animationPlayState
+				return style
+			},
+			// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
+			// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
+			innerText() {
+				let result = [],
+					// 每组text标签的字符长度
+					len = 20
+				const textArr = this.text.split('')
+				for (let i = 0; i < textArr.length; i += len) {
+					// 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
+					result.push(textArr.slice(i, i + len).join(''))
+				}
+				return result
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			// 在APP上(含nvue)，监听当前webview是否处于隐藏状态(进入下一页时即为hide状态)
+			// 如果webivew隐藏了，为了节省性能的损耗，应停止动画的执行，同时也是为了保持进入下一页返回后，滚动位置保持不变
+			var pages = getCurrentPages()
+			var page = pages[pages.length - 1]
+			var currentWebview = page.$getAppWebview()
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+
+			this.init()
+		},
+		emits: ["click", "close"],
+		methods: {
+			init() {
+				// #ifdef APP-NVUE
+				this.nvue()
+				// #endif
+
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+				
+				if(!test.string(this.text)) {
+					error('noticebar组件direction为row时，要求text参数为字符串形式')
+				}
+			},
+			// vue版处理
+			async vue() {
+				// #ifndef APP-NVUE
+				let boxWidth = 0,
+					textWidth = 0
+				// 进行一定的延时
+				await sleep()
+				// 查询盒子和文字的宽度
+				textWidth = (await this.$uGetRect('.u-notice__content__text')).width
+				boxWidth = (await this.$uGetRect('.u-notice__content')).width
+				// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+				this.animationDuration = `${textWidth / getPx(this.speed)}s`
+				// 这里必须这样开始动画，否则在APP上动画速度不会改变
+				this.animationPlayState = 'paused'
+				setTimeout(() => {
+					this.animationPlayState = 'running'
+				}, 10)
+				// #endif
+			},
+			// nvue版处理
+			async nvue() {
+				// #ifdef APP-NVUE
+				this.nvueInit = false
+				let boxWidth = 0,
+					textWidth = 0
+				// 进行一定的延时
+				await sleep()
+				// 查询盒子和文字的宽度
+				textWidth = (await this.getNvueRect('u-notice__content__text')).width
+				boxWidth = (await this.getNvueRect('u-notice__content')).width
+				// 将文字移动到盒子的右边沿，之所以需要这么做，是因为nvue不支持100%单位，否则可以通过css设置
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						transform: `translateX(${boxWidth}px)`
+					},
+				}, () => {
+					// 如果非禁止动画，则开始滚动
+					!this.stopAnimation && this.loopAnimation(textWidth, boxWidth)
+				});
+				// #endif
+			},
+			loopAnimation(textWidth, boxWidth) {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						// 目标移动终点为-textWidth，也即当文字的最右边贴到盒子的左边框的位置
+						transform: `translateX(-${textWidth}px)`
+					},
+					// 滚动时间的计算为，时间 = 路程(boxWidth + textWidth) / 速度，最后转为毫秒
+					duration: (boxWidth + textWidth) / getPx(this.speed) * 1000,
+					delay: 10
+				}, () => {
+					animation.transition(this.$refs['u-notice__content__text'], {
+						styles: {
+							// 重新将文字移动到盒子的右边沿
+							transform: `translateX(${this.stopAnimation ? 0 : boxWidth}px)`
+						},
+					}, () => {
+						// 如果非禁止动画，则继续下一轮滚动
+						if (!this.stopAnimation) {
+							// 判断是否需要初始化计算尺寸
+							if (this.nvueInit) {
+								this.nvue()
+							} else {
+								this.loopAnimation(textWidth, boxWidth)
+							}
+						}
+					});
+				})
+				// #endif
+			},
+			getNvueRect(el) {
+				// #ifdef APP-NVUE
+				// 返回一个promise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[el], (res) => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// 点击通告栏
+			clickHandler(index) {
+				this.$emit('click')
+			},
+			// 点击右侧按钮，需要判断点击的是关闭图标还是箭头图标
+			close() {
+				this.$emit('close')
+			}
+		},
+		beforeUnmount() {
+			this.stopAnimation = true
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+
+	.u-notice {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left-icon {
+			align-items: center;
+			margin-right: 5px;
+		}
+
+		&__right-icon {
+			margin-left: 5px;
+			align-items: center;
+		}
+
+		&__content {
+			text-align: right;
+			flex: 1;
+			@include flex;
+			flex-wrap: nowrap;
+			overflow: hidden;
+
+			&__text {
+				font-size: 14px;
+				color: $u-warning;
+				/* #ifndef APP-NVUE */
+				// 这一句很重要，为了能让滚动左右连接起来
+				padding-left: 100%;
+				word-break: keep-all;
+				white-space: nowrap;
+				animation: u-loop-animation 10s linear infinite both;
+				/* #endif */
+				@include flex(row);
+				// line-height: 100%;
+			}
+		}
+
+	}
+
+	/* #ifndef APP-NVUE */
+	@keyframes u-loop-animation {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+	
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+	/* #endif */
+</style>

package/template/src/uni_modules/uview-plus/components/u-safe-bottom/props.js

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-safe-bottom/u-safe-bottom.vue

@@ -0,0 +1,59 @@
+<template>
+	<view
+		class="u-safe-bottom"
+		:style="[style]"
+		:class="[!isNvue && 'u-safe-area-inset-bottom']"
+	>
+	</view>
+</template>
+
+<script>
+	import { props } from "./props.js";
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addStyle, deepMerge, addUnit, getWindowInfo } from '../../libs/function/index';
+	/**
+	 * SafeBottom 底部安全区
+	 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+	 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+	 * @property {type}		prop_name
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 *
+	 * @event {Function()}
+	 * @example <u-status-bar></u-status-bar>
+	 */
+	export default {
+		name: "u-safe-bottom",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				safeAreaBottomHeight: 0,
+				isNvue: false,
+			};
+		},
+		computed: {
+			style() {
+				const style = {};
+				// #ifdef APP-NVUE || MP-TOUTIAO || MP-WEIXIN
+				// nvue下，高度使用js计算填充
+				style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
+				// #endif
+				return deepMerge(style, addStyle(this.customStyle));
+			},
+		},
+		mounted() {
+			// #ifdef APP-NVUE || MP-TOUTIAO || MP-WEIXIN
+			// 标识为是否nvue
+			this.isNvue = true;
+			// #endif
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.u-safe-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-scroll-list/nvue.js

@@ -0,0 +1,31 @@
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
+const BindingX = uni.requireNativePlugin('bindingx')
+import { os } from '../../libs/function/index';
+export default {
+    methods: {
+        // 此处不写注释，请自行体会
+        nvueScrollHandler(e) {
+            const anchor = this.$refs['u-scroll-list__scroll-view'].ref
+            let element = {}
+            if (this.$refs['u-scroll-list__indicator__line__bar']) {
+                element = this.$refs['u-scroll-list__indicator__line__bar'].ref
+            }
+            const scrollLeft = e.contentOffset.x
+            const contentSize = e.contentSize.width
+            const { scrollWidth } = this
+            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
+            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
+            const actionNum = os() === 'ios' ? 2 : 1
+            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
+            BindingX.bind({
+                anchor,
+                eventType: 'scroll',
+                props: [{
+                    element,
+                    property: 'transform.translateX',
+                    expression
+                }]
+            })
+        }
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-scroll-list/props.js

@@ -0,0 +1,36 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 指示器的整体宽度
+        indicatorWidth: {
+            type: [String, Number],
+            default: () => defProps.scrollList.indicatorWidth
+        },
+        // 滑块的宽度
+        indicatorBarWidth: {
+            type: [String, Number],
+            default: () => defProps.scrollList.indicatorBarWidth
+        },
+        // 是否显示面板指示器
+        indicator: {
+            type: Boolean,
+            default: () => defProps.scrollList.indicator
+        },
+        // 指示器非激活颜色
+        indicatorColor: {
+            type: String,
+            default: () => defProps.scrollList.indicatorColor
+        },
+        // 指示器的激活颜色
+        indicatorActiveColor: {
+            type: String,
+            default: () => defProps.scrollList.indicatorActiveColor
+        },
+        // 指示器样式，可通过bottom，left，right进行定位
+        indicatorStyle: {
+            type: [String, Object],
+            default: () => defProps.scrollList.indicatorStyle
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-scroll-list/scrollList.js

@@ -0,0 +1,20 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:19:28
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/scrollList.js
+ */
+export default {
+    // scrollList
+    scrollList: {
+        indicatorWidth: 50,
+        indicatorBarWidth: 20,
+        indicator: true,
+        indicatorColor: '#f2f2f2',
+        indicatorActiveColor: '#3c9cff',
+        indicatorStyle: ''
+    }
+}