sulibao-mini/tuniao-ui/components/tn-grid-item/tn-grid-item.vue

<template>
  <view
    class="tn-grid-item-class tn-grid-item"
    :class="[
      backgroundColorClass
    ]"
    :hover-class="hoverClass"
    :hover-stay-time="150"
    :style="{
      backgroundColor: backgroundColorStyle,
      width: gridWidth
    }"
    @tap="click"
  >
    <view
      class="tn-grid-item__box"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    mixins: [ componentsColorMixin ],
    name: 'tn-grid-item',
    props: {
      // 序号
      index: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        // 父组件数据
        parentData: {
          // 按下去的样式
          hoverClass: '',
          col: 3
        }
      }
    },
    created() {
      // 父组件实例
      this.updateParentData()
      this.parent.children.push(this)
    },
    computed: {
      // 计算每个宫格的宽度
      gridWidth() {
        // #ifdef MP-WEIXIN
        return '100%'
        // #endif
        // #ifndef MP-WEIXIN
        return 100 / Number(this.parentData.col) + '%'
        // #endif
      },
      // 点击效果
      hoverClass() {
        return this.parentData.hoverClass !== 'none' 
                 ? this.parentData.hoverClass + ' tn-grid-item--hover' 
                 : this.parentData.hoverClass
      }
    },
    methods: {
      // 获取父组件参数
      updateParentData() {
        this.getParentData('tn-grid')
      },
      click() {
        this.$emit('click', this.index)
        this.parent && this.parent.click(this.index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-grid-item {
    box-sizing: border-box;
    background-color: #FFFFFF;
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: row;
    /* #endif */
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    
    /* #ifdef MP */
    // float: left;
    /* #endif */
    
    &__box {
      /* #ifndef APP-NVUE */
      display: flex;
      flex-direction: row;
      /* #endif */
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex: 1;
      width: 100%;
      height: 100%;
    }
    
    &--hover {
      background: $tn-space-color !important;
    }
  }
</style>