123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <!-- #ifndef APP-NVUE -->
- <view
- class="u-grid-item"
- hover-class="u-grid-item--hover-class"
- :hover-stay-time="200"
- @tap="clickHandler"
- :class="classes"
- :style="[itemStyle]"
- >
- <slot />
- </view>
- <!-- #endif -->
- <!-- #ifdef APP-NVUE -->
- <view
- class="u-grid-item"
- :hover-stay-time="200"
- @tap="clickHandler"
- :class="classes"
- :style="[itemStyle]"
- >
- <slot />
- </view>
- <!-- #endif -->
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: "u-grid-item",
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- parentData: {
- col: 3,
- border: true,
- },
-
- width: 0,
-
- classes: [],
- };
- },
- mounted() {
- this.init()
- },
- computed: {
-
-
- width() {
- return 100 / Number(this.parentData.col) + '%'
- },
-
- itemStyle() {
- const style = {
- background: this.bgColor,
- width: this.width
- }
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- }
- },
- methods: {
- init() {
-
-
- uni.$on('$uGridItem', () => {
- this.gridItemClasses()
- })
-
- this.updateParentData()
-
-
- this.$nextTick(function(){
- this.getItemWidth()
- })
-
-
- uni.$emit('$uGridItem')
- this.gridItemClasses()
- },
-
- updateParentData() {
-
- this.getParentData('u-grid');
- },
- clickHandler() {
- let name = this.name
-
- const children = this.parent?.children
- if(children && this.name === null) {
- name = children.findIndex(child => child === this)
- }
-
- this.parent && this.parent.childClick(name)
- this.$emit('click', name)
- },
- async getItemWidth() {
-
- let width = 0
- if(this.parent) {
-
- const parentWidth = await this.getParentWidth()
- width = parentWidth / Number(this.parentData.col) + 'px'
- }
- this.width = width
- },
-
- getParentWidth() {
-
-
- const dom = uni.requireNativePlugin('dom')
- return new Promise(resolve => {
-
- dom.getComponentRect(this.parent.$refs['u-grid'], res => {
- resolve(res.size.width)
- })
- })
-
- },
- gridItemClasses() {
- if(this.parentData.border) {
- const classes = []
- this.parent.children.map((child, index) =>{
- if(this === child) {
- const len = this.parent.children.length
-
- if((index + 1) % this.parentData.col !== 0 && index + 1 !== len) {
- classes.push('u-border-right')
- }
-
-
- const lessNum = len % this.parentData.col === 0 ? this.parentData.col : len % this.parentData.col
-
- if(index < len - lessNum) {
- classes.push('u-border-bottom')
- }
- }
- })
-
-
- classes = classes.join(' ')
-
- this.classes = classes
- }
- }
- },
- beforeDestroy() {
-
- uni.$off('$uGridItem')
- }
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-grid-item-hover-class-opcatiy:.5 !default;
- $u-grid-item-margin-top:1rpx !default;
- $u-grid-item-border-right-width:0.5px !default;
- $u-grid-item-border-bottom-width:0.5px !default;
- $u-grid-item-border-right-color:$u-border-color !default;
- $u-grid-item-border-bottom-color:$u-border-color !default;
- .u-grid-item {
- align-items: center;
- justify-content: center;
- position: relative;
- flex-direction: column;
-
- box-sizing: border-box;
- display: flex;
-
-
- position: relative;
- float: left;
-
-
- margin-top:$u-grid-item-margin-top;
-
- &--hover-class {
- opacity:$u-grid-item-hover-class-opcatiy;
- }
- }
-
-
- .u-border-right {
- border-right-width:$u-grid-item-border-right-width;
- border-color: $u-grid-item-border-right-color;
- }
- .u-border-bottom {
- border-bottom-width:$u-grid-item-border-bottom-width;
- border-color:$u-grid-item-border-bottom-color;
- }
-
- </style>
|