fusions-ui 1.2.4 → 1.2.6

package/components/fu-form-item/props.js

@@ -1,41 +1,63 @@
 export default {
 	props: {
-		// 表单校验规则
+		/**
+		 * @description 表单校验规则
+		 * @default null
+		 */
 		rules: {
 			type: Array,
 			default () {
-				return null;
+				return null
 			}
 		},
-		// 表单域的属性名，在使用校验规则时必填
+		/**
+		 * @description 表单域的属性名，在使用校验规则时必填
+		 */
 		prop: {
 			type: [String, Array],
 			default: ''
 		},
+		/**
+		 * @description 是否必填，左边显示红色"*"号
+		 * @default false
+		 */
 		required: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		 * @description 输入框左边的文字提示
+		 */
 		label: {
 			type: String,
 			default: ''
 		},
-		// label的宽度
+		/**
+		 * @description label的宽度
+		 */
 		labelWidth: {
 			type: [String, Number],
 			default: ''
 		},
-		// label 居中方式，默认 left 取值 left/center/right
+		/**
+		 * @description label 居中方式
+		 * @values 'left' - 左对齐， 'center' - 居中, 'right' - 右对齐
+		 * @default 'left'
+		 */
 		labelAlign: {
 			type: String,
-			default: ''
+			default: 'left'
 		},
-		// 强制显示错误信息
+		/**
+		 * @description 强制显示错误信息
+		 */
 		message: {
 			type: [String, Boolean],
 			default: ''
 		},
-		// label的文字的位置，优先级高于fu-form组件中的labelPosition
+		/**
+		 * @description label的文字的位置，优先级高于fu-form组件中的labelPosition
+		 */
 		labelPosition: {
 			type: String,
 			default: ''

package/components/fu-grid/fu-grid.vue

@@ -1,6 +1,11 @@
 <template>
 	<view class="fu-grid-wrap">
-		<view :id="elId" ref="fu-grid" class="fu-grid" :class="{ 'fu-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
+		<view 
+			:id="elId" 
+			ref="fu-grid" 
+			class="fu-grid" 
+			:class="{ 'fu-grid--border': showBorder }" 
+			:style="{ 'border-left-color': borderColor}">
 			<slot />
 		</view>
 	</view>
@@ -43,17 +48,15 @@
 			this.children = [];
 		},
 		mounted() {
-			this.$nextTick(() => {
-				this.init()
-			})
+			this.init()
 		},
 		methods: {
 			init() {
-				setTimeout(() => {
+				this.$nextTick(() => {
 					this.getSize((width) => {
 						this.children.forEach(item => item.width = width)
 					})
-				}, 50)
+				})
 			},
 			
 			change(e) {
@@ -79,36 +82,32 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	$border-color: #D2D2D2;
+	
 	.fu-grid-wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex(column);
 		flex: 1;
-		flex-direction: column;
 		/* #ifdef H5 */
 		width: 100%;
 		/* #endif */
 	}
 
 	.fu-grid {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		// flex: 1;
-		flex-direction: row;
+		@include flex(row);
 		flex-wrap: wrap;
 	}
 
 	.fu-grid--border {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-left-color: #d6d6d6;
+		border-left-color: $border-color;
 		border-left-style: solid;
 		border-left-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
 		z-index: 1;
-		border-left: 1px #d6d6d6 solid;
+		border-left: 1px solid $border-color;
 		/* #endif */
 	}
 </style>

package/components/fu-grid/props.js

@@ -1,26 +1,41 @@
 export default {
 	props: {
-		// 每列显示个数
+		/**
+		 * @description 每列显示个数
+		 * @default 3
+		 */
 		column: {
 			type: [Number],
 			default: 3
 		},
-		// 是否显示边框（默认 true）
+		/**
+		 * @description 是否显示边框
+		 * @default true
+		 */
 		showBorder: {
 			type: Boolean,
 			default: true
 		},
-		// 边框颜色
+		/**
+		 * @description 边框颜色
+		 * @default '#d6d6d6'
+		 */
 		borderColor: {
 			type: String,
 			default: '#d6d6d6'
 		},
-		// 是否正方形显示（默认 true）
+		/**
+		 * @description 是否正方形显示
+		 * @default true
+		 */
 		square: {
 			type: Boolean,
 			default: true
 		},
-		// 点击背景是否高亮（默认 true）
+		/**
+		 * @description 点击背景是否高亮
+		 * @default true
+		 */
 		highlight: {
 			type: Boolean,
 			default: true

package/components/fu-grid-item/fu-grid-item.vue

@@ -1,8 +1,10 @@
 <template>
 	<view class="fu-grid-item" v-if="width" :style="itemStyle">
-		<view :class="{ 'fu-grid-item--border': showBorder,  'fu-grid-item--border-top': showBorder && index < column, 'fu-highlight': highlight }"
-		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
-		 class="fu-grid-item__box" @click="onClick">
+		<view 
+			class="fu-grid-item__box" 
+			:class="{ 'fu-grid-item--border': showBorder,  'fu-grid-item--border-top': showBorder && index < column, 'fu-highlight': highlight }"
+			:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
+			@click="onClick">
 			<slot />
 		</view>
 	</view>
@@ -33,40 +35,26 @@
 				showBorder: true,
 				square: true,
 				highlight: true,
-				left: 0,
-				top: 0,
 				openNum: 2,
-				width: 0,
-				borderColor: '#d6d6d6'
+				width: 0
 			}
 		},
 		created() {
-			this.column = this.grid.column
-			this.showBorder = this.grid.showBorder
-			this.square = this.grid.square
-			this.highlight = this.grid.highlight
-			this.top = this.hor === 0 ? this.grid.hor : this.hor
-			this.left = this.ver === 0 ? this.grid.ver : this.ver
-			this.borderColor = this.grid.borderColor
+			this.column = this.grid.column;
+			this.showBorder = this.grid.showBorder;
+			this.square = this.grid.square;
+			this.highlight = this.grid.highlight;
+			this.borderColor = this.grid.borderColor;
 			this.grid.children.push(this)
 			this.grid.init()
 			this.width = this.grid.width
 		},
-		beforeDestroy() {
-			this.grid.children.forEach((item, index) => {
-				if (item === this) {
-					this.grid.children.splice(index, 1)
-				}
-			})
-		},
 		computed: {
 			itemStyle() {
 				const style = {
-					width: this.width
+					width: this.width,
+					...(this.square && {height: this.width})
 				};
-				if(this.square) {
-					style.height = this.width;
-				}
 				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
 			}
 		},
@@ -78,15 +66,25 @@
 					}
 				})
 			}
+		},
+		beforeDestroy() {
+			this.grid.children.forEach((item, index) => {
+				if (item === this) {
+					this.grid.children.splice(index, 1)
+				}
+			})
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	$border-color: #D2D2D2;
+	
 	.fu-grid-item {
+		@include flex;
 		/* #ifndef APP-NVUE */
 		height: 100%;
-		display: flex;
 		/* #endif */
 		/* #ifdef H5 */
 		cursor: pointer;
@@ -94,46 +92,44 @@
 	}
 
 	.fu-grid-item__box {
+		@include flex(column);
 		/* #ifndef APP-NVUE */
-		display: flex;
 		width: 100%;
 		/* #endif */
 		position: relative;
 		flex: 1;
-		flex-direction: column;
 	}
 
 	.fu-grid-item--border {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-bottom-color: #D2D2D2;
+		border-bottom-color: $border-color;
 		border-bottom-style: solid;
 		border-bottom-width: 0.5px;
-		border-right-color: #D2D2D2;
+		border-right-color: $border-color;
 		border-right-style: solid;
 		border-right-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
 		z-index: 0;
-		border-bottom: 1px #D2D2D2 solid;
-		border-right: 1px #D2D2D2 solid;
+		border-bottom: 1px solid $border-color;
+		border-right: 1px solid $border-color;
 		/* #endif */
 	}
 	
 	.fu-grid-item--border-top {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-top-color: #D2D2D2;
+		border-top-color: $border-color;
 		border-top-style: solid;
 		border-top-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
-		border-top: 1px #D2D2D2 solid;
+		border-top: 1px solid $border-color;
 		z-index: 0;
 		/* #endif */
 	}
 
-
 	.fu-highlight:active {
 		background-color: #f1f1f1;
 	}

package/components/fu-grid-item/props.js

@@ -1,16 +1,24 @@
 export default {
 	props: {
-		// 是否有点击效果
+		/**
+		 * @description 是否有点击效果
+		 * @default true
+		 */
 		highlight: {
 			type: Boolean,
 			default: true
 		},
-		// 定义背景色（默认 transparent）
+		/**
+		 * @description 定义背景色
+		 * @default 'transparent'
+		 */
 		bgColor: {
 			type: String,
 			default: 'transparent'
 		},
-		// 索引
+		/**
+		 * @description 索引
+		 */
 		index: {
 			type: Number,
 			default: 0

package/components/fu-icon/fu-icon.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="fu-icon" @click="handleClick">
+		<image class="fu-icon__img" :src="name" :mode="imgMode" :style="[imgStyle]" v-if="isImg"></image>
+		
+		<!-- #ifdef APP-NVUE -->
+		<text class="fu-icon__icon" :style="iconStyle" v-else>{{ fucode }}</text>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<text class="fu-icon__icon" :style="iconStyle" :class="['fu-icon-' + name]" v-else>
+			<slot></slot>
+		</text>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import props from './props.js'
+	import icon from './icon.js'
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './icon.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "fusionsicon",
+		'src': "url('" + iconUrl + "')"
+	});
+	// #endif
+	/**
+	 * Icon 图标
+	 * @description 此组件用于展示 icon 图标
+	 * @property {String} name 图标名称，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {Number} size 图标大小（默认 16）
+	 * @property {String} fontFamily 自定义图标
+	 * 
+	 * @event {Function} click 点击图标触发
+	 * @example <fu-icon name="success" size="40" color="#ff0000"></fu-icon>
+	 */
+	export default {
+		name:"FuIcon",
+		emits:['click'],
+		mixins: [mpMixin, props],
+		data() {
+			return {
+				icon: icon.glyphs
+			}
+		},
+		computed: {
+			fucode() {
+				let code = this.icon.find(v => v.font_class === this.name)
+				if(code){
+					return unescape(`%u${code.unicode}`)
+				}
+				return ''
+			},
+			iconSize() {
+				return this.$fu.addUnit(this.size)
+			},
+			iconStyle() {
+				return {
+					color: this.color,
+					fontSize: this.iconSize,
+					...(this.fontFamily && {fontFamily: this.fontFamily})
+				}
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg() {
+				return this.name.indexOf('/') !== -1
+			},
+			imgStyle() {
+				// 如果设置 width 和 height 属性，则优先使用，否则使用 size 属性
+				return {
+					width: this.width? this.$fu.addUnit(this.width): this.$fu.addUnit(this.size),
+					height: this.height? this.$fu.addUnit(this.height): this.$fu.addUnit(this.size)
+				}
+			}
+		},
+		methods: {
+			// 图标点击事件
+			handleClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	/* #ifndef APP-NVUE */
+	@import './icon.css';
+	@font-face {
+		font-family: fusionsicon;
+		src: url('./icon.ttf') format('truetype');
+	}
+	/* #endif */
+	
+	.fu-icon {
+		@include flex;
+		align-items: center;
+		
+		&__icon {
+			font-family: fusionsicon;
+			text-decoration: none;
+			text-align: center;
+		}
+	}
+</style>