@10yun/cv-mobile-ui 0.3.26 → 0.4.1

package/ui-uni/uni-rate/uni-rate.vue

@@ -1,357 +0,0 @@
-<template>
-	<view>
-		<view ref="uni-rate" class="uni-rate">
-			<view class="uni-rate__icon" :class="{'uni-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">
-				<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
-				<!-- #ifdef APP-NVUE -->
-				<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
-					<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size" type="star-filled" />
-				</view>
-				<!-- #endif -->
-				<!-- #ifndef APP-NVUE -->
-				<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
-					<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
-				</view>
-				<!-- #endif -->
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom');
-	// #endif
-	/**
-	 * Rate 评分
-	 * @description 评分组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
-	 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
-	 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
-	 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
-	 * @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 						uniRate 的 value 改变时触发事件，e={value:Number}
-	 */
-
-	export default {
-		name: "UniRate",
-		props: {
-			isFill: {
-				// 星星的类型，是否镂空
-				type: [Boolean, String],
-				default: true
-			},
-			color: {
-				// 星星未选中的颜色
-				type: String,
-				default: "#ececec"
-			},
-			activeColor: {
-				// 星星选中状态颜色
-				type: String,
-				default: "#ffca3e"
-			},
-			disabledColor: {
-				// 星星禁用状态颜色
-				type: String,
-				default: "#c0c0c0"
-			},
-			size: {
-				// 星星的大小
-				type: [Number, String],
-				default: 24
-			},
-			value: {
-				// 当前评分
-				type: [Number, String],
-				default: 1
-			},
-			modelValue: {
-				// 当前评分
-				type: [Number, String],
-				default: 1
-			},
-			max: {
-				// 最大评分
-				type: [Number, String],
-				default: 5
-			},
-			margin: {
-				// 星星的间距
-				type: [Number, String],
-				default: 0
-			},
-			disabled: {
-				// 是否可点击
-				type: [Boolean, String],
-				default: false
-			},
-			readonly: {
-				// 是否只读
-				type: [Boolean, String],
-				default: false
-			},
-			allowHalf: {
-				// 是否显示半星
-				type: [Boolean, String],
-				default: false
-			},
-			touchable: {
-				// 是否支持滑动手势
-				type: [Boolean, String],
-				default: true
-			}
-		},
-		data() {
-			return {
-				valueSync: "",
-				userMouseFristMove: true,
-				userRated: false,
-				userLastRate: 1
-			};
-		},
-		watch: {
-			value(newVal) {
-				this.valueSync = Number(newVal);
-			},
-			modelValue(newVal) {
-				this.valueSync = Number(newVal);
-			},
-		},
-		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._getSize()
-			}, 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]
-				// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
-				this._getRateCount(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._getRateCount(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._getRateCount(clientX)
-				this.userRated = true
-				// #endif
-			},
-			mousemove(e) {
-				// #ifdef H5
-				if (!this.IsPC()) return
-				if (this.userRated) return
-				if (this.userMouseFristMove) {
-					console.log('---mousemove----', this.valueSync);
-					this.userLastRate = this.valueSync
-					this.userMouseFristMove = false
-				}
-				if (this.readonly || this.disabled || !this.touchable) return
-				const {
-					clientX,
-				} = e
-				this._getRateCount(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
-
-			/**
-			 * 获取星星个数
-			 */
-			_getRateCount(clientX) {
-				this._getSize()
-				const size = Number(this.size)
-				if (size === NaN) {
-					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._onChange()
-			},
-
-			/**
-			 * 触发动态修改
-			 */
-			_onChange() {
-
-				this.$emit("input", this.valueSync);
-				this.$emit("update:modelValue", this.valueSync);
-				this.$emit("change", {
-					value: this.valueSync
-				});
-			},
-			/**
-			 * 获取星星距离屏幕左侧距离
-			 */
-			_getSize() {
-				// #ifndef APP-NVUE
-				uni.createSelectorQuery()
-					.in(this)
-					.select('.uni-rate')
-					.boundingClientRect()
-					.exec(ret => {
-						if (ret) {
-							this._rateBoxLeft = ret[0].left
-						}
-					})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
-					const size = ret.size
-					if (size) {
-						this._rateBoxLeft = size.left
-					}
-				})
-				// #endif
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-rate {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		line-height: 1;
-		font-size: 0;
-		flex-direction: row;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-rate__icon {
-		position: relative;
-		line-height: 1;
-		font-size: 0;
-	}
-
-	.uni-rate__icon-on {
-		overflow: hidden;
-		position: absolute;
-		top: 0;
-		left: 0;
-		line-height: 1;
-		text-align: left;
-	}
-
-	.uni-cursor-not-allowed {
-		/* #ifdef H5 */
-		cursor: not-allowed !important;
-		/* #endif */
-	}
-</style>

package/ui-uni/uni-row/uni-row.vue

@@ -1,155 +0,0 @@
-<template>
-	<view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
-		marginLeft:`${Number(marginValue)}rpx`,
-		marginRight:`${Number(marginValue)}rpx`,
-	}">
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-	const ComponentClass = 'uni-row';
-	const modifierSeparator = '--';
-	/**
-	 * Row	布局-行
-	 * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
-	 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
-	 *
-	 * @property	{gutter} type = Number 栅格间隔
-	 * @property	{justify} type = String flex 布局下的水平排列方式
-	 * 						可选	start/end/center/space-around/space-between	start
-	 * 						默认值	start
-	 * @property	{align} type = String flex 布局下的垂直排列方式
-	 * 						可选	top/middle/bottom
-	 * 						默认值	top
-	 * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
-	 * 						默认值 750
-	 */
-
-
-	export default {
-		name: 'uniRow',
-		componentName: 'uniRow',
-		// #ifdef MP-WEIXIN
-		options: {
-			virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
-		},
-		// #endif
-		props: {
-			type: String,
-			gutter: Number,
-			justify: {
-				type: String,
-				default: 'start'
-			},
-			align: {
-				type: String,
-				default: 'top'
-			},
-			// nvue如果使用span等属性，需要配置宽度
-			width: {
-				type: [String, Number],
-				default: 750
-			}
-		},
-		created() {
-			// #ifdef APP-NVUE
-			this.type = 'flex';
-			// #endif
-		},
-		computed: {
-			marginValue() {
-				// #ifndef APP-NVUE
-				if (this.gutter) {
-					return -(this.gutter / 2);
-				}
-				// #endif
-				return 0;
-			},
-			typeClass() {
-				return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
-			},
-			justifyClass() {
-				return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
-			},
-			alignClass() {
-				return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-row {
-		position: relative;
-		flex-direction: row;
-		/* #ifdef APP-NVUE */
-		flex: 1;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-	/* #ifndef APP-NVUE */
-	.uni-row::before,
-	.uni-row::after {
-		display: table;
-		content: "";
-	}
-
-	.uni-row::after {
-		clear: both;
-	}
-
-	/* #endif */
-	/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
-	.uni-row--flex {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex-wrap: wrap;
-		flex: 1;
-	}
-
-	.uni-row--flex:before,
-	.uni-row--flex:after {
-		/* #ifndef APP-NVUE */
-		display: none;
-		/* #endif */
-	}
-
-	.uni-row--flex-justify-center {
-		justify-content: center;
-	}
-
-	.uni-row--flex-justify-end {
-		justify-content: flex-end;
-	}
-
-	.uni-row--flex-justify-space-between {
-		justify-content: space-between;
-	}
-
-	.uni-row--flex-justify-space-around {
-		justify-content: space-around;
-	}
-
-	.uni-row--flex-align-middle {
-		align-items: center;
-	}
-
-	.uni-row--flex-align-bottom {
-		align-items: flex-end;
-	}
-
-	/* #endif */
-
-	/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
-	:host {
-		display: block;
-	}
-
-	/* #endif */
-</style>