create-uniapps 1.0.0

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

@@ -0,0 +1,94 @@
+<template>
+	<view
+	    class="u-steps"
+	    :class="[`u-steps--${direction}`]"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import test from '../../libs/function/test';
+	/**
+	 * Steps 步骤条
+	 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
+	 * @property {String}			direction		row-横向，column-竖向 (默认 'row' )
+	 * @property {String | Number}	current			设置当前处于第几步 (默认 0 )
+	 * @property {String}			activeColor		激活状态颜色 (默认 '#3c9cff' )
+	 * @property {String}			inactiveColor	未激活状态颜色 (默认 '#969799' )
+	 * @property {String}			activeIcon		激活状态的图标
+	 * @property {String}			inactiveIcon	未激活状态图标
+	 * @property {Boolean}			dot				是否显示点类型 (默认 false )
+	 * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
+	 */
+	export default {
+		name: 'u-steps',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+			}
+		},
+		watch: {
+			children() {
+				this.updateChildData()
+			},
+			parentData() {
+				this.updateChildData()
+			}
+		},
+		computed: {
+			// 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
+			parentData() {
+				return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot]
+			}
+		},
+		methods: {
+			// 更新子组件的数据
+			updateChildData() {
+				this.children.map(child => {
+					// 先判断子组件是否存在对应的方法
+					test.func((child || {}).updateFromParent()) && child.updateFromParent()
+				})
+			},
+			// 接受子组件的通知，去修改其他子组件的数据
+			updateFromChild() {
+				this.updateChildData()
+			}
+		},
+		created() {
+			this.children = []
+		},
+		options: {
+			virtualHost: false
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-steps {
+		@include flex;
+
+		&--column {
+			flex-direction: column
+		}
+
+		&--row {
+			flex-direction: row;
+			flex: 1;
+			/* #ifdef MP */
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+			/* #endif */
+
+            //微信小程序优化的比抖音的好 因此微信小程序使用flex布局
+            /* #ifdef MP-WEIXIN */
+            display: flex !important;
+            /* #endif */
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-steps-item/props.js

@@ -0,0 +1,31 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 标题
+        title: {
+            type: [String, Number],
+            default: () => defProps.stepsItem.title
+        },
+        // 描述文本
+        desc: {
+            type: [String, Number],
+            default: () => defProps.stepsItem.desc
+        },
+        // 图标大小
+        iconSize: {
+            type: [String, Number],
+            default: () => defProps.stepsItem.iconSize
+        },
+        // 当前步骤是否处于失败状态
+        error: {
+            type: Boolean,
+            default: () => defProps.stepsItem.error
+        },
+        // 自定义样式
+        itemStyle: {
+            type: [Object],
+            default: {}
+        },
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-steps-item/stepsItem.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:12:55
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/stepsItem.js
+ */
+export default {
+    // steps-item组件
+    stepsItem: {
+        title: '',
+        desc: '',
+        iconSize: 17,
+        error: false
+    }
+}

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

@@ -0,0 +1,342 @@
+<template>
+	<view class="u-steps-item" ref="u-steps-item" :class="[`u-steps-item--${parentData.direction}`]">
+		<view class="u-steps-item__line" v-if="index + 1 < childLength"
+			:class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
+		<view class="u-steps-item__wrapper"
+			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]"
+			:style="[itemStyleInner]">
+			<slot name="icon">
+				<view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
+						backgroundColor: statusColor
+					}">
+
+				</view>
+				<view class="u-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
+					<u-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
+						:size="iconSize"
+						:color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
+					</u-icon>
+				</view>
+				<view v-else :style="{
+						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
+						borderColor: statusColor
+					}" class="u-steps-item__wrapper__circle">
+					<text v-if="statusClass === 'process' || statusClass === 'wait'"
+						class="u-steps-item__wrapper__circle__text" :style="{
+							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
+						}">{{ index + 1}}</text>
+					<u-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
+						:name="statusClass === 'error' ? 'close' : 'checkmark'"></u-icon>
+				</view>
+			</slot>
+		</view>
+		<view class="u-steps-item__content" :class="[`u-steps-item__content--${parentData.direction}`,
+			parentData.current == index ? 'u-steps-item__content--current' : '']"
+			:style="[contentStyle]">
+			<slot name="content" :index="index">
+			</slot>
+			<template v-if="!$slots['content']">
+				<view class="u-steps-item__content__title">
+					<slot name="title">
+					</slot>
+					<up-text v-if="!$slots['title']" :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px"
+						:size="parentData.current == index ? 14 : 13"></up-text>
+				</view>
+				<view class="u-steps-item__content__desc">
+					<slot name="desc">
+					</slot>
+					<up-text v-if="!$slots['desc']" :text="desc" type="tips" size="12"></up-text>
+				</view>
+			</template>
+		</view>
+		<!-- <view
+		    class="u-steps-item__line"
+		    v-if="showLine && parentData.direction === 'column'"
+			:class="[`u-steps-item__line--${parentData.direction}`]"
+		    :style="[lineStyle]"
+		></view> -->
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { sleep, error } from '../../libs/function/index';
+	import color from '../../libs/config/color';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * StepsItem 步骤条的子组件
+	 * @description 本组件需要和u-steps配合使用
+	 * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
+	 * @property {String}			title			标题文字
+	 * @property {String}			current			描述文本
+	 * @property {String | Number}	iconSize		图标大小  (默认 17 )
+	 * @property {Boolean}			error			当前步骤是否处于失败状态  (默认 false )
+	 * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
+	 */
+	export default {
+		name: 'u-steps-item',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				index: 0,
+				childLength: 0,
+				showLine: false,
+				size: {
+					height: 0,
+					width: 0
+				},
+				parentData: {
+					direction: 'row',
+					current: 0,
+					activeColor: '',
+					inactiveColor: '',
+					activeIcon: '',
+					inactiveIcon: '',
+					dot: false
+				}
+			}
+		},
+		watch: {
+			'parentData'(newValue, oldValue) {
+			}
+		},
+		created() {
+			this.init()
+		},
+		// #ifdef MP-TOUTIAO
+		options: {
+			virtualHost: false
+		},
+		// #endif
+		computed: {
+			lineStyle() {
+				const style = {}
+				if (this.parentData.direction === 'row') {
+					style.width = this.size.width + 'px'
+					style.left = this.size.width / 2 + 'px'
+				} else {
+					style.height = this.size.height + 'px'
+					// style.top = this.size.height / 2 + 'px'
+				}
+				style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? color.error : this.index <
+					this
+					.parentData
+					.current ? this.parentData.activeColor : this.parentData.inactiveColor
+				return style
+			},
+			itemStyleInner() {
+				return {
+					...this.itemStyle
+				}
+			},
+			statusClass() {
+				const {
+					index,
+					error
+				} = this
+				const {
+					current
+				} = this.parentData
+				if (current == index) {
+					return error === true ? 'error' : 'process'
+				} else if (error) {
+					return 'error'
+				} else if (current > index) {
+					return 'finish'
+				} else {
+					return 'wait'
+				}
+			},
+			statusColor() {
+				let colorTmp = ''
+				switch (this.statusClass) {
+					case 'finish':
+						colorTmp = this.parentData.activeColor
+						break
+					case 'error':
+						colorTmp = color.error
+						break
+					case 'process':
+						colorTmp = this.parentData.dot ? this.parentData.activeColor : 'transparent'
+						break
+					default:
+						colorTmp = this.parentData.inactiveColor
+						break
+				}
+				return colorTmp
+			},
+			contentStyle() {
+				const style = {}
+				if (this.parentData.direction === 'column') {
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+					style.marginTop = this.parentData.dot ? '0px' : '6px'
+				} else {
+					style.marginTop = this.parentData.dot ? '2px' : '6px'
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+				}
+
+				return style
+			}
+		},
+		mounted() {
+			this.parent && this.parent.updateFromChild()
+			sleep().then(() => {
+				this.getStepsItemRect()
+			})
+		},
+		methods: {
+			init() {
+				// 初始化数据
+				this.updateParentData()
+				if (!this.parent) {
+					return error('u-steps-item必须要搭配u-steps组件使用')
+				}
+				this.index = this.parent.children.indexOf(this)
+				this.childLength = this.parent.children.length
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('u-steps')
+			},
+			// 父组件数据发生变化
+			updateFromParent() {
+				this.init()
+			},
+			// 获取组件的尺寸，用于设置横线的位置
+			getStepsItemRect() {
+				// #ifndef APP-NVUE
+				this.$uGetRect('.u-steps-item').then(size => {
+					this.size = size
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['u-steps-item'], res => {
+					const {
+						size
+					} = res
+					this.size = size
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-steps-item {
+		flex: 1;
+		@include flex;
+
+		&--row {
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+		}
+
+		&--column {
+			position: relative;
+			flex-direction: row;
+			justify-content: flex-start;
+			padding-bottom: 5px;
+		}
+
+		&__wrapper {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			background-color: #fff;
+			border-radius: 50px;
+
+			&--column {
+				width: 20px;
+				height: 20px;
+
+				&--dot {
+					height: 20px;
+					width: 20px;
+				}
+			}
+
+			&--row {
+				width: 20px;
+				height: 20px;
+
+				&--dot {
+					width: 20px;
+					height: 20px;
+				}
+			}
+
+			&__circle {
+				width: 20px;
+				height: 20px;
+				/* #ifndef APP-NVUE */
+				box-sizing: border-box;
+				flex-shrink: 0;
+				/* #endif */
+				border-radius: 100px;
+				border-width: 1px;
+				border-color: $u-tips-color;
+				border-style: solid;
+				@include flex(row);
+				align-items: center;
+				justify-content: center;
+				transition: background-color 0.3s;
+
+				&__text {
+					color: $u-tips-color;
+					font-size: 11px;
+					@include flex(row);
+					align-items: center;
+					justify-content: center;
+					text-align: center;
+					line-height: 11px;
+				}
+			}
+
+			&__dot {
+				width: 10px;
+				height: 10px;
+				border-radius: 100px;
+				background-color: $u-content-color;
+			}
+		}
+
+		&__content {
+			@include flex;
+			flex: 1;
+
+			&--row {
+				flex-direction: column;
+				align-items: center;
+			}
+
+			&--column {
+				flex-direction: column;
+				margin-left: 6px;
+			}
+		}
+
+		&__line {
+			position: absolute;
+			background: $u-tips-color;
+
+			&--row {
+				top: 10px;
+				height: 1px;
+			}
+
+			&--column {
+				width: 1px;
+				left: 10px;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,42 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+        offsetTop: {
+            type: [String, Number],
+            default: () => defProps.sticky.offsetTop
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            // #ifdef H5
+            // H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+            default: 44,
+            // #endif
+            // #ifndef H5
+            default: () => defProps.sticky.customNavHeight
+            // #endif
+        },
+        // 是否开启吸顶功能
+        disabled: {
+            type: Boolean,
+            default: () => defProps.sticky.disabled
+        },
+        // 吸顶区域的背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.sticky.bgColor
+        },
+        // z-index值
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.sticky.zIndex
+        },
+        // 列表中的索引值
+        index: {
+            type: [String, Number],
+            default: () => defProps.sticky.index
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-sticky/sticky.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:01:30
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/sticky.js
+ */
+export default {
+    // sticky组件
+    sticky: {
+        offsetTop: 0,
+        customNavHeight: 0,
+        disabled: false,
+        bgColor: 'transparent',
+        zIndex: '',
+        index: ''
+    }
+}