@kengic/uni 0.5.1 → 0.5.2-beta.0

package/dist/uni/uni-ui/uni-grid/uni-grid.vue

@@ -1,143 +1,143 @@
 <template>
-	<view class="uni-grid-wrap">
-		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
-			<slot />
-		</view>
-	</view>
+    <view class="uni-grid-wrap">
+        <view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color': borderColor }">
+            <slot />
+        </view>
+    </view>
 </template>
 
 <script>
-	import { defineComponent } from 'vue';
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom');
-	// #endif
+    import { defineComponent } from 'vue';
+    // #ifdef APP-NVUE
+    const dom = uni.requireNativePlugin('dom');
+    // #endif
 
-	/**
-	 * Grid 宫格
-	 * @description 宫格组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
-	 * @property {Number} column 每列显示个数
-	 * @property {String} borderColor 边框颜色
-	 * @property {Boolean} showBorder 是否显示边框
-	 * @property {Boolean} square 是否方形显示
-	 * @property {Boolean} Boolean 点击背景是否高亮
-	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
-	 */
-	export default defineComponent({
-			name: 'UniGrid',
-			emits:['change'],
-			props: {
-				// 每列显示个数
-				column: {
-					type: Number,
-					default: 3
-				},
-				// 是否显示边框
-				showBorder: {
-					type: Boolean,
-					default: true
-				},
-				// 边框颜色
-				borderColor: {
-					type: String,
-					default: '#D2D2D2'
-				},
-				// 是否正方形显示,默认为 true
-				square: {
-					type: Boolean,
-					default: true
-				},
-				highlight: {
-					type: Boolean,
-					default: true
-				}
-			},
-			provide() {
-				return {
-					grid: this
-				}
-			},
-			data() {
-				const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
-				return {
-					elId,
-					width: 0
-				}
-			},
-			created() {
-				this.children = []
-			},
-			mounted() {
-				this.$nextTick(()=>{
-					this.init()
-				})
-			},
-			methods: {
-				init() {
-					setTimeout(() => {
-						this._getSize((width) => {
-							this.children.forEach((item, index) => {
-								item.width = width
-							})
-						})
-					}, 50)
-				},
-				change(e) {
-					this.$emit('change', e)
-				},
-				_getSize(fn) {
-					// #ifndef APP-NVUE
-					uni.createSelectorQuery()
-						.in(this)
-						.select(`#${this.elId}`)
-						.boundingClientRect()
-						.exec(ret => {
-							this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
-							fn(this.width)
-						})
-					// #endif
-					// #ifdef APP-NVUE
-					dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
-						this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
-						fn(this.width)
-					})
-					// #endif
-				}
-			}
-		}
-	)</script>
+    /**
+     * Grid 宫格
+     * @description 宫格组件
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+     * @property {Number} column 每列显示个数
+     * @property {String} borderColor 边框颜色
+     * @property {Boolean} showBorder 是否显示边框
+     * @property {Boolean} square 是否方形显示
+     * @property {Boolean} Boolean 点击背景是否高亮
+     * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+     */
+    export default defineComponent({
+        name: 'UniGrid',
+        emits: ['change'],
+        props: {
+            // 每列显示个数
+            column: {
+                type: Number,
+                default: 3,
+            },
+            // 是否显示边框
+            showBorder: {
+                type: Boolean,
+                default: true,
+            },
+            // 边框颜色
+            borderColor: {
+                type: String,
+                default: '#D2D2D2',
+            },
+            // 是否正方形显示,默认为 true
+            square: {
+                type: Boolean,
+                default: true,
+            },
+            highlight: {
+                type: Boolean,
+                default: true,
+            },
+        },
+        provide() {
+            return {
+                grid: this,
+            };
+        },
+        data() {
+            const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+            return {
+                elId,
+                width: 0,
+            };
+        },
+        created() {
+            this.children = [];
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.init();
+            });
+        },
+        methods: {
+            init() {
+                setTimeout(() => {
+                    this._getSize((width) => {
+                        this.children.forEach((item, index) => {
+                            item.width = width;
+                        });
+                    });
+                }, 50);
+            },
+            change(e) {
+                this.$emit('change', e);
+            },
+            _getSize(fn) {
+                // #ifndef APP-NVUE
+                uni.createSelectorQuery()
+                    .in(this)
+                    .select(`#${this.elId}`)
+                    .boundingClientRect()
+                    .exec((ret) => {
+                        this.width = parseInt((ret[0].width - 1) / this.column) + 'px';
+                        fn(this.width);
+                    });
+                // #endif
+                // #ifdef APP-NVUE
+                dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
+                    this.width = parseInt((ret.size.width - 1) / this.column) + 'px';
+                    fn(this.width);
+                });
+                // #endif
+            },
+        },
+    });
+</script>
 
-<style lang="scss" >
-	.uni-grid-wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		/* #ifdef H5 */
-		width: 100%;
-		/* #endif */
-	}
+<style lang="scss">
+    .uni-grid-wrap {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex: 1;
+        flex-direction: column;
+        /* #ifdef H5 */
+        width: 100%;
+        /* #endif */
+    }
 
-	.uni-grid {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		// flex: 1;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
+    .uni-grid {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        // flex: 1;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 
-	.uni-grid--border {
-		position: relative;
-		/* #ifdef APP-NVUE */
-		border-left-color: #D2D2D2;
-		border-left-style: solid;
-		border-left-width: 0.5px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		z-index: 1;
-		border-left: 1px #D2D2D2 solid;
-		/* #endif */
-	}
+    .uni-grid--border {
+        position: relative;
+        /* #ifdef APP-NVUE */
+        border-left-color: #d2d2d2;
+        border-left-style: solid;
+        border-left-width: 0.5px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        z-index: 1;
+        border-left: 1px #d2d2d2 solid;
+        /* #endif */
+    }
 </style>

package/dist/uni/uni-ui/uni-grid-item/uni-grid-item.vue

@@ -1,129 +1,131 @@
 <template>
-	<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
-		<view :class="{ 'uni-grid-item--border': showBorder,  'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
-		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
-		 class="uni-grid-item__box" @click="_onClick">
-			<slot />
-		</view>
-	</view>
+    <view v-if="width" :style="'width:' + width + ';' + (square ? 'height:' + width : '')" class="uni-grid-item">
+        <view
+            :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
+            :style="{ 'border-right-color': borderColor, 'border-bottom-color': borderColor, 'border-top-color': borderColor }"
+            class="uni-grid-item__box"
+            @click="_onClick"
+        >
+            <slot />
+        </view>
+    </view>
 </template>
 
 <script>
-	import { defineComponent } from 'vue';
+    import { defineComponent } from 'vue';
 
-	/**
-	 * GridItem 宫格
-	 * @description 宫格组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
-	 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
-	 */
-	export default defineComponent({
-			name: 'UniGridItem',
-			inject: ['grid'],
-			props: {
-				index: {
-					type: Number,
-					default: 0
-				}
-			},
-			data() {
-				return {
-					column: 0,
-					showBorder: true,
-					square: true,
-					highlight: true,
-					left: 0,
-					top: 0,
-					openNum: 2,
-					width: 0,
-					borderColor: '#e5e5e5'
-				}
-			},
-			created() {
-				this.column = this.grid.column
-				this.showBorder = this.grid.showBorder
-				this.square = this.grid.square
-				this.highlight = this.grid.highlight
-				this.top = this.hor === 0 ? this.grid.hor : this.hor
-				this.left = this.ver === 0 ? this.grid.ver : this.ver
-				this.borderColor = this.grid.borderColor
-				this.grid.children.push(this)
-				// this.grid.init()
-				this.width = this.grid.width
-			},
-			beforeDestroy() {
-				this.grid.children.forEach((item, index) => {
-					if (item === this) {
-						this.grid.children.splice(index, 1)
-					}
-				})
-			},
-			methods: {
-				_onClick() {
-					this.grid.change({
-						detail: {
-							index: this.index
-						}
-					})
-				}
-			}
-		}
-	)</script>
+    /**
+     * GridItem 宫格
+     * @description 宫格组件
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+     * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
+     */
+    export default defineComponent({
+        name: 'UniGridItem',
+        inject: ['grid'],
+        props: {
+            index: {
+                type: Number,
+                default: 0,
+            },
+        },
+        data() {
+            return {
+                column: 0,
+                showBorder: true,
+                square: true,
+                highlight: true,
+                left: 0,
+                top: 0,
+                openNum: 2,
+                width: 0,
+                borderColor: '#e5e5e5',
+            };
+        },
+        created() {
+            this.column = this.grid.column;
+            this.showBorder = this.grid.showBorder;
+            this.square = this.grid.square;
+            this.highlight = this.grid.highlight;
+            this.top = this.hor === 0 ? this.grid.hor : this.hor;
+            this.left = this.ver === 0 ? this.grid.ver : this.ver;
+            this.borderColor = this.grid.borderColor;
+            this.grid.children.push(this);
+            // this.grid.init()
+            this.width = this.grid.width;
+        },
+        beforeDestroy() {
+            this.grid.children.forEach((item, index) => {
+                if (item === this) {
+                    this.grid.children.splice(index, 1);
+                }
+            });
+        },
+        methods: {
+            _onClick() {
+                this.grid.change({
+                    detail: {
+                        index: this.index,
+                    },
+                });
+            },
+        },
+    });
+</script>
 
-<style lang="scss" >
-	.uni-grid-item {
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		display: flex;
-		/* #endif */
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
+<style lang="scss">
+    .uni-grid-item {
+        /* #ifndef APP-NVUE */
+        height: 100%;
+        display: flex;
+        /* #endif */
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+    }
 
-	.uni-grid-item__box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		width: 100%;
-		/* #endif */
-		position: relative;
-		flex: 1;
-		flex-direction: column;
-		// justify-content: center;
-		// align-items: center;
-	}
+    .uni-grid-item__box {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        width: 100%;
+        /* #endif */
+        position: relative;
+        flex: 1;
+        flex-direction: column;
+        // justify-content: center;
+        // align-items: center;
+    }
 
-	.uni-grid-item--border {
-		position: relative;
-		/* #ifdef APP-NVUE */
-		border-bottom-color: #D2D2D2;
-		border-bottom-style: solid;
-		border-bottom-width: 0.5px;
-		border-right-color: #D2D2D2;
-		border-right-style: solid;
-		border-right-width: 0.5px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		z-index: 0;
-		border-bottom: 1px #D2D2D2 solid;
-		border-right: 1px #D2D2D2 solid;
-		/* #endif */
-	}
-	.uni-grid-item--border-top {
-		position: relative;
-		/* #ifdef APP-NVUE */
-		border-top-color: #D2D2D2;
-		border-top-style: solid;
-		border-top-width: 0.5px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		border-top: 1px #D2D2D2 solid;
-		z-index: 0;
-		/* #endif */
-	}
+    .uni-grid-item--border {
+        position: relative;
+        /* #ifdef APP-NVUE */
+        border-bottom-color: #d2d2d2;
+        border-bottom-style: solid;
+        border-bottom-width: 0.5px;
+        border-right-color: #d2d2d2;
+        border-right-style: solid;
+        border-right-width: 0.5px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        z-index: 0;
+        border-bottom: 1px #d2d2d2 solid;
+        border-right: 1px #d2d2d2 solid;
+        /* #endif */
+    }
+    .uni-grid-item--border-top {
+        position: relative;
+        /* #ifdef APP-NVUE */
+        border-top-color: #d2d2d2;
+        border-top-style: solid;
+        border-top-width: 0.5px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        border-top: 1px #d2d2d2 solid;
+        z-index: 0;
+        /* #endif */
+    }
 
-
-	.uni-highlight:active {
-		background-color: #f1f1f1;
-	}
+    .uni-highlight:active {
+        background-color: #f1f1f1;
+    }
 </style>