You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.8 KiB
142 lines
2.8 KiB
<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> |
|
</template> |
|
|
|
<script> |
|
// #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 { |
|
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 */ |
|
} |
|
|
|
.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 */ |
|
} |
|
</style>
|
|
|