@gmcb/uv-ui 0.2.26

package/components/uv-switch/uv-switch.vue

@@ -0,0 +1,182 @@
+<template>
+	<view
+	  class="uv-switch"
+	  :class="[disabled && 'uv-switch--disabled']"
+	  :style="[switchStyle, $uv.addStyle(customStyle)]"
+	  @tap="clickHandler"
+	>
+		<view
+		  class="uv-switch__bg"
+		  :style="[bgStyle]"
+		>
+		</view>
+		<view
+		  class="uv-switch__node"
+		  :class="[innerValue && 'uv-switch__node--on']"
+		  :style="[nodeStyle]"
+		  ref="uv-switch__node"
+		>
+			<uv-loading-icon
+			  :show="loading"
+			  mode="circle"
+			  timingFunction='linear'
+			  :color="innerValue ? activeColor : '#AAABAD'"
+			  :size="size * 0.6"
+			/>
+		</view>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * switch 开关选择器
+	 * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
+	 * @tutorial https://www.uvui.cn/components/switch.html
+	 * @property {Boolean}						loading			是否处于加载中（默认 false ）
+	 * @property {Boolean}						disabled		是否禁用（默认 false ）
+	 * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
+	 * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
+	 * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
+	 * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
+	 * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
+	 * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
+	 * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+	 * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
+	 * @property {Object}						customStyle		定义需要用到的外部样式
+	 *
+	 * @event {Function} change 在switch打开或关闭时触发
+	 * @example <uv-switch v-model="checked" active-color="red" inactive-color="#eee"></uv-switch>
+	 */
+	export default {
+		name: "uv-switch",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				bgColor: '#ffffff',
+				innerValue: false
+			}
+		},
+		watch: {
+			value(newVal) {
+				if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
+					return this.$uv.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+				}
+				this.innerValue = newVal;
+			},
+			modelValue(newVal) {
+				if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
+					return this.$uv.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+				}
+				this.innerValue = newVal;
+			}
+		},
+		created() {
+			this.innerValue = this.value || this.modelValue;
+		},
+		computed: {
+			isActive() {
+				return this.innerValue === this.activeValue;
+			},
+			switchStyle() {
+				let style = {}
+				// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+				style.width = this.$uv.addUnit(this.$uv.getPx(this.size) * 2 + 2)
+				style.height = this.$uv.addUnit(this.$uv.getPx(this.size) + 2)
+				// 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
+				// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+				if (this.customInactiveColor) {
+					style.borderColor = 'rgba(0, 0, 0, 0)'
+				}
+				style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
+				return style;
+			},
+			nodeStyle() {
+				let style = {}
+				// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+				style.width = this.$uv.addUnit(this.$uv.getPx(this.size) - this.space)
+				style.height = this.$uv.addUnit(this.$uv.getPx(this.size) - this.space)
+				const translateX = this.isActive ? this.$uv.addUnit(this.space) : this.$uv.addUnit(this.$uv.getPx(this.size));
+				style.transform = `translateX(-${translateX})`
+				return style
+			},
+			bgStyle() {
+				let style = {}
+				// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
+				style.width = this.$uv.addUnit(this.$uv.getPx(this.size) * 2 - this.$uv.getPx(this.size) / 2)
+				style.height = this.$uv.addUnit(this.$uv.getPx(this.size))
+				style.backgroundColor = this.inactiveColor
+				// 打开时，让此元素收缩，否则反之
+				style.transform = `scale(${this.isActive ? 0 : 1})`
+				return style
+			},
+			customInactiveColor() {
+				// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+				return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
+			}
+		},
+		methods: {
+			clickHandler() {
+				if (!this.disabled && !this.loading) {
+					const oldValue = this.isActive ? this.inactiveValue : this.activeValue
+					if (!this.asyncChange) {
+						this.$emit('input', oldValue)
+						this.$emit('update:modelValue', oldValue)
+					}
+					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+					this.$nextTick(() => {
+						this.$emit('change', oldValue)
+					})
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.uv-switch {
+		@include flex(row);
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		background-color: #fff;
+		border-width: 1px;
+		border-radius: 100px;
+		transition: background-color 0.4s;
+		border-color: rgba(0, 0, 0, 0.12);
+		border-style: solid;
+		justify-content: flex-end;
+		align-items: center;
+		// 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+		// 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
+		overflow: hidden;
+		&__node {
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			border-radius: 100px;
+			background-color: #fff;
+			border-radius: 100px;
+			box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+			transition-property: transform;
+			transition-duration: 0.4s;
+			transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+		}
+		&__bg {
+			position: absolute;
+			border-radius: 100px;
+			background-color: #FFFFFF;
+			transition-property: transform;
+			transition-duration: 0.4s;
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			transition-timing-function: ease;
+		}
+		&--disabled {
+			opacity: 0.6;
+		}
+	}
+</style>

package/components/uv-tabbar/props.js

@@ -0,0 +1,50 @@
+export default {
+	props: {
+		// 当前匹配项的name
+		value: {
+			type: [String, Number, null],
+			default: null
+		},
+		// 是否为iPhoneX留出底部安全距离
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示上方边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 元素层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: 9
+		},
+		// 选中标签的颜色
+		activeColor: {
+			type: String,
+			default: '#1989fa'
+		},
+		// 未选中标签的颜色
+		inactiveColor: {
+			type: String,
+			default: '#7d7e80'
+		},
+		// 是否固定在底部
+		fixed: {
+			type: Boolean,
+			default: true
+		},
+		// fixed定位固定在底部时，是否生成一个等高元素防止塌陷
+		placeholder: {
+			type: Boolean,
+			default: true
+		},
+		// 图标大小
+		iconSize: {
+			type: [String, Number],
+			default: 20
+		},
+		...uni.$uv?.props?.tabbar
+	}
+}

package/components/uv-tabbar/uv-tabbar.vue

@@ -0,0 +1,146 @@
+<template>
+	<view class="uv-tabbar">
+		<view
+		    class="uv-tabbar__content"
+		    ref="uv-tabbar__content"
+		    @touchmove.stop.prevent="noop"
+		    :class="[border && 'uv-border-top', fixed && 'uv-tabbar--fixed']"
+		    :style="[tabbarStyle]"
+		>
+			<view class="uv-tabbar__content__item-wrapper">
+				<slot />
+			</view>
+			<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
+		</view>
+		<view
+		    class="uv-tabbar__placeholder"
+			v-if="placeholder"
+		    :style="{
+				height: placeholderHeight + 'px',
+			}"
+		></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
+	/**
+	 * Tabbar 底部导航栏
+	 * @description 此组件提供了自定义tabbar的能力。
+	 * @tutorial https://www.uvui.cn/components/tabbar.html
+	 * @property {String | Number}	value				当前匹配项的name
+	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
+	 * @property {Boolean}			border				是否显示上方边框（默认 true ）
+	 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
+	 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
+	 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
+	 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
+	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 * 
+	 * @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
+	 */
+	export default {
+		name: 'uv-tabbar',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				placeholderHeight: 0
+			}
+		},
+		computed: {
+			tabbarStyle() {
+				const style = {
+					zIndex: this.zIndex
+				}
+				// 合并来自父组件的customStyle样式
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			},
+			// 监听多个参数的变化，通过在computed执行对应的操作
+			updateChild() {
+				return [this.value, this.activeColor, this.inactiveColor]
+			},
+			updatePlaceholder() {
+				return [this.fixed, this.placeholder]
+			}
+		},
+		watch: {
+			updateChild() {
+				// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
+				this.updateChildren()
+			},
+			updatePlaceholder() {
+				// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
+				this.setPlaceholderHeight()
+			}
+		},
+		created() {
+			this.children = []
+		},
+		mounted() {
+			this.setPlaceholderHeight()
+		},
+		methods: {
+			updateChildren() {
+				// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
+				this.children.length && this.children.map(child => child.updateFromParent())
+			},
+			// 设置用于防止塌陷元素的高度
+			async setPlaceholderHeight() {
+				if (!this.fixed || !this.placeholder) return
+				// 延时一定时间
+				await this.$uv.sleep(20)
+				// #ifndef APP-NVUE
+				this.$uvGetRect('.uv-tabbar__content').then(({height = 50}) => {
+					// 修复IOS safearea bottom 未填充高度
+					this.placeholderHeight = height
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uv-tabbar__content'], (res) => {
+					const {
+						size
+					} = res
+					this.placeholderHeight = size.height
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$show-border: 1;
+	$show-border-top: 1;
+	@import '../../libs/css/variable.scss';
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	.uv-tabbar {
+		@include flex(column);
+		flex: 1;
+		justify-content: center;
+		
+		&__content {
+			@include flex(column);
+			background-color: #fff;
+			
+			&__item-wrapper {
+				height: 50px;
+				@include flex(row);
+			}
+		}
+
+		&--fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+</style>

package/components/uv-tabbar-item/props.js

@@ -0,0 +1,40 @@
+export default {
+	props: {
+		// item标签的名称，作为与uv-tabbar的value参数匹配的标识符
+		name: {
+			type: [String, Number, null],
+			default: null
+		},
+		// uv-ui内置图标或者绝对路径的图片
+		icon: {
+			icon: String,
+			default: ''
+		},
+		// 图标大小，默认uv-tabbar的iconSize=20
+		iconSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// 右上角的角标提示信息
+		badge: {
+			type: [String, Number, null],
+			default: null
+		},
+		// 是否显示圆点，将会覆盖badge参数
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		// 描述文本
+		text: {
+			type: String,
+			default: ''
+		},
+		// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
+		badgeStyle: {
+			type: [Object, String],
+			default: 'top: 6px;right:2px;'
+		},
+		...uni.$uv?.props?.tabbarItem
+	}
+}

package/components/uv-tabbar-item/uv-tabbar-item.vue

@@ -0,0 +1,146 @@
+<template>
+	<view
+	    class="uv-tabbar-item"
+	    :style="[$uv.addStyle(customStyle)]"
+	    @tap="clickHandler"
+	>
+		<view class="uv-tabbar-item__icon">
+			<uv-icon
+			    v-if="icon"
+			    :name="icon"
+			    :color="isActive? parentData.activeColor : parentData.inactiveColor"
+			    :size="iconSize? iconSize: parentData.iconSize"
+			></uv-icon>
+			<template v-else>
+				<slot
+				    v-if="isActive"
+				    name="active-icon"
+				/>
+				<slot
+				    v-else
+				    name="inactive-icon"
+				/>
+			</template>
+			<uv-badge
+				absolute
+				:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
+			    :customStyle="badgeStyle"
+			    :isDot="dot"
+			    :value="badge || (dot ? 1 : null)"
+			    :show="dot || badge > 0"
+			></uv-badge>
+		</view>
+		
+		<slot name="text">
+			<text
+			    class="uv-tabbar-item__text"
+			    :style="{
+					color: isActive? parentData.activeColor : parentData.inactiveColor
+				}"
+			>{{ text }}</text>
+		</slot>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * TabbarItem 底部导航栏子组件
+	 * @description 此组件提供了自定义tabbar的能力。
+	 * @tutorial https://www.uvui.cn/components/tabbar.html
+	 * @property {String | Number}	name		item标签的名称，作为与uv-tabbar的value参数匹配的标识符
+	 * @property {String}			icon		uvui内置图标或者绝对路径的图片
+	 * @property {String | Number}	badge		右上角的角标提示信息
+	 * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
+	 * @property {String}			text		描述文本
+	 * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
+	 */
+	export default {
+		name: 'uv-tabbar-item',
+		mixins: [mpMixin, mixin, props],
+		emits: ['click','change'],
+		data() {
+			return {
+				isActive: false, // 是否处于激活状态
+				parentData: {
+					value: null,
+					activeColor: '',
+					inactiveColor: '',
+					iconSize: 20
+				}
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			init() {
+				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+				this.updateParentData()
+				if (!this.parent) {
+					this.$uv.error('uv-tabbar-item必须搭配uv-tabbar组件使用')
+				}
+				// 本子组件在uv-tabbar的children数组中的索引
+				const index = this.parent.children.indexOf(this)
+				// 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
+				this.isActive = (this.name || index) === this.parentData.value
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('uv-tabbar')
+			},
+			// 此方法将会被父组件uv-tabbar调用
+			updateFromParent() {
+				// 重新初始化
+				this.init()
+			},
+			clickHandler() {
+				this.$nextTick(() => {
+					const index = this.parent.children.indexOf(this)
+					const name = this.name || index
+					// 点击的item为非激活的item才发出change事件
+					if (name !== this.parent.value) {
+						this.parent.$emit('change', name)
+					}
+					this.$emit('click', name)
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	.uv-tabbar-item {
+		@include flex(column);
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		
+		&__icon {
+			@include flex;
+			position: relative;
+			width: 150rpx;
+			justify-content: center;
+		}
+
+		&__text {
+			margin-top: 2px;
+			font-size: 12px;
+			color: $uv-content-color;
+		}
+	}
+
+	/* #ifdef MP */
+	// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
+	:host {
+		flex: 1
+	}
+	/* #endif */
+</style>

package/components/uv-tabs/props.js

@@ -0,0 +1,71 @@
+export default {
+	props: {
+		// 滑块的移动过渡时间，单位ms
+		duration: {
+			type: Number,
+			default: 300
+		},
+		// tabs标签数组
+		list: {
+			type: Array,
+			default: () => []
+		},
+		// 滑块颜色
+		lineColor: {
+			type: String,
+			default: '#3c9cff'
+		},
+		// 菜单选择中时的样式
+		activeStyle: {
+			type: [String, Object],
+			default: () => ({
+				color: '#303133'
+			})
+		},
+		// 菜单非选中时的样式
+		inactiveStyle: {
+			type: [String, Object],
+			default: () => ({
+				color: '#606266'
+			})
+		},
+		// 滑块长度
+		lineWidth: {
+			type: [String, Number],
+			default: 20
+		},
+		// 滑块高度
+		lineHeight: {
+			type: [String, Number],
+			default: 3
+		},
+		// 滑块背景显示大小，当滑块背景设置为图片时使用
+		lineBgSize: {
+			type: String,
+			default: 'cover'
+		},
+		// 菜单item的样式
+		itemStyle: {
+			type: [String, Object],
+			default: () => ({
+				height: '44px'
+			})
+		},
+		// 菜单是否可滚动
+		scrollable: {
+			type: Boolean,
+			default: true
+		},
+		// 当前选中标签的索引
+		current: {
+			type: [Number, String],
+			default: 0
+		},
+		// 默认读取的键名
+		keyName: {
+			type: String,
+			default: 'name'
+		},
+		...uni.$uv?.props?.tabs
+	}
+}