fusions-ui 1.2.6 → 1.2.8

package/components/fu-progress/fu-progress.vue

@@ -1,292 +0,0 @@
-<template>
-	<view class="fu-progress">
-		<!-- 线形 -->
-		<view class="fu-line-progress" v-if="mode === 'line'">
-			<view ref="fu-line-progress__background" class="fu-line-progress__background" :style="[lineStyle]"></view>
-			<view class="fu-line-progress__line" :style="[progressStyle]">
-				<slot>
-					<text class="fu-line-progress__text" v-if="showPercent && percent >= 10">{{ innserPercentage + '%' }}</text>
-				</slot>
-			</view>
-		</view>
-
-		<!-- 圆形 -->
-		<view class="fu-circle-progress" :style="{width: widthPx + 'px', height: widthPx + 'px'}"
-			v-if="mode === 'circle'">
-			<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
-			<!-- 默认圆环 -->
-			<canvas 
-				:id="elBgId" 
-				:canvas-id="elBgId" 
-				class="fu-circle-progress__canvas-bg" 
-				:style="{width: widthPx + 'px', height: widthPx + 'px'}">
-			</canvas>
-			<!-- 进度圆环 -->
-			<canvas 
-				:id="elId" 
-				:canvas-id="elId" 
-				class="fu-circle-progress__canvas" 
-				:style="{width: widthPx + 'px', height: widthPx + 'px'}">
-			</canvas>
-			<view class="fu-circle-progress__content">
-				<slot v-if="$slots.default || $slots.$default"></slot>
-				<view class="fu-circle-progress__content__percent" v-else-if="showPercent">{{ percent + '%' }}</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * Progress 进度条
-	 * @description 此组件展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
-	 * @property {String} mode = [line|circle] 进度条类型
-	 * 	@value line 线形
-	 * 	@value circle 圆形
-	 * @property {String} activeColor 激活部分的颜色（默认 '#2979ff'）
-	 * @property {String} inactiveColor 未激活部分的颜色（默认 '#f0f0f0'）
-	 * @property {String,Number} percent 进度百分比，数值（默认 0）
-	 * @property {Boolean} showPercent = [true|false] 是否在进度条内部显示百分比的值（默认 true）
-	 * @property {String,Number} height 进度条的高度，单位px（仅mode = line有效）
-	 * @property {String,Number} size 进度条大小（仅mode = circle有效）
-	 * @property {String,Number} borderWidth 进度条圆环宽度（仅mode = circle有效）
-	 * @property {Number} duration 圆环执行动画的时间，单位 ms（仅mode = circle有效）
-	 * 
-	 * @example <fu-progress :percent="percent"></fu-progress>
-	 */
-	export default {
-		name: "FuProgress",
-		mixins: [mpMixin, mixin, props],
-		data() {
-			const elBgId = this.$fu.uuid();
-			const elId = this.$fu.uuid();
-			return {
-				// 线形
-				lineWidth: 0,
-				// 圆形
-				elBgId: elBgId,
-				elId: elId,
-				// 活动圆上下文
-				progressContext: null,
-				// 转换成px为单位的背景宽度
-				widthPx: uni.upx2px(this.size || 200),
-				// 转换成px为单位的圆环宽度
-				borderWidthPx: uni.upx2px(this.borderWidth || 14),
-				// canvas画圆的起始角度，默认为-90度，顺时针
-				startAngle: -90 * Math.PI / 180,
-				// 动态修改进度值的时候，保存进度值的变化前后值
-				newPercent: 0,
-				oldPercent: 0
-			};
-		},
-		created() {
-			if (this.mode === 'circle') {
-				// 赋值，用于加载后第一个画圆使用
-				this.newPercent = this.percent;
-				this.oldPercent = 0;
-			}
-		},
-		computed: {
-			lineStyle() {
-				return {
-					backgroundColor: this.inactiveColor,
-					height: this.$fu.addUnit(this.$fu.getPx(this.height))
-				}
-			},
-			progressStyle() {
-				let style = {};
-				style.width = this.lineWidth;
-				style.backgroundColor = this.activeColor;
-				style.height = this.$fu.addUnit(this.$fu.getPx(this.height));
-				return style
-			},
-			innserPercentage() {
-				// 控制范围在0-100之间
-				return this.$fu.range(0, 100, this.percent)
-			}
-		},
-		mounted() {
-			if (this.mode === 'line') {
-				this.init()
-			} else if (this.mode === 'circle') {
-				// 这里必须加延迟,处理加载卡顿现象
-				setTimeout(() => {
-					this.drawProgressBg()
-					this.drawCircleByProgress(this.oldPercent)
-				}, 500)
-			}
-		},
-		methods: {
-			// 线形
-			init() {
-				this.$fu.sleep(20).then(() => {
-					this.resizeProgressWidth()
-				})
-			},
-
-			getProgressWidth() {
-				// #ifndef APP-NVUE
-				return this.$fuGetRect('.fu-line-progress__background')
-				// #endif
-
-				// #ifdef APP-NVUE
-				// 返回一个promise
-				return new Promise(resolve => {
-					dom.getComponentRect(this.$refs['fu-line-progress__background'], (res) => {
-						resolve(res.size)
-					})
-				})
-				// #endif
-			},
-
-			resizeProgressWidth() {
-				this.getProgressWidth().then(size => {
-					const { width } = size;
-					// 通过设置的percent值，计算其所占总长度的百分比
-					this.lineWidth = width * this.innserPercentage / 100 + 'px';
-				})
-			},
-
-			// 绘制进度条背景
-			drawProgressBg() {
-				let ctx = uni.createCanvasContext(this.elBgId, this);
-				// 设置线宽
-				ctx.setLineWidth(this.borderWidthPx)
-				// 设置颜色
-				ctx.setStrokeStyle(this.inactiveColor)
-				ctx.beginPath()
-				let radius = this.widthPx / 2;
-				ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false)
-				ctx.stroke()
-				ctx.draw()
-			},
-
-			// 绘制圆弧的进度
-			drawCircleByProgress(progress) {
-				let ctx = this.progressContext || (this.progressContext = uni.createCanvasContext(this.elId, this));
-				ctx.setLineCap('round')
-				// 设置线条宽度和颜色
-				ctx.setLineWidth(this.borderWidthPx)
-				ctx.setStrokeStyle(this.activeColor)
-				let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
-				let radius = this.widthPx / 2;
-				ctx.beginPath()
-				ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false)
-				ctx.imageSmoothingEnabled = true;
-				ctx.stroke()
-				ctx.draw()
-
-				// 如果变更后新值大于旧值，意味着增大了百分比
-				if (this.newPercent > this.oldPercent) {
-					// 每次递增百分之一
-					progress++
-					// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
-					if (progress > this.newPercent) return
-				} else {
-					progress--
-					if (progress < this.newPercent) return
-				}
-				setTimeout(() => {
-					// 定时器，每次操作间隔为time值，为了让进度条有动画效果
-					this.drawCircleByProgress(progress)
-				}, Math.floor(this.duration / 100))
-			}
-		},
-		watch: {
-			percent(newVal, oldVal = 0) {
-				if (this.mode === 'line') {
-					this.resizeProgressWidth()
-				} else if (this.mode === 'circle') {
-					newVal = Math.min(100, Math.max(0, newVal));
-					oldVal = Math.min(100, Math.max(0, oldVal));
-
-					this.newPercent = newVal;
-					this.oldPercent = oldVal;
-					setTimeout(() => {
-						// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
-						// 将此值减少或者新增到新的百分比值
-						this.drawCircleByProgress(oldVal)
-					}, 50)
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$bg-color: #f0f0f0;
-
-	// 线形
-	.fu-line-progress {
-		@include flex(row);
-		align-items: stretch;
-		position: relative;
-		flex: 1;
-		overflow: hidden;
-		border-radius: 100px;
-
-		&__background {
-			background-color: $bg-color;
-			border-radius: 100px;
-			flex: 1;
-		}
-
-		&__line {
-			@include flex(row);
-			align-items: center;
-			justify-content: flex-end;
-			position: absolute;
-			top: 0;
-			left: 0;
-			bottom: 0;
-			color: #ffffff;
-			border-radius: 100px;
-			transition: width 0.5s ease;
-		}
-
-		&__text {
-			font-size: 10px;
-			align-items: center;
-			text-align: right;
-			color: #FFFFFF;
-			margin-right: 5px;
-			transform: scale(0.9);
-		}
-	}
-
-	// 圆形
-	.fu-circle-progress {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-		background-color: transparent;
-
-		&__canvas {
-			position: absolute;
-
-			&-bg {
-				position: absolute;
-			}
-		}
-
-		&__content {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			&__percent {
-				font-size: 28rpx;
-			}
-		}
-	}
-</style>

package/components/fu-progress/props.js

@@ -1,76 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 进度条类型
-		 * @values 'line' - 线形, 'circle' - 圆形
-		 * @default 'line'
-		 */
-		mode: {
-			type: String,
-			default: 'line'
-		},
-		/**
-		 * @description 激活部分的颜色
-		 * @default '#2979ff'
-		 */
-		activeColor: {
-			type: String,
-			default: '#2979ff'
-		},
-		/**
-		 * @description 未激活部分的颜色
-		 * @default '#f0f0f0'
-		 */
-		inactiveColor: {
-			type: String,
-			default: '#f0f0f0'
-		},
-		/**
-		 * @description 进度百分比，数值
-		 * @default 0
-		 */
-		percent: {
-			type: [String,Number],
-			default: 0
-		},
-		/**
-		 * @description 是否在进度条内部显示百分比的值
-		 * @default true
-		 */
-		showPercent: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 进度条的高度（仅mode=line时生效）
-		 * @default 12
-		 */
-		height: {
-			type: [String,Number],
-			default: 12
-		},
-		/**
-		 * @description 进度条大小（仅mode=circle时生效）
-		 * @default 200
-		 */ 
-		size: {
-			type: [String,Number],
-			default: 200
-		},
-		/**
-		 * @description 进度条圆环宽度（仅mode=circle时生效）
-		 * @default 12
-		 */
-		borderWidth: {
-			type: [String,Number],
-			default: 14
-		},
-		/**
-		 * @description 圆环执行动画的时间，单位 ms（仅mode=circle时生效）
-		 */
-		duration: {
-			type: Number,
-			default: 1500
-		}
-	}
-}

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

@@ -1,301 +0,0 @@
-<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-icon :color="inactiveColor" :size="size" :name="isFill ? 'star-fill' : 'star'" />
-				<!-- #ifdef APP-NVUE -->
-				<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 class="fu-rate__icon-on" :style="{ width: star.activeWitch}">
-					<fu-icon :color="disabled? disabledColor: activeColor" :size="size" name="star-fill" />
-				</view>
-				<!-- #endif -->
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom');
-	// #endif
-	/**
-	 * Rate 评分
-	 * @description 此组件多用于商品评价打分、服务态度评价、用户满意度等场景。
-	 * @property {Boolean} isFill = [true|false] 星星的类型，是否为实心类型, 默认为实心
-	 * @property {String} activeColor 选中状态的星星颜色，默认为 "#ffca3e"
-	 * @property {String} inactiveColor 未选中状态的星星颜色，默认为 "#ececec"
-	 * @property {String} disabledColor 禁用状态的星星颜色，默认为 "#c0c0c0"
-	 * @property {Number} size 	星星的大小
-	 * @property {Number} value/v-model 当前评分
-	 * @property {Number} max 最大评分评分数量，目前一分一颗星
-	 * @property {Number} margin 星星的间距，单位 px
-	 * @property {Boolean} disabled = [true|false] 	是否为禁用状态，默认为 false
-	 * @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",
-		emits: ['input', 'update:modelValue', 'change'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				valueSync: "",
-				userMouseFristMove: true,
-				userRated: false,
-				userLastRate: 1
-			};
-		},
-		computed: {
-			stars() {
-				const value = this.valueSync ? this.valueSync : 0;
-				const starList = [];
-				const floorValue = Math.floor(value);
-				const ceilValue = Math.ceil(value);
-				for (let i = 0; i < this.max; i++) {
-					if (floorValue > i) {
-						starList.push({
-							activeWitch: "100%"
-						});
-					} else if (ceilValue - 1 === i) {
-						starList.push({
-							activeWitch: (value - floorValue) * 100 + "%"
-						});
-					} else {
-						starList.push({
-							activeWitch: "0"
-						});
-					}
-				}
-				return starList;
-			},
-
-			marginNumber() {
-				return Number(this.margin)
-			}
-		},
-		created() {
-			this.valueSync = Number(this.value || this.modelValue);
-			this._rateBoxLeft = 0
-			this._oldValue = null
-		},
-		mounted() {
-			setTimeout(() => {
-				this.handleSize()
-			}, 100)
-			// #ifdef H5
-			this.PC = this.isPC()
-			// #endif
-		},
-		methods: {
-			touchstart(e) {
-				// #ifdef H5
-				if (this.isPC()) return
-				// #endif
-				if (this.readonly || this.disabled) return
-				const {
-					clientX,
-					screenX
-				} = e.changedTouches[0]
-				// 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
-				this.handleRateCount(clientX || screenX)
-			},
-			touchmove(e) {
-				// #ifdef H5
-				if (this.isPC()) return
-				// #endif
-				if (this.readonly || this.disabled || !this.touchable) return
-				const {
-					clientX,
-					screenX
-				} = e.changedTouches[0]
-				this.handleRateCount(clientX || screenX)
-			},
-
-			/**
-			 * 兼容 PC @tian
-			 */
-			mousedown(e) {
-				// #ifdef H5
-				if (!this.isPC()) return
-				if (this.readonly || this.disabled) return
-				const {
-					clientX,
-				} = e
-				this.userLastRate = this.valueSync
-				this.handleRateCount(clientX)
-				this.userRated = true
-				// #endif
-			},
-			
-			mousemove(e) {
-				// #ifdef H5
-				if (!this.isPC()) return
-				if (this.userRated) return
-				if (this.userMouseFristMove) {
-					this.userLastRate = this.valueSync
-					this.userMouseFristMove = false
-				}
-				if (this.readonly || this.disabled || !this.touchable) return
-				const {
-					clientX,
-				} = e
-				this.handleRateCount(clientX)
-				// #endif
-			},
-			
-			mouseleave(e) {
-				// #ifdef H5
-				if (!this.isPC()) return
-				if (this.readonly || this.disabled || !this.touchable) return
-				if (this.userRated) {
-					this.userRated = false
-					return
-				}
-				this.valueSync = this.userLastRate
-				// #endif
-			},
-			
-			// #ifdef H5
-			isPC() {
-				var userAgentInfo = navigator.userAgent;
-				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
-				var flag = true;
-				for (let v = 0; v < Agents.length - 1; v++) {
-					if (userAgentInfo.indexOf(Agents[v]) > 0) {
-						flag = false;
-						break;
-					}
-				}
-				return flag;
-			},
-			// #endif
-
-			/**
-			 * 获取星星个数
-			 */
-			handleRateCount(clientX) {
-				this.handleSize()
-				const size = Number(this.size)
-				if (isNaN(size)) {
-					return new Error('size 属性只能设置为数字')
-				}
-				const rateMoveRange = clientX - this._rateBoxLeft
-				let index = parseInt(rateMoveRange / (size + this.marginNumber))
-				index = index < 0 ? 0 : index;
-				index = index > this.max ? this.max : index;
-				const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
-				let value = 0;
-				if (this._oldValue === index && !this.PC) return;
-				this._oldValue = index;
-				if (this.allowHalf) {
-					if (range > (size / 2)) {
-						value = index + 1
-					} else {
-						value = index + 0.5
-					}
-				} else {
-					value = index + 1
-				}
-
-				value = Math.max(0.5, Math.min(value, this.max))
-				this.valueSync = value
-				this.handleChange()
-			},
-
-			/**
-			 * 触发动态修改
-			 */
-			handleChange() {
-				this.$emit("input", this.valueSync);
-				this.$emit("update:modelValue", this.valueSync);
-				this.$emit("change", {
-					value: this.valueSync
-				});
-			},
-			
-			/**
-			 * 获取星星距离屏幕左侧距离
-			 */
-			handleSize() {
-				// #ifndef APP-NVUE
-				uni.createSelectorQuery().in(this).select('.fu-rate').boundingClientRect().exec(ret => {
-					if (ret) {
-						this._rateBoxLeft = ret[0].left
-					}
-				})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['fu-rate'], (ret) => {
-					const size = ret.size
-					if (size) {
-						this._rateBoxLeft = size.left
-					}
-				})
-				// #endif
-			}
-		},
-		watch: {
-			value(newVal) {
-				this.valueSync = Number(newVal);
-			},
-			modelValue(newVal) {
-				this.valueSync = Number(newVal);
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-rate {
-		@include flex(row);
-		line-height: 1;
-		font-size: 0;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.fu-rate__icon {
-		position: relative;
-		line-height: 1;
-		font-size: 0;
-	}
-
-	.fu-rate__icon-on {
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		/* #endif */
-		position: absolute;
-		top: 0;
-		left: 0;
-		line-height: 1;
-		text-align: left;
-	}
-
-	.fu-cursor-not-allowed {
-		/* #ifdef H5 */
-		cursor: not-allowed !important;
-		/* #endif */
-	}
-</style>