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

package/ui-cv/cv-number-box/uni-number-box.vue

@@ -1,224 +0,0 @@
-<template>
-	<view class="uni-numbox">
-		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
-			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
-		</view>
-		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
-		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
-			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
-		</view>
-	</view>
-</template>
-<script>
-	/**
-	 * NumberBox 数字输入框
-	 * @description 带加减按钮的数字输入框
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
-	 * @property {Number} value 输入框当前值
-	 * @property {Number} min 最小值
-	 * @property {Number} max 最大值
-	 * @property {Number} step 每次点击改变的间隔大小
-	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
-	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
-	 */
-
-	export default {
-		name: "UniNumberBox",
-		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
-		props: {
-			value: {
-				type: [Number, String],
-				default: 1
-			},
-			modelValue: {
-				type: [Number, String],
-				default: 1
-			},
-			min: {
-				type: Number,
-				default: 0
-			},
-			max: {
-				type: Number,
-				default: 100
-			},
-			step: {
-				type: Number,
-				default: 1
-			},
-			disabled: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				inputValue: 0
-			};
-		},
-		watch: {
-			value(val) {
-				this.inputValue = +val;
-			},
-			modelValue(val) {
-				this.inputValue = +val;
-			}
-		},
-		created() {
-			if (this.value === 1) {
-				this.inputValue = +this.modelValue;
-			}
-			if (this.modelValue === 1) {
-				this.inputValue = +this.value;
-			}
-		},
-		methods: {
-			_calcValue(type) {
-				if (this.disabled) {
-					return;
-				}
-				const scale = this._getDecimalScale();
-				let value = this.inputValue * scale;
-				let step = this.step * scale;
-				if (type === "minus") {
-					value -= step;
-					if (value < (this.min * scale)) {
-						return;
-					}
-					if (value > (this.max * scale)) {
-						value = this.max * scale
-					}
-				}
-
-				if (type === "plus") {
-					value += step;
-					if (value > (this.max * scale)) {
-						return;
-					}
-					if (value < (this.min * scale)) {
-						value = this.min * scale
-					}
-				}
-
-				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
-				this.$emit("change", +this.inputValue);
-				// TODO vue2 兼容
-				this.$emit("input", +this.inputValue);
-				// TODO vue3 兼容
-				this.$emit("update:modelValue", +this.inputValue);
-			},
-			_getDecimalScale() {
-
-				let scale = 1;
-				// 浮点型
-				if (~~this.step !== this.step) {
-					scale = Math.pow(10, String(this.step).split(".")[1].length);
-				}
-				return scale;
-			},
-			_onBlur(event) {
-				this.$emit('blur', event)
-				let value = event.detail.value;
-				if (!value) {
-					// this.inputValue = 0;
-					return;
-				}
-				value = +value;
-				if (value > this.max) {
-					value = this.max;
-				} else if (value < this.min) {
-					value = this.min;
-				}
-				const scale = this._getDecimalScale();
-				this.inputValue = value.toFixed(String(scale).length - 1);
-				this.$emit("change", +this.inputValue);
-				this.$emit("input", +this.inputValue);
-			},
-			_onFocus(event) {
-				this.$emit('focus', event)
-			}
-		}
-	};
-</script>
-<style scoped>
-	/* #ifdef APP-NVUE */
-	/* #endif */
-	.uni-numbox {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		height: 35px;
-		line-height: 35px;
-		width: 120px;
-	}
-
-	.uni-cursor-point {
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-numbox__value {
-		background-color: #ffffff;
-		width: 50px;
-		height: 35px;
-		text-align: center;
-		font-size: 16px;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #e5e5e5;
-		border-left-width: 0;
-		border-right-width: 0;
-	}
-
-	.uni-numbox__minus {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		width: 35px;
-		height: 35px;
-		font-size: 20px;
-		color: #333;
-		background-color: #f8f8f8;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #e5e5e5;
-		border-top-left-radius: 3px;
-		border-bottom-left-radius: 3px;
-		border-right-width: 0;
-	}
-
-	.uni-numbox__plus {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		width: 35px;
-		height: 35px;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #e5e5e5;
-		border-top-right-radius: 3px;
-		border-bottom-right-radius: 3px;
-		background-color: #f8f8f8;
-		border-left-width: 0;
-	}
-
-	.uni-numbox--text {
-		font-size: 20px;
-		color: #333;
-	}
-
-	.uni-numbox--disabled {
-		color: #c0c0c0;
-		/* #ifdef H5 */
-		cursor: not-allowed;
-		/* #endif */
-	}
-</style>

package/ui-cv/cv-pagination/uni-pagination.vue

@@ -1,376 +0,0 @@
-<template>
-	<view class="uni-pagination">
-		<!-- #ifndef APP-NVUE -->
-		<view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
-		<!-- #endif -->
-		<view class="uni-pagination__btn" :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'" :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20" :hover-stay-time="70" @click="clickLeft">
-			<template v-if="showIcon === true || showIcon === 'true'">
-				<uni-icons color="#666" size="16" type="arrowleft" />
-			</template>
-			<template v-else>
-				<text class="uni-pagination__child-btn">{{ prevText }}</text>
-			</template>
-		</view>
-		<view class="uni-pagination__num uni-pagination__num-flex-none">
-			<view class="uni-pagination__num-current">
-				<text class="uni-pagination__num-current-text is-pc-hide" style="color:#409EFF">{{ currentIndex }}</text>
-				<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
-				<!-- #ifndef APP-NVUE -->
-				<view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }" class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
-					<text>{{ item }}</text>
-				</view>
-				<!-- #endif -->
-
-			</view>
-		</view>
-		<view class="uni-pagination__btn" :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'" :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20" :hover-stay-time="70" @click="clickRight">
-			<template v-if="showIcon === true || showIcon === 'true'">
-				<uni-icons color="#666" size="16" type="arrowright" />
-			</template>
-			<template v-else>
-				<text class="uni-pagination__child-btn">{{ nextText }}</text>
-			</template>
-		</view>
-	</view>
-</template>
-
-<script>
-	/**
-	 * Pagination 分页器
-	 * @description 分页器组件，用于展示页码、请求数据等
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=32
-	 * @property {String} prevText 左侧按钮文字
-	 * @property {String} nextText 右侧按钮文字
-	 * @property {Number} current 当前页
-	 * @property {Number} total 数据总量
-	 * @property {Number} pageSize 每页数据量
-	 * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
-	 * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
-	 */
-
-	export default {
-		name: 'UniPagination',
-		emits: ['update:modelValue', 'input', 'change'],
-		props: {
-			value: {
-				type: [Number, String],
-				default: 1
-			},
-			modelValue: {
-				type: [Number, String],
-				default: 1
-			},
-			prevText: {
-				type: String,
-				default: '上一页'
-			},
-			nextText: {
-				type: String,
-				default: '下一页'
-			},
-			current: {
-				type: [Number, String],
-				default: 1
-			},
-			total: {
-				// 数据总量
-				type: [Number, String],
-				default: 0
-			},
-			pageSize: {
-				// 每页数据量
-				type: [Number, String],
-				default: 10
-			},
-			showIcon: {
-				// 是否以 icon 形式展示按钮
-				type: [Boolean, String],
-				default: false
-			},
-			pagerCount: {
-				type: Number,
-				default: 7
-			}
-		},
-		data() {
-			return {
-				currentIndex: 1,
-				paperData: []
-			}
-		},
-		computed: {
-			maxPage() {
-				let maxPage = 1
-				let total = Number(this.total)
-				let pageSize = Number(this.pageSize)
-				if (total && pageSize) {
-					maxPage = Math.ceil(total / pageSize)
-				}
-				return maxPage
-			},
-			paper() {
-				const num = this.currentIndex
-				// TODO 最大页数
-				const pagerCount = this.pagerCount
-				// const total = 181
-				const total = this.total
-				const pageSize = this.pageSize
-				let totalArr = []
-				let showPagerArr = []
-				let pagerNum = Math.ceil(total / pageSize)
-				for (let i = 0; i < pagerNum; i++) {
-					totalArr.push(i + 1)
-				}
-				showPagerArr.push(1)
-				const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
-				totalArr.forEach((item, index) => {
-					if ((pagerCount + 1) / 2 >= num) {
-						if (item < pagerCount + 1 && item > 1) {
-							showPagerArr.push(item)
-						}
-					} else if (num + 2 <= totalNum) {
-						if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
-							showPagerArr.push(item)
-						}
-					} else {
-						if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[totalArr.length - 1]) {
-							showPagerArr.push(item)
-						}
-					}
-				})
-				if (pagerNum > pagerCount) {
-					if ((pagerCount + 1) / 2 >= num) {
-						showPagerArr[showPagerArr.length - 1] = '...'
-					} else if (num + 2 <= totalNum) {
-						showPagerArr[1] = '...'
-						showPagerArr[showPagerArr.length - 1] = '...'
-					} else {
-						showPagerArr[1] = '...'
-					}
-					showPagerArr.push(totalArr[totalArr.length - 1])
-				} else {
-					if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
-						showPagerArr.shift()
-						showPagerArr.push(totalArr[totalArr.length - 1])
-					}
-				}
-
-				return showPagerArr
-			}
-		},
-		watch: {
-			current(val) {
-				this.currentIndex = val
-			},
-			value(val) {
-				if (val < 1) {
-					this.currentIndex = 1
-				} else {
-					this.currentIndex = val
-				}
-			},
-			modelValue(val) {
-				if (val < 1) {
-					this.currentIndex = 1
-				} else {
-					this.currentIndex = val
-				}
-			}
-		},
-		created() {
-			this.currentIndex = +this.value
-		},
-		methods: {
-			// 选择标签
-			selectPage(e, index) {
-				if (parseInt(e)) {
-					this.currentIndex = e
-					this.change('current')
-				} else {
-					let pagerNum = Math.ceil(this.total / this.pageSize)
-					// let pagerNum = Math.ceil(181 / this.pageSize)
-					// 上一页
-					if (index <= 1) {
-						if (this.currentIndex - 5 > 1) {
-							this.currentIndex -= 5
-						} else {
-							this.currentIndex = 1
-						}
-						return
-					}
-					// 下一页
-					if (index >= 6) {
-						if (this.currentIndex + 5 > pagerNum) {
-							this.currentIndex = pagerNum
-						} else {
-							this.currentIndex += 5
-						}
-						return
-					}
-				}
-			},
-			clickLeft() {
-				if (Number(this.currentIndex) === 1) {
-					return
-				}
-				this.currentIndex -= 1
-				this.change('prev')
-			},
-			clickRight() {
-				if (Number(this.currentIndex) >= this.maxPage) {
-					return
-				}
-				this.currentIndex += 1
-				this.change('next')
-			},
-			change(e) {
-				this.$emit('input', this.currentIndex)
-				this.$emit('update:modelValue', this.currentIndex)
-				this.$emit('change', {
-					type: e,
-					current: this.currentIndex
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-pagination {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		position: relative;
-		overflow: hidden;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.uni-pagination__total {
-		font-size: 14px;
-		color: #999;
-		margin-right: 15px;
-	}
-
-	.uni-pagination__btn {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		cursor: pointer;
-		/* #endif */
-		padding: 0 8px;
-		line-height: 30px;
-		font-size: 14px;
-		position: relative;
-		background-color: #f4f4f5;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-	}
-
-	.uni-pagination__child-btn {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		font-size: 14px;
-		position: relative;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-	}
-
-	.uni-pagination__num {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 30px;
-		line-height: 30px;
-		font-size: 14px;
-		color: #333;
-		margin: 0 5px;
-	}
-
-	.uni-pagination__num-tag {
-		/* #ifdef H5 */
-		cursor: pointer;
-		min-width: 30px;
-		/* #endif */
-		margin: 0 5px;
-		height: 30px;
-		text-align: center;
-		line-height: 30px;
-		color: #666;
-	}
-
-	.uni-pagination__num-current {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-pagination__num-current-text {
-		font-size: 15px;
-	}
-
-	.uni-pagination--enabled {
-		color: #333333;
-		opacity: 1;
-	}
-
-	.uni-pagination--disabled {
-		opacity: 0.5;
-		/* #ifdef H5 */
-		cursor: default;
-		/* #endif */
-	}
-
-	.uni-pagination--hover {
-		color: rgba(0, 0, 0, 0.6);
-		background-color: #f1f1f1;
-	}
-
-	.tag--active:hover {
-		color: #007aff;
-	}
-
-	.page--active {
-		color: #fff;
-		background-color: #007aff;
-	}
-
-	.page--active:hover {
-		color: #fff;
-	}
-
-	/* #ifndef APP-NVUE */
-	.is-pc-hide {
-		display: block;
-	}
-
-	.is-phone-hide {
-		display: none;
-	}
-
-	@media screen and (min-width: 450px) {
-		.is-pc-hide {
-			display: none;
-		}
-
-		.is-phone-hide {
-			display: block;
-		}
-
-		.uni-pagination__num-flex-none {
-			flex: none;
-		}
-	}
-
-	/* #endif */
-</style>