parent
e177f23299
commit
677c12fd6f
@ -1,145 +0,0 @@ |
||||
<template> |
||||
<view v-if="width" class="uni-grid-item"> |
||||
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item__box-square': square, '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"> |
||||
<view class="uni-grid-item__box-item" :class="{'uni-grid-item__box-item-square': square}"> |
||||
<slot /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'UniGridItem', |
||||
inject: ['grid'], |
||||
data() { |
||||
return { |
||||
column: 0, |
||||
showBorder: true, |
||||
square: true, |
||||
highlight: true, |
||||
left: 0, |
||||
top: 0, |
||||
index: 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.index = this.grid.index++ |
||||
this.grid.children.push(this) |
||||
}, |
||||
methods: { |
||||
_onClick() { |
||||
// console.log('点击', this.index); |
||||
this.grid.change({ |
||||
detail: { |
||||
index: this.index |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.uni-grid-item { |
||||
/* #ifndef APP-NVUE */ |
||||
height: 100%; |
||||
/* #endif */ |
||||
width: 168rpx; |
||||
} |
||||
|
||||
.uni-grid-item__box { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex: 1; |
||||
position: relative; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
/* margin-top: 9rpx; |
||||
margin-right: 17rpx; |
||||
margin-bottom: 9rpx; |
||||
margin-left: 17rpx; */ |
||||
/* #ifdef APP-NVUE */ |
||||
justify-content: center; |
||||
|
||||
/* #endif */ |
||||
} |
||||
|
||||
.uni-grid-item__box-item { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
width: 100%; |
||||
/* #endif */ |
||||
position: relative; |
||||
flex: 1; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
width: 152rpx; |
||||
height: 146rpx; |
||||
/* padding-top: 10rpx; |
||||
padding-right: 23rpx; |
||||
padding-bottom: 10rpx; |
||||
padding-left: 23rpx; */ |
||||
border-radius: 1rpx; |
||||
/* padding: 15px 0; */ |
||||
} |
||||
|
||||
.uni-grid-item__box-item-square { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.uni-grid-item--image { |
||||
width: 25px; |
||||
height: 25px; |
||||
} |
||||
|
||||
.uni-grid-item--text { |
||||
font-size: 24px; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.uni-grid-item__box-square { |
||||
height: 0; |
||||
padding-top: 100%; |
||||
} |
||||
|
||||
.uni-grid-item--border { |
||||
position: relative; |
||||
border-bottom-color: #e5e5e5; |
||||
border-bottom-style: solid; |
||||
border-bottom-width: 1px; |
||||
border-right-color: #e5e5e5; |
||||
border-right-style: solid; |
||||
border-right-width: 1px; |
||||
} |
||||
|
||||
.uni-grid-item--border-top { |
||||
border-top-color: #e5e5e5; |
||||
border-top-style: solid; |
||||
border-top-width: 1px; |
||||
/* #ifndef APP-NVUE */ |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
/* #endif */ |
||||
} |
||||
|
||||
.uni-highlight:active { |
||||
background-color: #f1f1f1; |
||||
} |
||||
</style> |
||||
@ -1,129 +0,0 @@ |
||||
<template> |
||||
<view class="uni-grid-wrap"> |
||||
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-style':'solid','border-left-color':borderColor, 'border-left-width':showBorder?'1px':0 }"> |
||||
<slot /> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
// #ifdef APP-NVUE |
||||
const dom = weex.requireModule('dom'); |
||||
// #endif |
||||
export default { |
||||
name: 'UniGrid', |
||||
props: { |
||||
// 每列显示个数 |
||||
column: { |
||||
type: Number, |
||||
default: 3 |
||||
}, |
||||
// 是否显示边框 |
||||
showBorder: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 边框颜色 |
||||
borderColor: { |
||||
type: String, |
||||
default: '#e5e5e5' |
||||
}, |
||||
// 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动 |
||||
hor: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
// 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动 |
||||
ver: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
// 是否正方形显示,默认为 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 { |
||||
index: 0, |
||||
elId, |
||||
width: 0 |
||||
} |
||||
}, |
||||
created() { |
||||
this.children = [] |
||||
this.index = 0 |
||||
}, |
||||
mounted() { |
||||
setTimeout(() => { |
||||
this._getSize((width) => { |
||||
this.children.forEach((item, index) => { |
||||
item.width = width |
||||
}) |
||||
}) |
||||
}, 50) |
||||
}, |
||||
methods: { |
||||
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 / this.column) - 1 + 'px' |
||||
fn(this.width) |
||||
}) |
||||
// #endif |
||||
// #ifdef APP-NVUE |
||||
dom.getComponentRect(this.$refs['uni-grid'], (ret) => { |
||||
this.width = parseInt(ret.size.width / this.column) - 1 + 'px' |
||||
fn(this.width) |
||||
}) |
||||
// #endif |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.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 { |
||||
border-left-color: #e5e5e5; |
||||
border-left-style: solid; |
||||
border-left-width: 1px; |
||||
} |
||||
</style> |
||||
@ -1,205 +0,0 @@ |
||||
<template> |
||||
<view class="warp"> |
||||
<view class="example-body"> |
||||
<uni-grid :show-border="false" :square="false" :highlight="false" @change="change"> |
||||
<uni-grid-item :hor="0" :ver="0" marker="badge" type="error" style="width: 25%;text-align: center;" text="12" v-for="item in list" :key="item.id"> |
||||
<image class="image" :src="item.url" mode="aspectFill" @click="webTo" /> |
||||
<text class="text">{{item.text}}</text> |
||||
</uni-grid-item> |
||||
</uni-grid> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import uniGrid from '@/components/zc-grid-wrap/zc-grid-wrap.vue' |
||||
import uniGridItem from '@/components/zc-grid-item/zc-grid-item.vue' |
||||
export default { |
||||
components: { |
||||
uniGrid, |
||||
uniGridItem |
||||
}, |
||||
props:{ |
||||
list:{ |
||||
type:Array, |
||||
default:function () { |
||||
return [] |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
// list: [{ |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||
// text: 'Grid 1' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||
// text: 'Grid 2' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||
// text: 'Grid 3' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||
// text: 'Grid 4' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||
// text: 'Grid 5' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||
// text: 'Grid 6' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||
// text: 'Grid 7' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||
// text: 'Grid 8' |
||||
// }, |
||||
// { |
||||
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||
// text: 'Grid 9' |
||||
// } |
||||
// ] |
||||
} |
||||
}, |
||||
methods: { |
||||
change(e) { |
||||
let { |
||||
index |
||||
} = e.detail |
||||
console.log(index) |
||||
}, |
||||
webTo() { |
||||
this.$emit('goTo') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
/* 头条小程序组件内不能引入字体 */ |
||||
/* #ifdef MP-TOUTIAO */ |
||||
@font-face { |
||||
font-family: uniicons; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
src: url('~@/static/uni.ttf') format('truetype'); |
||||
} |
||||
|
||||
/* #endif */ |
||||
|
||||
/* #ifndef APP-NVUE */ |
||||
page { |
||||
display: flex; |
||||
flex-direction: column; |
||||
box-sizing: border-box; |
||||
background-color: #efeff4; |
||||
min-height: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
view { |
||||
font-size: 28rpx; |
||||
line-height: inherit; |
||||
} |
||||
|
||||
.example { |
||||
padding: 0 30rpx 30rpx; |
||||
} |
||||
|
||||
.example-info { |
||||
padding: 30rpx; |
||||
color: #3b4144; |
||||
background: #ffffff; |
||||
} |
||||
|
||||
.example-body { |
||||
text-align: center; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
padding: 0; |
||||
font-size: 14rpx; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
/* #endif */ |
||||
.example { |
||||
padding: 0 30rpx; |
||||
} |
||||
|
||||
.example-info { |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
padding: 30rpx; |
||||
color: #3b4144; |
||||
background-color: #ffffff; |
||||
font-size: 30rpx; |
||||
} |
||||
|
||||
.example-info-text { |
||||
font-size: 28rpx; |
||||
line-height: 36rpx; |
||||
} |
||||
|
||||
|
||||
.example-body { |
||||
flex-direction: column; |
||||
padding: 0rpx; |
||||
padding-bottom: 10px; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
.word-btn-white { |
||||
font-size: 18px; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.word-btn { |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 6px; |
||||
height: 48px; |
||||
margin: 15px; |
||||
background-color: #007AFF; |
||||
} |
||||
|
||||
.word-btn--hover { |
||||
background-color: #4ca2ff; |
||||
} |
||||
|
||||
|
||||
.image { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
margin-bottom: 20rpx; |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
.text { |
||||
font-size: 26rpx; |
||||
line-height: 26rpx; |
||||
width: 104rpx; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
color: #3A3C40; |
||||
} |
||||
|
||||
.example-body { |
||||
/* #ifndef APP-NVUE */ |
||||
display: block; |
||||
/* #endif */ |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue