fusions-ui 1.2.3 → 1.2.6

package/components/fu-rate/fu-rate.vue

@@ -1,19 +1,25 @@
 <template>
 	<view>
 		<view ref="fu-rate" class="fu-rate">
-			<view class="fu-rate__icon" :class="{'fu-cursor-not-allowed': disabled}"
-				:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
-				@touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
-				@mousemove.stop="mousemove" @mouseleave="mouseleave">
-				<fu-icons :color="inactiveColor" :size="size" :name="isFill ? 'star-fill' : 'star'" />
+			<view 
+				class="fu-rate__icon" 
+				:class="{'fu-cursor-not-allowed': disabled}"
+				:style="{ 'margin-right': marginNumber + 'px' }" 
+				v-for="(star, index) in stars" :key="index"
+				@touchstart.stop="touchstart" 
+				@touchmove.stop="touchmove" 
+				@mousedown.stop="mousedown"
+				@mousemove.stop="mousemove" 
+				@mouseleave="mouseleave">
+				<fu-icon :color="inactiveColor" :size="size" :name="isFill ? 'star-fill' : 'star'" />
 				<!-- #ifdef APP-NVUE -->
-				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="fu-rate__icon-on">
-					<fu-icons style="text-align: left;" :color="disabled? '#ccc': activeColor" :size="size" name="star-fill" />
+				<view class="fu-rate__icon-on" :style="{ width: star.activeWitch.replace('%', '') * size / 100 + 'px'}">
+					<fu-icon style="text-align: left;" :color="disabled? '#cccccc': activeColor" :size="size" name="star-fill" />
 				</view>
 				<!-- #endif -->
 				<!-- #ifndef APP-NVUE -->
-				<view :style="{ width: star.activeWitch}" class="fu-rate__icon-on">
-					<fu-icons :color="disabled? disabledColor: activeColor" :size="size" name="star-fill" />
+				<view class="fu-rate__icon-on" :style="{ width: star.activeWitch}">
+					<fu-icon :color="disabled? disabledColor: activeColor" :size="size" name="star-fill" />
 				</view>
 				<!-- #endif -->
 			</view>
@@ -42,7 +48,9 @@
 	 * @property {Boolean} readonly = [true|false] 	是否为只读状态，默认为 false
 	 * @property {Boolean} allowHalf = [true|false] 是否实现半星，默认为 false
 	 * @property {Boolean} touchable = [true|false] 是否支持滑动手势，默认为 true
+	 * 
 	 * @event {Function} change fuRate 的 value 改变时触发事件，e={value:Number}
+	 * @example <fu-rate></fu-rate>
 	 */
 	export default {
 		name: "FuRate",
@@ -91,16 +99,16 @@
 		},
 		mounted() {
 			setTimeout(() => {
-				this._getSize()
+				this.handleSize()
 			}, 100)
 			// #ifdef H5
-			this.PC = this.IsPC()
+			this.PC = this.isPC()
 			// #endif
 		},
 		methods: {
 			touchstart(e) {
 				// #ifdef H5
-				if (this.IsPC()) return
+				if (this.isPC()) return
 				// #endif
 				if (this.readonly || this.disabled) return
 				const {
@@ -108,18 +116,18 @@
 					screenX
 				} = e.changedTouches[0]
 				// 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
-				this._getRateCount(clientX || screenX)
+				this.handleRateCount(clientX || screenX)
 			},
 			touchmove(e) {
 				// #ifdef H5
-				if (this.IsPC()) return
+				if (this.isPC()) return
 				// #endif
 				if (this.readonly || this.disabled || !this.touchable) return
 				const {
 					clientX,
 					screenX
 				} = e.changedTouches[0]
-				this._getRateCount(clientX || screenX)
+				this.handleRateCount(clientX || screenX)
 			},
 
 			/**
@@ -127,23 +135,22 @@
 			 */
 			mousedown(e) {
 				// #ifdef H5
-				if (!this.IsPC()) return
+				if (!this.isPC()) return
 				if (this.readonly || this.disabled) return
 				const {
 					clientX,
 				} = e
 				this.userLastRate = this.valueSync
-				this._getRateCount(clientX)
+				this.handleRateCount(clientX)
 				this.userRated = true
 				// #endif
 			},
 			
 			mousemove(e) {
 				// #ifdef H5
-				if (!this.IsPC()) return
+				if (!this.isPC()) return
 				if (this.userRated) return
 				if (this.userMouseFristMove) {
-					// console.log('---mousemove----', this.valueSync);
 					this.userLastRate = this.valueSync
 					this.userMouseFristMove = false
 				}
@@ -151,13 +158,13 @@
 				const {
 					clientX,
 				} = e
-				this._getRateCount(clientX)
+				this.handleRateCount(clientX)
 				// #endif
 			},
 			
 			mouseleave(e) {
 				// #ifdef H5
-				if (!this.IsPC()) return
+				if (!this.isPC()) return
 				if (this.readonly || this.disabled || !this.touchable) return
 				if (this.userRated) {
 					this.userRated = false
@@ -168,7 +175,7 @@
 			},
 			
 			// #ifdef H5
-			IsPC() {
+			isPC() {
 				var userAgentInfo = navigator.userAgent;
 				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
 				var flag = true;
@@ -185,8 +192,8 @@
 			/**
 			 * 获取星星个数
 			 */
-			_getRateCount(clientX) {
-				this._getSize()
+			handleRateCount(clientX) {
+				this.handleSize()
 				const size = Number(this.size)
 				if (isNaN(size)) {
 					return new Error('size 属性只能设置为数字')
@@ -211,13 +218,13 @@
 
 				value = Math.max(0.5, Math.min(value, this.max))
 				this.valueSync = value
-				this._onChange()
+				this.handleChange()
 			},
 
 			/**
 			 * 触发动态修改
 			 */
-			_onChange() {
+			handleChange() {
 				this.$emit("input", this.valueSync);
 				this.$emit("update:modelValue", this.valueSync);
 				this.$emit("change", {
@@ -228,7 +235,7 @@
 			/**
 			 * 获取星星距离屏幕左侧距离
 			 */
-			_getSize() {
+			handleSize() {
 				// #ifndef APP-NVUE
 				uni.createSelectorQuery().in(this).select('.fu-rate').boundingClientRect().exec(ret => {
 					if (ret) {
@@ -252,19 +259,18 @@
 			},
 			modelValue(newVal) {
 				this.valueSync = Number(newVal);
-			},
+			}
 		}
 	};
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-rate {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex(row);
 		line-height: 1;
 		font-size: 0;
-		flex-direction: row;
 		/* #ifdef H5 */
 		cursor: pointer;
 		/* #endif */
@@ -277,7 +283,9 @@
 	}
 
 	.fu-rate__icon-on {
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 		position: absolute;
 		top: 0;
 		left: 0;

package/components/fu-rate/props.js

@@ -1,67 +1,101 @@
 export default {
 	props: {
+		/**
+		 * @description value / v-model 当前评分
+		 */
 		value: {
-			// 当前评分
 			type: [Number, String],
 			default: 0
 		},
 		modelValue: {
-			// 当前评分
 			type: [Number, String],
 			default: 0
 		},
+		/**
+		 * @description  星星的类型，是否镂空
+		 * @default true
+		 */
 		isFill: {
-			// 星星的类型，是否镂空
 			type: [Boolean, String],
 			default: true
 		},
+		/**
+		 * @description 星星选中状态颜色
+		 * @default '#ffca3e'
+		 */
 		activeColor: {
-			// 星星选中状态颜色
 			type: String,
 			default: "#ffca3e"
 		},
+		/**
+		 * @description 星星未选中的颜色
+		 * @default '#ececec'
+		 */
 		inactiveColor: {
-			// 星星未选中的颜色
 			type: String,
 			default: "#ececec"
 		},
+		/**
+		 * @description 星星禁用状态颜色
+		 * @default "#c0c0c0"
+		 */
 		disabledColor: {
-			// 星星禁用状态颜色
 			type: String,
 			default: "#c0c0c0"
 		},
+		/**
+		 * @description 星星的大小
+		 * @default 24
+		 */
 		size: {
-			// 星星的大小
 			type: [Number, String],
 			default: 24
 		},
+		/**
+		 * @description 最大评分
+		 * @default 5
+		 */
 		max: {
-			// 最大评分
 			type: [Number, String],
 			default: 5
 		},
+		/**
+		 * @description 星星的间距
+		 * @default 0
+		 */
 		margin: {
-			// 星星的间距
 			type: [Number, String],
 			default: 0
 		},
+		/**
+		 * @description 是否可点击
+		 * @default false
+		 */
 		disabled: {
-			// 是否可点击
 			type: [Boolean, String],
 			default: false
 		},
+		/**
+		 * @description 是否只读
+		 * @default false
+		 */
 		readonly: {
-			// 是否只读
 			type: [Boolean, String],
 			default: false
 		},
+		/**
+		 * @description 是否显示半星
+		 * @default false
+		 */
 		allowHalf: {
-			// 是否显示半星
 			type: [Boolean, String],
 			default: false
 		},
+		/**
+		 * @description 是否支持滑动手势
+		 * @default true
+		 */
 		touchable: {
-			// 是否支持滑动手势
 			type: [Boolean, String],
 			default: true
 		}

package/components/fu-read-more/fu-read-more.vue

@@ -9,7 +9,7 @@
 		<view class="fu-read-more__show-more__wrap" :class="{'fu-read-more__show-more': showMore}" :style="[innerShadowStyle]" @tap="toggleReadMore" v-if="isLongContent">
 			<text class="fu-read-more__show-more--text" :style="[fontStyle]">{{ showMore ? closeText : openText }}</text>
 			<view class="fu-read-more__show-more--icon" v-if="showMore || openIcon">
-				<fu-icons :name="showMore? closeIcon: openIcon? openIcon: ''" :size="fontStyle.fontSize" :color="fontStyle.color"></fu-icons>
+				<fu-icon :name="showMore? closeIcon: openIcon? openIcon: ''" :size="fontStyle.fontSize" :color="fontStyle.color" />
 			</view>
 		</view>
 	</view>
@@ -28,12 +28,18 @@
 	 * @property {String} openIcon 展开提示图标（默认 'down'） 
 	 * @property {String} closeIcon 收起提示图标（默认 'up'） 
 	 * @property {Object} shadowStyle 阴影样式
-	 * @property {String,Number} index 组件标识
+	 * @property {String,Number} index 组件标识 
+	 * @property {String} color 字体颜色（默认 '#e1534e'）
+	 * @property {String,Number} size 字体大小（默认 14）
+	 * 
+	 * @event {Function} open 点击展开时触发
+	 * @event {Function} close 点击收起时触发
+	 * @example <fu-read-more>...</fu-read-more>
 	 */
 	export default {
 		name: 'FuReadMore',
-		emits: ['open', 'close'],
 		mixins: [mpMixin, props],
+		emits: ['open', 'close'],
 		data() {
 			const elId = this.$fu.uuid();
 			return {
@@ -52,7 +58,6 @@
 			paramsChange() {
 				return `${this.open}-${this.showHeight}`
 			},
-
 			contentStyle() {
 				let style = {}
 				if (this.isLongContent && !this.showMore) {
@@ -66,7 +71,6 @@
 				}
 				return style
 			},
-
 			innerShadowStyle() {
 				let style = {}
 				// 折叠时才需要阴影样式
@@ -75,12 +79,11 @@
 				}
 				return style
 			},
-
 			fontStyle() {
-				let style = {}
-				// style.color = this.fontColorStyle ? this.fontColorStyle : '#dd524d'
-				// style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '28rpx'
-				return style
+				return {
+					color: this.color,
+					fontSize: this.$fu.addUnit(this.size)
+				}
 			}
 		},
 		mounted() {
@@ -144,6 +147,8 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-read-more {
 
 		&__content {
@@ -151,7 +156,9 @@
 			color: #333333;
 			line-height: 1.8;
 			text-align: left;
+			/* #ifndef APP-NVUE */
 			overflow: hidden;
+			/* #endif */
 			transition: all 0.3s linear;
 		}
 
@@ -161,18 +168,16 @@
 			margin-top: 20rpx;
 
 			&__wrap {
+				@include flex(row);
 				position: relative;
 				width: 100%;
-				display: flex;
-				flex-direction: row;
 				align-items: center;
 				justify-content: center;
 				padding-bottom: 26rpx;
 			}
 
 			&--text {
-				display: flex;
-				flex-direction: row;
+				@include flex(row);
 				align-items: center;
 				justify-content: center;
 				line-height: 1;

package/components/fu-read-more/props.js

@@ -1,50 +1,72 @@
 export default {
 	props: {
-	  // 默认占位高度
-	  showHeight: {
-	    type: Number,
-	    default: 400
-	  },
-	  // 显示收起按钮
-	  closeBtn: {
-	    type: Boolean,
-	    default: false
-	  },
-	  // 展开提示文字
-	  openText: {
-	    type: String,
-	    default: '展开阅读全文'
-	  },
-	  // 收起提示文字
-	  closeText: {
-	    type: String,
-	    default: '收起'
-	  },
-	  // 展开提示图标
-	  openIcon: {
-	    type: String,
-	    default: 'down'
-	  },
-	  // 收起提示图标
-	  closeIcon: {
-	    type: String,
-	    default: 'up'
-	  },
-	  // 阴影样式
-	  shadowStyle: {
-	    type: Object,
-	    default () {
-	    	return {
-	    		backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
-	    		paddingTop: "300rpx",
-	    		marginTop: "-300rpx"
-	    	}
-	    }
-	  },
-	  // 组件标识
-	  index: {
-	    type: [String,Number],
-	    default: ''
-	  }
+		// 默认占位高度
+		showHeight: {
+			type: Number,
+			default: 400
+		},
+		// 显示收起按钮
+		closeBtn: {
+			type: Boolean,
+			default: false
+		},
+		// 展开提示文字
+		openText: {
+			type: String,
+			default: '展开阅读全文'
+		},
+		// 收起提示文字
+		closeText: {
+			type: String,
+			default: '收起'
+		},
+		// 展开提示图标
+		openIcon: {
+			type: String,
+			default: 'down'
+		},
+		/**
+		 * @description 收起提示图标
+		 */
+		closeIcon: {
+			type: String,
+			default: 'up'
+		},
+		/**
+		 * @description 阴影样式
+		 */
+		shadowStyle: {
+			type: Object,
+			default () {
+				return {
+					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+					paddingTop: "300rpx",
+					marginTop: "-300rpx"
+				}
+			}
+		},
+		/**
+		 * @description 组件标识
+		 */
+		index: {
+			type: [String, Number],
+			default: ''
+		},
+		/**
+		 * @description 字体颜色
+		 * @default '#e1534e'
+		 */
+		color: {
+			type: String,
+			default: '#e1534e'
+		},
+		/**
+		 * @description 字体大小
+		 * @default 14
+		 */
+		size: {
+			type: [String,Number],
+			default: 14
+		}
 	}
 }

package/components/fu-ribbon/fu-ribbon.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="fu-ribbon" :style="[modeStyle]">
+	<view class="fu-ribbon" :class="customClass" :style="[modeStyle, $fu.addStyle(customStyle)]">
 		<span class="fu-ribbon__span" :style="[itemStyle, afterStyle]">
 			<slot></slot>
 		</span>
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+	import mixin from '../../libs/mixin/mixin.js'
 	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import props from './props.js'
 	/**
@@ -18,16 +19,14 @@
 	 * @property {String} bgColor 背景色
 	 * @property {String,Number} size 字体大小（默认 10）
 	 * @property {String} color 字体颜色
+	 * @property {String} customClass 定义需要用到的外部样式
+	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
 	 * @template <fu-ribbon mode="left" bgColor="red">审核中</fu-ribbon>
 	 */
 	export default {
 		name: "FuRibbon",
-		mixins: [mpMixin, props],
-		data() {
-			return {
-
-			};
-		},
+		mixins: [mixin, mpMixin, props],
 		computed: {
 			modeStyle() {
 				return {
@@ -60,7 +59,9 @@
 		position: absolute;
 		top: -5px;
 		z-index: 1;
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 		width: 75px;
 		height: 75px;
 		text-align: right;

package/components/fu-ribbon/props.js

@@ -1,21 +1,32 @@
 export default {
 	props: {
-		// 位置类型  left左侧  right右侧
+		/**
+		 * @description 位置类型
+		 * @values 'left' - 左侧, 'right' - 右侧
+		 * @default 'right'
+		 */
 		mode: {
 			type: String,
 			default: 'right'
 		},
-		// 背景色
+		/**
+		 * @description 背景颜色
+		 */
 		bgColor: {
 			type: String,
 			default: ''
 		},
-		// 字体大小
+		/**
+		 * @description 字体大小
+		 * @default 10
+		 */
 		size: {
 			type: [String,Number],
 			default: 10
 		},
-		// 字体颜色
+		/**
+		 * @description 字体颜色
+		 */
 		color: {
 			type: String,
 			default: ''