@kengic/uni 0.5.1 → 0.5.2-beta.1

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

@@ -1,218 +1,262 @@
 <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/2 +'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>
+    <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 / 2 + '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}
+     */
 
-	/**
-	 * 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: 6,
-					height: 6,
-					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 = 14
-					this.dots.height = 14
-				} else {
-					this.dots.width = 6
-					this.dots.height = 6
-				}
-			}
-
-		},
-		created() {
-			if (this.mode === 'indexes') {
-				this.dots.width = 12
-				this.dots.height = 12
-			}
-			this.dots = Object.assign(this.dots, this.dotsStyles)
-		},
-		methods: {
-			clickItem(index) {
-				this.$emit('clickItem', index)
-			}
-		}
-	}
+    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: 6,
+                    height: 6,
+                    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 = 14;
+                    this.dots.height = 14;
+                } else {
+                    this.dots.width = 6;
+                    this.dots.height = 6;
+                }
+            },
+        },
+        created() {
+            if (this.mode === 'indexes') {
+                this.dots.width = 12;
+                this.dots.height = 12;
+            }
+            this.dots = Object.assign(this.dots, this.dotsStyles);
+        },
+        methods: {
+            clickItem(index) {
+                this.$emit('clickItem', index);
+            },
+        },
+    };
 </script>
 
 <style lang="scss">
-	.uni-swiper__warp {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		position: relative;
-		overflow: hidden;
-	}
+    .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-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 */
-		// border-width: 5px 0;
-		// border-style: solid;
-		// border-color: transparent;
-		// background-clip: padding-box;
-		/* #endif */
-		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
-	}
+    .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 */
+        // border-width: 5px 0;
+        // border-style: solid;
+        // border-color: transparent;
+        // background-clip: padding-box;
+        /* #endif */
+        // transition: width 0.2s linear;  不要取消注释，不然会不能变色
+    }
 
-	.uni-swiper__dots-item:first-child {
-		margin: 0;
-	}
+    .uni-swiper__dots-item:first-child {
+        margin: 0;
+    }
 
-	.uni-swiper__dots-default {
-		border-radius: 100px;
-	}
+    .uni-swiper__dots-default {
+        border-radius: 100px;
+    }
 
-	.uni-swiper__dots-long {
-		border-radius: 50px;
-	}
+    .uni-swiper__dots-long {
+        border-radius: 50px;
+    }
 
-	.uni-swiper__dots-bar {
-		border-radius: 50px;
-	}
+    .uni-swiper__dots-bar {
+        border-radius: 50px;
+    }
 
-	.uni-swiper__dots-nav {
-		bottom: 0px;
-		// height: 26px;
-		padding: 8px 0;
-		/* #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 {
+        bottom: 0px;
+        // height: 26px;
+        padding: 8px 0;
+        /* #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;
+    .uni-swiper__dots-nav-item {
+        /* overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; */
-		font-size: 14px;
-		color: #fff;
-		margin: 0 15px;
-	}
+        font-size: 14px;
+        color: #fff;
+        margin: 0 15px;
+    }
 
-	.uni-swiper__dots-indexes {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		// flex: 1;
-		justify-content: center;
-		align-items: center;
-	}
+    .uni-swiper__dots-indexes {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        // flex: 1;
+        justify-content: center;
+        align-items: center;
+    }
 
-	.uni-swiper__dots-indexes-text {
-		color: #fff;
-		font-size: 12px;
-		line-height: 14px;
-	}
+    .uni-swiper__dots-indexes-text {
+        color: #fff;
+        font-size: 12px;
+        line-height: 14px;
+    }
 </style>