
<style lang="less">
@import './index.less';
</style>

<template>
  <van-grid
    :square="square"
    :gutter="gutter"
    :clickable="clickable"
    :column-num="columnNum"
    :center="center"
    :border="border"
    :style="style"
  >
    <slot />
  </van-grid>
</template>

<script>
import { ParentMixin } from '../mixins/relation';
import { Grid } from 'vant';

export default {
  name: 'grid',
  components: {
    VanGrid: Grid
  },
  // 继承grid的属性
  mixins: [ParentMixin('ypGrid'), Grid],

  props: {

    // ------------------  扩展 --------------- //
    /**
     * 背景颜色
     */
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    /**
     * 未选中的颜色
     */
    inactiveColor: {
      type: String,
      default: '#7d7e80'
    }


  },
  computed: {
    style () {
      const style = {
        backgroundColor: this.backgroundColor
      };

      return style;
    }
  }
};
</script>
