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

package/ui-uni/uni-swiper-dot/uni-swiper-dot.vue

@@ -0,0 +1,205 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}" :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * SwiperDod 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits: ['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 8,
+					height: 8,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 20
+					this.dots.height = 20
+				} else {
+					this.dots.width = 8
+					this.dots.height = 8
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 20
+				this.dots.height = 20
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		/* #endif */
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		height: 40px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+	}
+</style>

package/ui-uni/uni-table/uni-table.vue

@@ -0,0 +1,455 @@
+<template>
+	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
+		<!-- #ifdef H5 -->
+		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
+			<slot></slot>
+			<view v-if="noData" class="uni-table-loading">
+				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
+			</view>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
+				<div class="uni-table--loader"></div>
+			</view>
+		</table>
+		<!-- #endif -->
+		<!-- #ifndef H5 -->
+		<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
+			<slot></slot>
+			<view v-if="noData" class="uni-table-loading">
+				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
+			</view>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
+				<div class="uni-table--loader"></div>
+			</view>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	/**
+	 * Table 表格
+	 * @description 用于展示多条结构类似的数据
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+	 * @property {Boolean} 	border 				是否带有纵向边框
+	 * @property {Boolean} 	stripe 				是否显示斑马线
+	 * @property {Boolean} 	type 					是否开启多选
+	 * @property {String} 	emptyText 			空数据时显示的文本内容
+	 * @property {Boolean} 	loading 			显示加载中
+	 * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
+	 */
+	export default {
+		name: 'uniTable',
+		options: {
+			virtualHost: true
+		},
+		emits: ['selection-change'],
+		props: {
+			data: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 是否有竖线
+			border: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示斑马线
+			stripe: {
+				type: Boolean,
+				default: false
+			},
+			// 多选
+			type: {
+				type: String,
+				default: ''
+			},
+			// 没有更多数据
+			emptyText: {
+				type: String,
+				default: '没有更多数据'
+			},
+			loading: {
+				type: Boolean,
+				default: false
+			},
+			rowKey: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				noData: true,
+				minWidth: 0,
+				multiTableHeads: []
+			}
+		},
+		watch: {
+			loading(val) {},
+			data(newVal) {
+				let theadChildren = this.theadChildren
+				let rowspan = 1
+				if (this.theadChildren) {
+					rowspan = this.theadChildren.rowspan
+				}
+
+				// this.trChildren.length - rowspan
+				this.noData = false
+				// this.noData = newVal.length === 0 
+			}
+		},
+		created() {
+			// 定义tr的实例数组
+			this.trChildren = []
+			this.thChildren = []
+			this.theadChildren = null
+			this.backData = []
+			this.backIndexData = []
+		},
+
+		methods: {
+			isNodata() {
+				let theadChildren = this.theadChildren
+				let rowspan = 1
+				if (this.theadChildren) {
+					rowspan = this.theadChildren.rowspan
+				}
+				this.noData = this.trChildren.length - rowspan <= 0
+			},
+			/**
+			 * 选中所有
+			 */
+			selectionAll() {
+				let startIndex = 1
+				let theadChildren = this.theadChildren
+				if (!this.theadChildren) {
+					theadChildren = this.trChildren[0]
+				} else {
+					startIndex = theadChildren.rowspan - 1
+				}
+				let isHaveData = this.data && this.data.length.length > 0
+				theadChildren.checked = true
+				theadChildren.indeterminate = false
+				this.trChildren.forEach((item, index) => {
+					if (!item.disabled) {
+						item.checked = true
+						if (isHaveData && item.keyValue) {
+							const row = this.data.find(v => v[this.rowKey] === item.keyValue)
+							if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
+								this.backData.push(row)
+							}
+						}
+						if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
+							this.backIndexData.push(index - startIndex)
+						}
+					}
+				})
+				// this.backData = JSON.parse(JSON.stringify(this.data))
+				this.$emit('selection-change', {
+					detail: {
+						value: this.backData,
+						index: this.backIndexData
+					}
+				})
+			},
+			/**
+			 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+			 */
+			toggleRowSelection(row, selected) {
+				// if (!this.theadChildren) return
+				row = [].concat(row)
+
+				this.trChildren.forEach((item, index) => {
+					// if (item.keyValue) {
+
+					const select = row.findIndex(v => {
+						//
+						if (typeof v === 'number') {
+							return v === index - 1
+						} else {
+							return v[this.rowKey] === item.keyValue
+						}
+					})
+					let ischeck = item.checked
+					if (select !== -1) {
+						if (typeof selected === 'boolean') {
+							item.checked = selected
+						} else {
+							item.checked = !item.checked
+						}
+						if (ischeck !== item.checked) {
+							this.check(item.rowData || item, item.checked, item.rowData ? item.keyValue : null, true)
+						}
+					}
+					// }
+				})
+				this.$emit('selection-change', {
+					detail: {
+						value: this.backData,
+						index: this.backIndexData
+					}
+				})
+			},
+
+			/**
+			 * 用于多选表格，清空用户的选择
+			 */
+			clearSelection() {
+				let theadChildren = this.theadChildren
+				if (!this.theadChildren) {
+					theadChildren = this.trChildren[0]
+				}
+				// if (!this.theadChildren) return
+				theadChildren.checked = false
+				theadChildren.indeterminate = false
+				this.trChildren.forEach(item => {
+					// if (item.keyValue) {
+					item.checked = false
+					// }
+				})
+				this.backData = []
+				this.backIndexData = []
+				this.$emit('selection-change', {
+					detail: {
+						value: [],
+						index: []
+					}
+				})
+			},
+			/**
+			 * 用于多选表格，切换所有行的选中状态
+			 */
+			toggleAllSelection() {
+				let list = []
+				let startIndex = 1
+				let theadChildren = this.theadChildren
+				if (!this.theadChildren) {
+					theadChildren = this.trChildren[0]
+				} else {
+					startIndex = theadChildren.rowspan - 1
+				}
+				this.trChildren.forEach((item, index) => {
+					if (!item.disabled) {
+						if (index > (startIndex - 1)) {
+							list.push(index - startIndex)
+						}
+					}
+				})
+				this.toggleRowSelection(list)
+			},
+
+			/**
+			 * 选中\取消选中
+			 * @param {Object} child
+			 * @param {Object} check
+			 * @param {Object} rowValue
+			 */
+			check(child, check, keyValue, emit) {
+				let theadChildren = this.theadChildren
+				if (!this.theadChildren) {
+					theadChildren = this.trChildren[0]
+				}
+
+
+
+				let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
+				if (childDomIndex < 0) {
+					childDomIndex = this.data.findIndex(v => v[this.rowKey] === keyValue) + 1
+				}
+				const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
+				if (childDomIndex === 0) {
+					check ? this.selectionAll() : this.clearSelection()
+					return
+				}
+
+				if (check) {
+					if (keyValue) {
+						this.backData.push(child)
+					}
+					this.backIndexData.push(childDomIndex - 1)
+				} else {
+					const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
+					const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
+					if (keyValue) {
+						this.backData.splice(index, 1)
+					}
+					this.backIndexData.splice(idx, 1)
+				}
+
+				const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
+				if (!domCheckAll) {
+					theadChildren.indeterminate = false
+					theadChildren.checked = true
+				} else {
+					theadChildren.indeterminate = true
+					theadChildren.checked = false
+				}
+
+				if (this.backIndexData.length === 0) {
+					theadChildren.indeterminate = false
+				}
+
+				if (!emit) {
+					this.$emit('selection-change', {
+						detail: {
+							value: this.backData,
+							index: this.backIndexData
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@charset "UTF-8";
+
+	.uni-table-scroll {
+		width: 100%;
+		/* #ifndef APP-NVUE */
+		overflow-x: auto;
+		/* #endif */
+	}
+
+	.uni-table {
+		position: relative;
+		width: 100%;
+		border-radius: 5px;
+		background-color: #fff;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: table;
+		overflow-x: auto;
+		/* #endif */
+	}
+
+	.uni-table ::v-deep .uni-table-tr:nth-child(n+2):hover {
+		background-color: #f5f7fa;
+	}
+
+	.uni-table ::v-deep .uni-table-thead .uni-table-tr:hover {
+		background-color: #fafafa;
+	}
+
+	.table--border {
+		border: 1px #ebeef5 solid;
+		border-right: none;
+	}
+
+	.border-none {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	.table--stripe {
+		/* #ifndef APP-NVUE */
+		/* #endif */
+	}
+
+	.table--stripe ::v-deep .uni-table-tr:nth-child(2n+3) {
+		background-color: #fafafa;
+	}
+
+	/* 表格加载、无数据样式 */
+	.uni-table-loading {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: table-row;
+		/* #endif */
+		height: 50px;
+		line-height: 50px;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.empty-border {
+		border-right: 1px #ebeef5 solid;
+	}
+
+	.uni-table-text {
+		position: absolute;
+		right: 0;
+		left: 0;
+		text-align: center;
+		font-size: 14px;
+		color: #999;
+	}
+
+	.uni-table-mask {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(255, 255, 255, 0.8);
+		z-index: 99;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		margin: auto;
+		transition: all 0.5s;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-table--loader {
+		width: 30px;
+		height: 30px;
+		border: 2px solid #aaa;
+		border-radius: 50%;
+		/* #ifndef APP-NVUE */
+		animation: 2s uni-table--loader linear infinite;
+		/* #endif */
+		position: relative;
+	}
+
+	@keyframes uni-table--loader {
+		0% {
+			transform: rotate(360deg);
+		}
+
+		10% {
+			border-left-color: transparent;
+		}
+
+		20% {
+			border-bottom-color: transparent;
+		}
+
+		30% {
+			border-right-color: transparent;
+		}
+
+		40% {
+			border-top-color: transparent;
+		}
+
+		50% {
+			transform: rotate(0deg);
+		}
+
+		60% {
+			border-top-color: transparent;
+		}
+
+		70% {
+			border-left-color: transparent;
+		}
+
+		80% {
+			border-bottom-color: transparent;
+		}
+
+		90% {
+			border-right-color: transparent;
+		}
+
+		100% {
+			transform: rotate(-360deg);
+		}
+	}
+</style>