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