fusions-ui 1.2.4 → 1.2.7

package/components/{fu-nav-bar/fu-nav-bar.vue → fu-navbar/fu-navbar.vue}

@@ -3,29 +3,29 @@
 		<view :class="{ 'fu-navbar--fixed': fixed, 'fu-navbar--shadow': shadow, 'fu-navbar--border': border }" :style="{ 'background': themeBgColor }" class="fu-navbar__content">
 			<status-bar v-if="statusBar" />
 			<view class="fu-navbar__header" :style="{ color: themeColor, height: navbarHeight}">
-				<view @tap="onClickLeft" class="fu-navbar__header-btns fu-navbar__header-btns-left" :style="{width: leftIconWidth}">
+				<view @tap="handleClickLeft" class="fu-navbar__header-btns fu-navbar__header-btns-left" :style="{width: leftIconWidth}">
 					<slot name="left">
-						<view class="fu-navbar__content_view" v-if="leftIcon.length > 0">
-							<fu-icons :color="themeColor" :name="leftIcon" size="24" />
+						<view class="fu-navbar__content_view" v-if="leftIcon">
+							<fu-icon :color="themeColor" :name="leftIcon" size="24" />
 						</view>
-						<view class="fu-navbar-btn-text" :class="{ 'fu-navbar-btn-icon-left': !leftIcon.length > 0 }" v-if="leftText.length">
+						<view class="fu-navbar-btn-text" :class="{ 'fu-navbar-btn-icon-left': !leftIcon }" v-if="leftText">
 							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
 						</view>
 					</slot>
 				</view>
-				<view class="fu-navbar__header-container" :style="{'padding': '0 ' + paddingTitle + 'px'}" @tap="onClickTitle">
+				<view class="fu-navbar__header-container" :style="{'padding': '0 ' + paddingTitle + 'px'}" @tap="handleClickTitle">
 					<slot>
-						<view class="fu-navbar__header-container-inner" v-if="title.length>0">
+						<view class="fu-navbar__header-container-inner" v-if="title">
 							<text class="fu-nav-bar-text fu-ellipsis-1" :style="{color: themeColor }">{{ title }}</text>
 						</view>
 					</slot>
 				</view>
-				<view class="fu-navbar__header-btns fu-navbar__header-btns-right" :style="{width:rightIconWidth}" @click="onClickRight">
+				<view class="fu-navbar__header-btns fu-navbar__header-btns-right" :style="{width:rightIconWidth}" @click="handleClickRight">
 					<slot name="right">
-						<view v-if="rightIcon.length">
-							<fu-icons :color="themeColor" :name="rightIcon" size="24" />
+						<view v-if="rightIcon">
+							<fu-icon :color="themeColor" :name="rightIcon" size="24" />
 						</view>
-						<view class="fu-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+						<view class="fu-navbar-btn-text" v-if="rightText && !rightIcon">
 							<text class="fu-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
 						</view>
 					</slot>
@@ -65,17 +65,19 @@
 	 * @property {String,Number} leftWidth 导航栏左侧宽度（默认 60）
 	 * @property {String,Number} rightWidth 导航栏右侧宽度 （默认60）
 	 * @property {String} paddingTitle 导航栏左右内间距（默认 10）
+	 * 
 	 * @event {Function} clickLeft 左侧按钮点击时触发
 	 * @event {Function} clickRight 右侧按钮点击时触发
 	 * @event {Function} clickTitle 中间标题点击时触发
+	 * @example <fu-navbar :title="title"></fu-navbar>
 	 */
 	export default {
-		name: 'FuNavBar',
+		name: 'FuNavbar',
 		components: {
 			statusBar
 		},
-		emits: ['clickLeft', 'clickRight', 'clickTitle'],
 		mixins: [mpMixin, props],
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
 		computed: {
 			themeBgColor() {
 				if (this.dark) {
@@ -83,10 +85,10 @@
 					if (this.bgColor) {
 						return this.bgColor
 					} else {
-						return this.dark ? '#333' : '#FFF'
+						return this.dark ? '#333333' : '#FFFFFF'
 					}
 				}
-				return this.bgColor || '#FFF'
+				return this.bgColor || '#FFFFFF'
 			},
 			themeColor() {
 				if (this.dark) {
@@ -115,15 +117,18 @@
 			}
 		},
 		methods: {
-			onClickLeft(e) {
+			// 左侧按钮点击时触发
+			handleClickLeft(e) {
 				this.$emit("clickLeft", e);
 			},
-
-			onClickRight(e) {
+			
+			// 右侧按钮点击时触发
+			handleClickRight(e) {
 				this.$emit("clickRight", e);
 			},
-
-			onClickTitle(e) {
+			
+			// 中间标题点击时触发
+			handleClickTitle(e) {
 				this.$emit("clickTitle", e);
 			}
 		}
@@ -131,6 +136,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$nav-height: 44px;
 	
 	.fu-nvue-fixed {
@@ -158,32 +164,25 @@
 	}
 
 	.fu-navbar-btn-text {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
+		@include flex(column);
 		justify-content: flex-start;
 		align-items: center;
 		line-height: 12px;
 	}
 
 	.fu-navbar__header {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex(row);
 		padding: 0 10px;
-		flex-direction: row;
 		height: $nav-height;
 		font-size: 12px;
 	}
 
 	.fu-navbar__header-btns {
+		@include flex(row);
 		/* #ifndef APP-NVUE */
 		overflow: hidden;
-		display: flex;
 		/* #endif */
 		flex-wrap: nowrap;
-		flex-direction: row;
 		width: 120rpx;
 		justify-content: center;
 		align-items: center;
@@ -193,42 +192,36 @@
 	}
 
 	.fu-navbar__header-btns-left {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		width: 120rpx;
 		justify-content: flex-start;
 		align-items: center;
 	}
 
 	.fu-navbar__header-btns-right {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
+		@include flex(row);
 		justify-content: flex-end;
 		align-items: center;
 	}
 
 	.fu-navbar__header-container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex;
 		flex: 1;
 		padding: 0 10px;
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 	}
 
 	.fu-navbar__header-container-inner {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex(row);
 		flex: 1;
-		flex-direction: row;
 		align-items: center;
 		justify-content: center;
 		font-size: 12px;
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
+		/* #endif */
 	}
 
 
@@ -262,8 +255,8 @@
 	}
 
 	.fu-ellipsis-1 {
-		overflow: hidden;
 		/* #ifndef APP-NVUE */
+		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		/* #endif */

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

@@ -53,9 +53,9 @@
 </template>
 
 <script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import NoticeRow from './notice-row.vue'
 	import NoticeColumn from './notice-column.vue'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import props from './props.js'
 	/**
 	 * NoticeBar 通知栏
@@ -79,20 +79,20 @@
 	 * @property {String} color 字体颜色
 	 * @property {String,Number} size 字体大小（默认 14）
 	 * @property {String} bgColor 背景颜色
+	 * 
+	 * @event {Function} click 点击通知栏文字触发
+	 * @event {Function} clickRight 点击右侧图标触发
+	 * @event {Function} end 一个周期滚动结束触发（仅mode=column时生效）
+	 * @example <fu-notice-bar :list="list"></fu-notice-bar>
 	 */
 	export default {
 		name:"FuNoticeBar",
-		emits: ['click', 'clickLeft', 'clickRight', 'end'],
+		emits: ['click', 'clickRight', 'end'],
 		mixins: [mpMixin, props],
 		components: {
 			NoticeRow,
 			NoticeColumn
 		},
-		data() {
-			return {
-				
-			};
-		},
 		computed: {
 		  // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
 		  showNotice() {
@@ -123,6 +123,8 @@
 
 <style lang="scss" scoped>
 	.fu-notice-bar {
-	  overflow: hidden;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
 	}
 </style>

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

@@ -2,21 +2,22 @@
 	<view class="fu-column-notice" :style="[noticeStyle]" @tap="handleClick" v-if="show">
 		<!-- 左图标 -->
 		<view class="fu-column-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>
-		
+
 		<!-- 滚动显示内容 -->
-		<swiper class="fu-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular :autoplay="autoPlay" :interval="duration" @change="change">
-		  <swiper-item v-for="(item, index) in list" :key="index" class="fu-column-notice__swiper__item">
-		    <view class="fu-column-notice__swiper__content fu-text-ellipsis" :style="[textStyle()]">
-				{{item}}
-			</view>
-		  </swiper-item>
+		<swiper class="fu-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular
+			:autoplay="autoPlay" :interval="duration" @change="change">
+			<swiper-item v-for="(item, index) in list" :key="index" class="fu-column-notice__swiper__item">
+				<view class="fu-column-notice__swiper__content fu-text-ellipsis" :style="[textStyle()]">
+					{{item}}
+				</view>
+			</swiper-item>
 		</swiper>
-		
+
 		<!-- 右图标 -->
 		<view class="fu-column-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>
 </template>
@@ -42,104 +43,160 @@
 	 * @property {String} fontColor  字体颜色
 	 * @property {String,Number} fontSize 字体大小（默认 14）
 	 * @property {String} bgColor 背景颜色
+	 * 
+	 * @event {Function} click 点击通知栏文字触发
+	 * @event {Function} clickRight 点击右侧图标触发
+	 * @event {Function} end 一个周期滚动结束触发
+	 * @example <notice-column :list="list"></notice-column>
 	 */
 	export default {
-		name:"NoticeColumn",
+		name: "NoticeColumn",
 		mixins: [mpMixin, mixin],
 		emits: ['click', 'clickRight', 'end'],
 		props: {
-			// 显示的内容
+			/**
+			 * @description 显示的内容
+			 */
 			list: {
-			  type: Array,
-			  default() {
-				return []
-			  }
+				type: Array,
+				default () {
+					return []
+				}
 			},
-			// 是否显示
+			/**
+			 * @description 是否显示
+			 * @default true
+			 */
 			show: {
-			  type: Boolean,
-			  default: true
+				type: Boolean,
+				default: true
 			},
-			// 滚动方向
-			// row -> 水平滚动 column -> 垂直滚动
+			/**
+			 * @description 滚动方向
+			 * @values @values 'row' - 水平滚动, 'column' - 垂直滚动
+			 * @default 'row'
+			 */
 			mode: {
-			  type: String,
-			  default: 'row'
+				type: String,
+				default: 'row'
 			},
-			// 是否显示左边图标
+			/**
+			 * @description 是否显示左边图标
+			 * @default true
+			 */
 			leftIcon: {
-			  type: Boolean,
-			  default: true
+				type: Boolean,
+				default: true
 			},
-			// 左边图标的名称
+			/**
+			 * @description 左边图标的名称
+			 * @default 'volume'
+			 */
 			leftIconName: {
-			  type: String,
-			  default: 'volume'
+				type: String,
+				default: 'volume'
 			},
-			// 左边图标的大小
+			/**
+			 * @description 左边图标的大小
+			 * @default 20
+			 */
 			leftIconSize: {
-			  type: Number,
-			  default: 20
+				type: Number,
+				default: 20
 			},
-			// 左边图标的颜色
+			/**
+			 * @description 左边图标的颜色
+			 * @default '#333333'
+			 */
 			leftIconColor: {
 				type: String,
 				default: '#333333'
 			},
-			// 是否显示右边的图标
+			/**
+			 * @description 是否显示右边的图标
+			 * @default false
+			 */
 			rightIcon: {
-			  type: Boolean,
-			  default: false
+				type: Boolean,
+				default: false
 			},
-			// 右边图标的名称
+			/**
+			 * @description 右边图标的名称
+			 * @default 'right'
+			 */
 			rightIconName: {
-			  type: String,
-			  default: 'right'
+				type: String,
+				default: 'right'
 			},
-			// 右边图标的大小
+			/**
+			 * @description 右边图标的大小
+			 * @default 20
+			 */
 			rightIconSize: {
-			  type: [String,Number],
-			  default: 26
+				type: [String, Number],
+				default: 20
 			},
-			// 右边图标的颜色
+			/**
+			 * @description 右边图标的颜色
+			 * @default '#333333'
+			 */
 			rightIconColor: {
 				type: String,
 				default: '#333333'
 			},
-			// 圆角
+			/**
+			 * @description 设置圆角
+			 */
 			radius: {
-			  type: Number,
-			  default: 0
+				type: Number,
+				default: 0
 			},
-			// 内边距
+			/**
+			 * @description 内边距
+			 * @default '9px 12px'
+			 */
 			padding: {
-			  type: String,
-			  default: '9px 12px'
+				type: String,
+				default: '9px 12px'
 			},
-			// 自动播放
+			/**
+			 * @description 自动播放
+			 * @default true
+			 */
 			autoPlay: {
-			  type: Boolean,
-			  default: true
+				type: Boolean,
+				default: true
 			},
-			// 滚动周期
+			/**
+			 * @description 滚动周期
+			 * @default 2000
+			 */
 			duration: {
-			  type: Number,
-			  default: 2000
+				type: Number,
+				default: 2000
 			},
-			// 背景颜色
+			/**
+			 * @description 背景颜色
+			 */
 			bgColor: {
-			  type: String,
-			  default: ''
+				type: String,
+				default: ''
 			},
-			// 字体颜色
+			/**
+			 * @description 字体颜色
+			 * @default '#333333'
+			 */
 			fontColor: {
-			  type: String,
-			  default: ''
+				type: String,
+				default: '#333333'
 			},
-			// 字体大小
+			/**
+			 * @description 字体大小
+			 * @default 14
+			 */
 			fontSize: {
-			  type: [String,Number],
-			  default: 14
+				type: [String, Number],
+				default: 14
 			}
 		},
 		data() {
@@ -149,31 +206,31 @@
 		},
 		computed: {
 			textStyle() {
-			  return (type) => {
-			    let style = {
-					color: this.fontColor || '',
-					fontSize: this.$fu.addUnit(this.fontSize)
-				};
-			    return style
-			  }
+				return (type) => {
+					let style = {
+						color: this.fontColor || '',
+						fontSize: this.$fu.addUnit(this.fontSize)
+					};
+					return style
+				}
 			},
 			noticeStyle() {
-			  let style = {
-				  background: this.bgColor || 'transparent'
-			  };
-			  if (this.padding) style.padding = this.padding
-			  return style
+				let style = {
+					background: this.bgColor || 'transparent'
+				};
+				if (this.padding) style.padding = this.padding
+				return style
 			},
 			swiperStyle() {
-			  let style = {}
-			  style.height = this.fontSize ? this.$fu.addUnit(this.fontSize + 6) : '16px';
-			  style.lineHeight = style.height;
-			  return style
+				let style = {}
+				style.height = this.fontSize ? this.$fu.addUnit(this.fontSize + 6) : '16px';
+				style.lineHeight = style.height;
+				return style
 			},
 			// 标记是否为垂直
 			vertical() {
-			  if (this.mode === 'row') return false
-			  else return true
+				if (this.mode === 'row') return false
+				else return true
 			}
 		},
 		methods: {
@@ -181,12 +238,12 @@
 			handleClick() {
 				this.$emit('click', this.index)
 			},
-			
+
 			// 点击右边图标
 			handleClickRight() {
 				this.$emit('clickRight', this.index)
 			},
-			
+
 			// 切换事件
 			change(e) {
 				let index = e.detail.current;
@@ -200,49 +257,57 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-	
+	@import '../../libs/style/components.scss';
+
 	.fu-column-notice {
-	  @include flex(row);
-	  align-items: center;
-	  justify-content: center;
-	  flex-wrap: nowrap;
-	  overflow: hidden;
-	  
-	  &__swiper {
-	    height: auto;
-	    flex: 1;
-	    @include flex(row);
-	    align-items: center;
-	    margin-left: 6px;
-	    
-	    &__item {
-	      @include flex(row);
-	      overflow: hidden;
-	    }
-	    
-	    &__content {
-	      overflow: hidden;
-	    }
-	  }
-	  
-	  &__icon {
-	    &--left {
-	      display: inline-flex;
-	      align-items: center;
-	    }
-	    
-	    &--right {
-	      margin-left: 6px;
-	      display: inline-flex;
-	      align-items: center;
-	    }
-	  }
+		@include flex(row);
+		align-items: center;
+		justify-content: center;
+		flex-wrap: nowrap;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+
+		&__swiper {
+			height: auto;
+			flex: 1;
+			@include flex(row);
+			align-items: center;
+			margin-left: 6px;
+
+			&__item {
+				@include flex(row);
+				/* #ifndef APP-NVUE */
+				overflow: hidden;
+				/* #endif */
+			}
+
+			&__content {
+				/* #ifndef APP-NVUE */
+				overflow: hidden;
+				/* #endif */
+			}
+		}
+
+		&__icon {
+			&--left {
+				display: inline-flex;
+				align-items: center;
+			}
+
+			&--right {
+				margin-left: 6px;
+				display: inline-flex;
+				align-items: center;
+			}
+		}
 	}
-	
+
 	.fu-text-ellipsis {
+		/* #ifndef APP-NVUE */
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+		/* #endif */
 	}
 </style>