fusions-ui 1.2.4 → 1.2.7

package/components/fu-keyboard/fu-keyboard.vue

@@ -4,13 +4,13 @@
 			<slot />
 			<view class="fu-keyboard__tooltip" v-if="tooltip">
 				<view hover-class="fu-hover-class" :hover-stay-time="100">
-					<text class="fu-keyboard__tooltip__item fu-keyboard__tooltip__cancel" v-if="showCancel" @tap="onCancel">{{showCancel && cancelText}}</text>
+					<text class="fu-keyboard__tooltip__item fu-keyboard__tooltip__cancel" v-if="showCancel" @tap="handleCancel">{{showCancel && cancelText}}</text>
 				</view>
 				<view>
 					<text class="fu-keyboard__tooltip__item fu-keyboard__tooltip__tips" v-if="showTips">{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
 				</view>
 				<view hover-class="fu-hover-class" :hover-stay-time="100">
-					<text class="fu-keyboard__tooltip__item fu-keyboard__tooltip__submit" hover-class="fu-hover-class" @tap="onConfirm" v-if="showConfirm">{{showConfirm && confirmText}}</text>
+					<text class="fu-keyboard__tooltip__item fu-keyboard__tooltip__submit" hover-class="fu-hover-class" @tap="handleConfirm" v-if="showConfirm">{{showConfirm && confirmText}}</text>
 				</view>
 			</view>
 			<template v-if="mode == 'number' || mode == 'card'">
@@ -47,8 +47,9 @@
 	 * @property {Boolean} safeArea = [true|false] 是否开启底部安全区适配 （默认 true ）
 	 * @property {Boolean} isMaskClick = [true|false]	是否允许点击遮罩收起键盘 （默认 true ）
 	 * @property {String,Number} zIndex 弹出键盘的z-index值 （默认 1025 ）
-	 * @property {String} cancelText 取消按钮的文字 （默认 '取消' ）
-	 * @property {String} confirmText 确认按钮的文字 （默认 '确定' ）
+	 * @property {String} cancelText 取消按钮的文字 （默认 '取消'）
+	 * @property {String} confirmText 确认按钮的文字 （默认 '确定'）
+	 * 
 	 * @event {Function} change 按键被点击(不包含退格键被点击)
 	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
 	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
@@ -64,34 +65,43 @@
 			KeyboardNumber
 		},
 		methods: {
+			// 打开
 			open() {
 				this.$refs.popup.open();
 			},
+			
+			// 关闭
 			close() {
 				this.$refs.popup.close();
 				this.$emit('close')
 			},
+			
 			change(e) {
 				this.$emit('change', e);
 			},
+			
 			// 输入完成
-			onConfirm() {
+			handleConfirm() {
 				this.$emit('confirm');
 				if(this.closeOnClickConfirm) this.close();
 			},
+			
 			// 取消输入
-			onCancel() {
+			handleCancel() {
 				this.$emit('cancel');
 				this.close();
 			},
+			
 			// 退格键
 			backspace() {
 				this.$emit('backspace');
 			},
+			
 			// car模式切换中文|英文方法
 			changeCarInputMode(e) {
 				this.$emit('changeCarInputMode',e);
 			},
+			
 			changeCarMode() {
 				this.$refs.fuKeyboardCarRef && this.$refs.fuKeyboardCarRef.changeCarInputMode();
 			}
@@ -100,14 +110,14 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/color.scss';
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	$show-hover: 1;
 	
 	.fu-keyboard {
 
 		&__tooltip {
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			justify-content: space-between;
 			background-color: #FFFFFF;
 			padding: 14px 12px;

package/components/fu-keyboard/keyboard-car.vue

@@ -3,17 +3,18 @@
 		<view class="fu-keyboard__button" :class="[i + 1 === 4 && 'fu-keyboard__button--center']" v-for="(group, i) in abc ? engKeyBoardList : areaList" :key="i" :index="i">
 			<view class="fu-keyboard__button__inner-wrapper" v-if="i === 3">
 				<view class="fu-keyboard__button__inner-wrapper__left" hover-class="fu-hover-class" :hover-stay-time="200" @tap="changeCarInputMode">
-					<slot>
-						<template v-if="!customabc">
-							<text 
-								class="fu-keyboard__button__inner-wrapper__mode--zh" 
-								:class="[`fu-keyboard__button__inner-wrapper__mode--${!abc ? 'active' : 'inactive'}`]">中</text>
-							/
-							<text 
-								class="fu-keyboard__button__inner-wrapper__mode--en" 
-								:class="[`fu-keyboard__button__inner-wrapper__mode--${abc ? 'active' : 'inactive'}`]">英</text>
-						</template>
-					</slot>
+					<template v-if="!customabc">
+						<text 
+							class="fu-keyboard__button__inner-wrapper__mode--zh" 
+							:class="[`fu-keyboard__button__inner-wrapper__mode--${!abc ? 'active' : 'inactive'}`]">中</text>
+						/
+						<text 
+							class="fu-keyboard__button__inner-wrapper__mode--en" 
+							:class="[`fu-keyboard__button__inner-wrapper__mode--${abc ? 'active' : 'inactive'}`]">英</text>
+					</template>
+					<block v-else>
+						<slot></slot>
+					</block>
 				</view>
 			</view>
 			<view class="fu-keyboard__button__inner-wrapper" v-for="(item, j) in group" :key="j">
@@ -24,7 +25,7 @@
 			</view>
 			<view class="fu-keyboard__button__inner-wrapper" @touchstart="backspaceClick" @touchend="clearTimer" v-if="i === 3">
 				<view class="fu-keyboard__button__inner-wrapper__right" hover-class="fu-hover-class" :hover-stay-time="200">
-					<fu-icons name="backspace" size="28" color="#303133"></fu-icons>
+					<fu-icon name="backspace" size="28" color="#303133" />
 				</view>
 			</view>
 		</view>
@@ -39,6 +40,7 @@
 	 * @property {Boolean} autoChange = [true|false]  输入一个中文后，是否自动切换到英文（默认 false）
 	 * @property {Array} disKeys  被禁用的键
 	 * @property {Boolean} customabc = [true|false]  是否自定义abc（默认 false）
+	 * 
 	 * @event {Function} change 点击键盘触发
 	 * @event {Function} backspace 点击退格键触发
 	 * @example <fu-keyboard ref="uKeyboard" mode="car" v-model="show"></fu-keyboard>
@@ -47,22 +49,33 @@
 		name: "KeyboardCar",
 		emits: ['backspace','change','changeCarInputMode'],
 		props: {
-			// 是否打乱键盘按键的顺序
+			/**
+			 * @description 是否打乱键盘按键的顺序
+			 * @default false
+			 */
 			random: {
 				type: Boolean,
 				default: false
 			},
-			// 输入一个中文后，是否自动切换到英文
+			/**
+			 * @description 输入一个中文后，是否自动切换到英文
+			 * @default false
+			 */
 			autoChange: {
 				type: Boolean,
 				default: false
 			},
-			// 被禁用的键
+			/**
+			 * @description 被禁用的键
+			 */
 			disKeys: {
 				type: Array,
 				default: ()=>[]
 			},
-			// 是否自定义abc
+			/**
+			 * @description 是否自定义abc
+			 * @default false
+			 */
 			customabc: {
 				type: Boolean,
 				default: false
@@ -215,6 +228,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$show-hover: 1;
 	$fu-car-keyboard-background-color: rgb(224, 228, 230) !default;
 	$fu-car-keyboard-padding:6px 0 6px !default;
@@ -244,8 +258,7 @@
 		padding: $fu-car-keyboard-padding;
 
 		&__button {
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			justify-content: center;
 			flex: 1;
 			/* #ifndef APP-NVUE */
@@ -268,8 +281,7 @@
 				}
 
 				&__inner {
-					display: flex;
-					flex-direction: row;
+					@include flex(row);
 					justify-content: center;
 					align-items: center;
 					width: $fu-car-keyboard-button-inner-width;
@@ -293,8 +305,7 @@
 					width: $fu-car-keyboard-special-button-width;
 					height: $fu-car-keyboard-button-height;
 					background-color: $fu-car-keyboard-fu-hover-class-background-color;
-					display: flex;
-					flex-direction: row;
+					@include flex(row);
 					justify-content: center;
 					align-items: center;
 					box-shadow: $fu-car-keyboard-button-inner-box-shadow;

package/components/fu-keyboard/keyboard-number.vue

@@ -7,7 +7,7 @@
 		</view>
 		<view class="fu-keyboard__button-wrapper">
 			<view class="fu-keyboard__button-wrapper__button fu-keyboard__button-wrapper__button--gray" hover-class="fu-hover-class" :hover-stay-time="200" @touchstart.stop="backspaceClick" @touchend="clearTimer">
-				<fu-icons name="backspace" size="28" color="#303133"></fu-icons>
+				<fu-icon name="backspace" size="28" color="#303133" />
 			</view>
 		</view>
 	</view>
@@ -29,17 +29,27 @@
 		name: 'UnKeyboardNumber',
 		emits: ['backspace','change'],
 		props: {
-			// 键盘的类型，number-数字键盘，card-身份证键盘
+			/**
+			 * @description 键盘的类型
+			 * @values 'number' - 数字键盘, 'card' - 身份证键盘
+			 * @default 'number'
+			 */
 			mode: {
 				type: String,
 				default: 'number'
 			},
-			// 是否显示键盘的"."符号
+			/**
+			 * @description 是否显示键盘的"."符号
+			 * @default false
+			 */
 			dotDisabled: {
 				type: Boolean,
 				default: false
 			},
-			// 是否打乱键盘按键的顺序
+			/**
+			 * @description 是否打乱键盘按键的顺序
+			 * @default false
+			 */
 			random: {
 				type: Boolean,
 				default: false
@@ -120,6 +130,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$show-hover: 1;
 	$fu-number-keyboard-background-color:rgb(224, 228, 230) !default;
 	$fu-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
@@ -139,9 +150,7 @@
 	$fu-number-keyboard-fu-hover-class-background-color: #BBBCC6 !default;
 
 	.fu-keyboard {
-		display: flex;
-		flex-direction: row;
-		flex-direction: row;
+		@include flex(row);
 		justify-content: space-around;
 		background-color: $fu-number-keyboard-background-color;
 		flex-wrap: wrap;
@@ -159,8 +168,7 @@
 				width: $fu-number-keyboard-button-width;
 				height: $fu-number-keyboard-button-height;
 				background-color: $fu-number-keyboard-button-background-color;
-				display: flex;
-				flex-direction: row;
+				@include flex(row);
 				justify-content: center;
 				align-items: center;
 				border-top-left-radius: $fu-number-keyboard-button-border-top-left-radius;

package/components/fu-keyboard/props.js

@@ -1,86 +1,135 @@
 export default {
 	props: {
-		// 键盘的类型，number 数字键盘，card 身份证键盘，car 车牌号键盘
+		/**
+		 * @description 键盘的类型
+		 * @values 'number' - 数字键盘, 'card' - 身份证键盘, 'car' - 车牌号键盘
+		 */
 		mode: {
 			type: String,
 			default: 'number'
 		},
-		// 是否显示键盘的"."符号
+		/**
+		 * @description 是否显示键盘的"."符号
+		 * @default false
+		 */
 		dotDisabled: {
 			type: Boolean,
 			default: false
 		},
-		// 是否显示顶部工具条
+		/**
+		 * @description 是否显示顶部工具条
+		 * @default true
+		 */
 		tooltip: {
 			type: Boolean,
 			default: true
 		},
-		// 是否显示工具条中间的提示
+		/**
+		 * @description 是否显示工具条中间的提示
+		 * @default true
+		 */
 		showTips: {
 			type: Boolean,
 			default: true
 		},
-		// 工具条中间的提示文字
+		/**
+		 * @description 工具条中间的提示文字
+		 */
 		tips: {
 			type: String,
 			default: ''
 		},
-		// 是否显示工具条左边的"取消"按钮
+		/**
+		 * @description 是否显示工具条左边的"取消"按钮
+		 * @default true
+		 */
 		showCancel: {
 			type: Boolean,
 			default: true
 		},
-		// 是否显示工具条右边的"完成"按钮
+		/**
+		 * @description 是否显示工具条右边的"完成"按钮
+		 * @default true
+		 */
 		showConfirm: {
 			type: Boolean,
 			default: true
 		},
-		// 是否打乱键盘按键的顺序
+		/**
+		 * @description 是否打乱键盘按键的顺序
+		 * @default false
+		 */
 		random: {
 			type: Boolean,
 			default: false
 		},
-		// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+		/**
+		 * @description 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+		 * @default true
+		 */
 		safeArea: {
 			type: Boolean,
 			default: true
 		},
-		// 是否允许通过点击遮罩关闭键盘
+		/**
+		 * @description 是否允许通过点击遮罩关闭键盘
+		 * @default true
+		 */
 		isMaskClick: {
 			type: Boolean,
 			default: true
 		},
-		// 是否允许点击确认按钮关闭组件
+		/**
+		 * @description 是否允许点击确认按钮关闭组件
+		 * @default true
+		 */
 		closeOnClickConfirm: {
 			type: Boolean,
 			default: true
 		},
-		// z-index值
+		/**
+		 * @description 层级
+		 * @default 10075
+		 */
 		zIndex: {
 			type: [String, Number],
 			default: 10075
 		},
-		// 取消按钮的文字
+		/**
+		 * @description 取消按钮的文字
+		 * @default '取消'
+		 */
 		cancelText: {
 			type: String,
 			default: '取消'
 		},
-		// 确认按钮的文字
+		/**
+		 * @description 确认按钮的文字
+		 * @default '确定'
+		 */
 		confirmText: {
 			type: String,
 			default: '确定'
 		},
-		// 输入一个中文后，是否自动切换到英文
+		/**
+		 * @description 输入一个中文后，是否自动切换到英文
+		 * @default false
+		 */
 		autoChange: {
 			type: Boolean,
 			default: false
 		},
-		// 被禁用的键
+		/**
+		 * @description 被禁用的键
+		 */
 		disKeys: {
 			type: Array,
 			default: ()=>[]
 		},
-		// 是否自定义abc
+		/**
+		 * @description 是否自定义abc
+		 * @default false
+		 */
 		customabc: {
 			type: Boolean,
 			default: false

package/components/fu-line/fu-line.vue

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

package/components/fu-line/props.js

@@ -1,33 +1,58 @@
 export default {
 	props: {
+		/**
+		 * @description 线条的颜色
+		 */
 		color: {
 			type: String,
 			default: '#d6d7d9'
 		},
-		// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
+		/**
+		 * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
+		 */
 		length: {
 			type: [String, Number],
 			default: ''
 		},
-		// 线条方向，col-竖向，row-横向
+		/**
+		 * @description 线条方向
+		 * @values 'col' - 竖向, 'row' - 横向
+		 * @default 'row'
+		 */
 		direction: {
 			type: String,
 			default: 'row'
 		},
-		// 是否显示细边框
+		/**
+		 * @description 是否显示细边框
+		 * @default true
+		 */
 		hairline: {
 			type: Boolean,
 			default: true
 		},
-		// 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
+		/**
+		 * @description 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
+		 */
 		margin: {
 			type: [String, Number],
 			default: 0
 		},
-		// 设置线条类型
+		/**
+		 * @description 设置线条类型
+		 * @values 'solid' - 实线, 'dashed' - 方形虚线, 'dotted' - 圆点虚线
+		 * @default 'solid'
+		 */
 		borderStyle: {
 			type: String,
 			default: 'solid'
+		},
+		/**
+		 * @description 设置线条宽度（默认 1px）
+		 */
+		borderWidth: {
+			type: [String,Number],
+			default: ''
 		}
 	}
 }

package/components/fu-link/fu-link.vue

@@ -1,5 +1,9 @@
 <template>
-	<text class="fu-link" :class="[customClass]" @tap.stop="onOpenLink" :style="[linkStyle]">
+	<text 
+		class="fu-link" 
+		:class="[customClass]"
+		:style="[linkStyle]" 
+		@tap.stop="handleOpenLink">
 		<slot>
 			{{ text }}
 		</slot>
@@ -14,15 +18,16 @@
 	 * Link 超链接
 	 * @description 此组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
 	 * @property {String} color 文字颜色
-	 * @property {String,Number} size 字体大小，单位px （默认 14 ）
+	 * @property {String,Number} size 字体大小（默认 15 ）
 	 * @property {Boolean} underLine = [true|false] 是否显示下划线 （默认 false ）
 	 * @property {String} href 跳转的链接，要带上http(s)
 	 * @property {String} mpTips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
 	 * @property {String} text 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 
-	 * @property {String} customClass 定义需要用到的class外部样式 
+	 * @property {String} customClass 定义需要用到的外部类
 	 * @property {Object,String} customStyle 定义需要用到的外部样式
-	 * @property {Function} click 点击触发
-	 * @example <fu-link href="http://www.baidu.com">不同平台有不同表现形式</fu-link>
+	 * 
+	 * @event {Function} click 点击链接触发
+	 * @example <fu-link text="不同平台有不同表现形式" href="http://www.baidu.com"></fu-link>
 	 */
 	export default {
 		name:"FuLink",
@@ -41,7 +46,7 @@
 			}
 		},
 		methods: {
-			onOpenLink(e) {
+			handleOpenLink(e) {
 				// #ifdef APP-PLUS
 				plus.runtime.openURL(this.href)
 				// #endif
@@ -70,7 +75,8 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	$fu-link-line-height:1 !default;
 	
 	.fu-link {
@@ -80,6 +86,6 @@
 		@include flex;
 		flex-wrap: wrap;
 		flex: 1;
-		color: #3396ff;
+		color: $fu-primary;
 	}
 </style>

package/components/fu-link/props.js

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