fusions-ui 1.2.4 → 1.2.7

package/components/fu-notice-bar/notice-row.vue

@@ -3,7 +3,7 @@
 		<view class="fu-row-notice__box">
 			<!-- 左图标 -->
 			<view class="fu-row-notice__icon--left" v-if="leftIcon">
-				<fu-icons :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icons>
+				<fu-icon :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icon>
 			</view>
 
 			<!-- 消息体 -->
@@ -20,7 +20,7 @@
 
 			<!-- 右图标 -->
 			<view class="fu-row-notice__icon--right" @click="handleClickRight" v-if="rightIcon">
-				<fu-icons :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icons>
+				<fu-icon :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icon>
 			</view>
 		</view>
 	</view>
@@ -47,95 +47,149 @@
 	 * @property {String} fontColor  字体颜色
 	 * @property {String,Number} fontSize 字体大小（默认 14）
 	 * @property {String} bgColor 背景颜色
+	 * 
+	 * @event {Function} click 点击通知栏文字触发
+	 * @event {Function} clickRight 点击右侧图标触发
+	 * @example <notice-row :list="list"></notice-row>
 	 */
 	export default {
 		name: "NoticeRow",
 		mixins: [mpMixin, mixin],
 		emits: ['click', 'clickRight'],
 		props: {
-			// 显示的内容
+			/**
+			 * @description 显示的内容
+			 */
 			list: {
 				type: Array,
 				default () {
 					return []
 				}
 			},
-			// 是否显示 默认 true
+			/**
+			 * @description 是否显示
+			 * @default true
+			 */
 			show: {
 				type: Boolean,
 				default: true
 			},
-			// 是否显示左边图标
+			/**
+			 * @description 是否显示左边图标
+			 * @default true
+			 */
 			leftIcon: {
 				type: Boolean,
 				default: true
 			},
-			// 左边图标的名称
+			/**
+			 * @description 左边图标的名称
+			 * @default 'volume'
+			 */
 			leftIconName: {
 				type: String,
 				default: 'volume'
 			},
-			// 左边图标的大小
+			/**
+			 * @description 左边图标的大小
+			 * @default 20
+			 */
 			leftIconSize: {
 				type: [String, Number],
 				default: 20
 			},
-			// 左边图标的颜色
+			/**
+			 * @description 左边图标的颜色
+			 * @default '#333333'
+			 */
 			leftIconColor: {
 				type: String,
 				default: '#333333'
 			},
-			// 是否显示右边的图标
+			/**
+			 * @description 是否显示右边的图标
+			 * @default false
+			 */
 			rightIcon: {
 				type: Boolean,
 				default: false
 			},
-			// 右边图标的名称
+			/**
+			 * @description 右边图标的名称
+			 * @default 'right'
+			 */
 			rightIconName: {
 				type: String,
 				default: 'right'
 			},
-			// 右边图标的大小
+			/**
+			 * @description 右边图标的大小
+			 * @default 20
+			 */
 			rightIconSize: {
 				type: [String, Number],
-				default: 26
+				default: 20
 			},
-			// 右边图标的颜色
+			/**
+			 * @description 右边图标的颜色
+			 * @default '#333333'
+			 */
 			rightIconColor: {
 				type: String,
 				default: '#333333'
 			},
-			// 是否显示关闭按钮
+			/**
+			 * @description 是否显示关闭按钮
+			 * @default false
+			 */
 			showClose: {
 				type: Boolean,
 				default: false
 			},
-			// 内边距
+			/**
+			 * @description 内边距
+			 * @default '9px 12px'
+			 */
 			padding: {
 				type: String,
 				default: '9px 12px'
 			},
-			// 自动播放
+			/**
+			 * @description 自动播放
+			 * @default true
+			 */
 			autoPlay: {
 				type: Boolean,
 				default: true
 			},
-			// 水平滚动时的速度，即每秒滚动多少px
+			/**
+			 * @description 水平滚动时的速度，即每秒滚动多少px
+			 * @default 80
+			 */
 			speed: {
 				type: Number,
 				default: 80
 			},
-			// 背景颜色
+			/**
+			 * @description 背景颜色
+			 * @default '#f9f9f9'
+			 */
 			bgColor: {
 				type: String,
-				default: ''
+				default: '#f9f9f9'
 			},
-			// 字体颜色
+			/**
+			 * @description 字体颜色
+			 * @default '#333333'
+			 */
 			fontColor: {
 				type: String,
-				default: ''
+				default: '#333333'
 			},
-			// 字体大小
+			/**
+			 * @description 字体大小
+			 * @default 14
+			 */
 			fontSize: {
 				type: [String, Number],
 				default: 14
@@ -250,13 +304,16 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-row-notice {
 		flex: 1;
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 
 		&__box {
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			align-items: center;
 			justify-content: space-between;
 		}
@@ -265,13 +322,13 @@
 
 			&--box {
 				flex: 1;
-				display: flex;
-				flex-direction: row;
+				@include flex(row);
+				/* #ifndef APP-NVUE */
 				overflow: hidden;
+				/* #endif */
 			}
 
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			flex-wrap: nowrap;
 			text-align: right;
 			padding-left: 100%;

package/components/fu-notice-bar/props.js

@@ -1,109 +1,170 @@
 export default {
 	props: {
-		// 显示的内容
+		/**
+		 * @description 显示的内容
+		 */
 		list: {
 		  type: Array,
 		  default() {
 		    return []
 		  }
 		},
-		// 是否显示 默认 false
+		/**
+		 * @description 是否显示
+		 * @default true
+		 */
 		show: {
 			type: Boolean,
 			default: true
 		},
-		// 定义圆角 默认 0
+		/**
+		 * @description 设置圆角
+		 */
 		radius: {
 		  type: [Number,String],
 		  default: 0
 		},
-		// 滚动方向
-		// row -> 水平滚动 column -> 垂直滚动
+		/**
+		 * @description 滚动方向
+		 * @values 'row' - 水平滚动, 'column' - 垂直滚动
+		 * @default 'row'
+		 */
 		mode: {
 		  type: String,
 		  default: 'row'
 		},
-		// 是否显示左边图标
+		/**
+		 * @description 是否显示左边图标
+		 * @default true
+		 */
 		leftIcon: {
 		  type: Boolean,
 		  default: true
 		},
-		// 左边图标的名称
+		/**
+		 * @description 左边图标的名称
+		 * @default 'volume'
+		 */
 		leftIconName: {
 		  type: String,
 		  default: 'volume'
 		},
-		// 左边图标的大小
+		/**
+		 * @description 左边图标的大小
+		 * @default 20
+		 */
 		leftIconSize: {
 		  type: [String,Number],
 		  default: 20
 		},
-		// 左边图标的颜色
+		/**
+		 * @description 左边图标的颜色
+		 * @default '#333333'
+		 */
 		leftIconColor: {
 			type: String,
 			default: '#333333'
 		},
-		// 是否显示右边的图标
+		/**
+		 * @description 是否显示右边的图标
+		 * @default false
+		 */
 		rightIcon: {
 		  type: Boolean,
 		  default: false
 		},
-		// 右边图标的名称
+		/**
+		 * @description 右边图标的名称
+		 * @default 'right'
+		 */
 		rightIconName: {
 		  type: String,
 		  default: 'right'
 		},
-		// 右边图标的大小
+		/**
+		 * @description 右边图标的大小
+		 * @default 20
+		 */
 		rightIconSize: {
 		  type: [String,Number],
 		  default: 20
 		},
-		// 右边图标的颜色
+		/**
+		 * @description 右边图标的颜色
+		 * @default '#333333'
+		 */
 		rightIconColor: {
 			type: String,
 			default: '#333333'
 		},
-		// 内边距
+		/**
+		 * @description 内边距
+		 * @default '9px 12px'
+		 */
 		padding: {
 		  type: String,
 		  default: '9px 12px'
 		},
-		// 自动播放
+		/**
+		 * @description 自动播放
+		 * @default true
+		 */
 		autoPlay: {
 		  type: Boolean,
 		  default: true
 		},
-		// 滚动周期
+		/**
+		 * @description 滚动周期
+		 * @default 2000
+		 */
 		duration: {
 		  type: Number,
 		  default: 2000
 		},
-		// 水平滚动时的速度，即每秒滚动多少px
+		/**
+		 * @description 水平滚动时的速度，即每秒滚动多少px
+		 * @default 80
+		 */
 		speed: {
 		  type: Number,
 		  default: 80
 		},
-		// 水平滚动的时候是否采用衔接的模式
+		/**
+		 * @description 水平滚动的时候是否采用衔接的模式
+		 * @default true
+		 */
 		circular: {
 		  type: Boolean,
 		  default: true
 		},
-		// 没有数据时是否显示通知
+		/**
+		 * @description 没有数据时是否显示通知
+		 * @default true
+		 */
 		autoHidden: {
 		  type: Boolean,
 		  default: true
 		},
-		// 背景颜色
+		/**
+		 * @description 背景颜色
+		 * @default '#f9f9f9'
+		 */
 		bgColor: {
 		  type: String,
 		  default: '#f9f9f9'
 		},
-		// 字体颜色
+		/**
+		 * @description 字体颜色
+		 * @default '#333333'
+		 */
 		color: {
 		  type: String,
 		  default: '#333333'
 		},
-		// 字体大小
+		/**
+		 * @description 字体大小
+		 * @default 14
+		 */
 		size: {
 		  type: [String,Number],
 		  default: 14

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

@@ -1,6 +1,6 @@
 <template>
 	<view class="fu-numbox">
-		<view @click="_calcValue('minus')" class="fu-numbox__minus fu-numbox-btns" :style="{background: bgColor}">
+		<view @click="handleCalcValue('minus')" class="fu-numbox__minus fu-numbox-btns" :style="{background: bgColor}">
 			<slot name="minus">
 				<text class="fu-numbox--text" :class="{ 'fu-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
 			</slot>
@@ -11,11 +11,11 @@
 				class="fu-numbox__value" 
 				:style="[inputStyle]"
 				:disabled="inputDisabled" 
-				@focus="_onFocus" 
-				@blur="_onBlur" 
+				@focus="handleFocus" 
+				@blur="handleBlur" 
 				type="number" />
 		</slot>
-		<view @click="_calcValue('plus')" class="fu-numbox__plus fu-numbox-btns" :style="{background: bgColor}">
+		<view @click="handleCalcValue('plus')" class="fu-numbox__plus fu-numbox-btns" :style="{background: bgColor}">
 			<slot name="plus">
 				<text class="fu-numbox--text" :class="{ 'fu-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
 			</slot>
@@ -30,17 +30,19 @@
 	 * NumberBox 数字输入框
 	 * @description 此组件带加减按钮的数字输入框
 	 * @property {Number} value 输入框当前值
-	 * @property {Number} min 最小值
-	 * @property {Number} max 最大值
-	 * @property {Number} step 每次点击改变的间隔大小
-	 * @property {String} bgColor 背景色
+	 * @property {Number} min 设置最小值（默认 0）
+	 * @property {Number} max 设置最大值（默认 100）
+	 * @property {Number} step 每次点击改变的间隔大小（默认 1）
+	 * @property {String} bgColor 背景颜色
 	 * @property {String} color 字体颜色（前景色）
 	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 	 * @property {Boolean} inputDisabled = [true|false]  input是否为禁用状态
-	 * @property {String,Number} size 自定义字体大小  默认14
+	 * @property {String,Number} size 自定义字体大小（默认 14）
+	 * 
 	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
 	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
 	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 * @example <fu-number-box></fu-number-box>
 	 */
 	export default {
 		name: "FuNumberBox",
@@ -69,11 +71,11 @@
 			}
 		},
 		methods: {
-			_calcValue(type) {
+			handleCalcValue(type) {
 				if (this.disabled) {
 					return;
 				}
-				const scale = this._getDecimalScale();
+				const scale = this.handleDecimalScale();
 				let value = this.inputValue * scale;
 				let step = this.step * scale;
 				if (type === "minus") {
@@ -98,13 +100,13 @@
 
 				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
 				// Vue2 兼容
-				this.$emit("input", + this.inputValue);
+				this.$emit("input", +this.inputValue);
 				// Vue3 兼容
-				this.$emit("update:modelValue", + this.inputValue);
-				this.$emit("change", + this.inputValue);
+				this.$emit("update:modelValue", +this.inputValue);
+				this.$emit("change", +this.inputValue);
 			},
-			_getDecimalScale() {
-
+			
+			handleDecimalScale() {
 				let scale = 1;
 				// 浮点型
 				if (~~this.step !== this.step) {
@@ -112,7 +114,8 @@
 				}
 				return scale;
 			},
-			_onBlur(event) {
+			
+			handleBlur(event) {
 				this.$emit('blur', event)
 				let value = event.detail.value;
 				if (isNaN(value)) {
@@ -125,13 +128,14 @@
 				} else if (value < this.min) {
 					value = this.min;
 				}
-				const scale = this._getDecimalScale();
+				const scale = this.handleDecimalScale();
 				this.inputValue = value.toFixed(String(scale).length - 1);
 				this.$emit("input", +this.inputValue);
 				this.$emit("update:modelValue", +this.inputValue);
 				this.$emit("change", +this.inputValue);
 			},
-			_onFocus(event) {
+			
+			handleFocus(event) {
 				this.$emit('focus', event)
 			}
 		},
@@ -147,23 +151,18 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$box-height: 26px;
 	$bg: #f5f5f5;
 	$br: 2px;
 	$color: #333;
 
 	.fu-numbox {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
+		@include flex(row);
 	}
 
 	.fu-numbox-btns {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
+		@include flex(row);
 		align-items: center;
 		justify-content: center;
 		padding: 0 8px;
@@ -196,7 +195,6 @@
 	}
 
 	.fu-numbox--text {
-		// fix nvue
 		line-height: 20px;
 		font-size: 20px;
 		font-weight: 300;

package/components/fu-number-box/props.js

@@ -1,50 +1,76 @@
 export default {
 	props: {
-		// value 输入框当前值
+		/**
+		 * @description value / v-model 输入框当前值
+		 */
 		value: {
 			type: [Number, String],
-			default: 1
+			default: 0
 		},
 		modelValue: {
 			type: [Number, String],
-			default: 1
+			default: 0
 		},
-		// 最小值
+		/**
+		 * @description 设置最小值
+		 * @default 0
+		 */
 		min: {
 			type: Number,
 			default: 0
 		},
-		// 最大值
+		/**
+		 * @description 设置最大值
+		 * @default 100
+		 */
 		max: {
 			type: Number,
 			default: 100
 		},
-		// 每次点击改变的间隔大小
+		/**
+		 * @description 每次点击改变的间隔大小
+		 * @default 1
+		 */
 		step: {
 			type: Number,
 			default: 1
 		},
-		// 背景色
+		/**
+		 * @description 背景颜色
+		 * @default '#f5f5f5'
+		 */
 		bgColor: {
 			type: String,
 			default: '#f5f5f5'
 		},
-		// 字体颜色（前景色）
+		/**
+		 * @description 字体颜色（前景色）
+		 * @default '#333333'
+		 */
 		color: {
 			type: String,
 			default: '#333333'
 		},
-		// 是否为禁用状态
+		/**
+		 * @description 是否为禁用状态
+		 * @default false
+		 */
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		// 自定义字体大小  默认14
+		/**
+		 * @description 字体大小
+		 * @default 14
+		 */
 		size: {
 			type: [String,Number],
 			default: 14
 		},
-		// input是否为禁用状态
+		/**
+		 * @description input是否为禁用状态
+		 * @default false
+		 */
 		inputDisabled: {
 			type: Boolean,
 			default: false

package/components/fu-parse/fu-parse.vue

@@ -504,6 +504,5 @@
 	._select {
 		user-select: text;
 	}
-
 	/* #endif */
 </style>