u-grid-item.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="u-grid-item" :hover-class="parentData.hoverClass"
  3. :hover-stay-time="200" @tap="click" :style="{
  4. background: bgColor,
  5. width: width,
  6. }">
  7. <view class="u-grid-item-box" :style="customStyle" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
  8. <slot />
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. /**
  14. * gridItem 提示
  15. * @description 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。搭配u-grid使用
  16. * @tutorial https://www.uviewui.com/components/grid.html
  17. * @property {String} bg-color 宫格的背景颜色(默认#ffffff)
  18. * @property {String Number} index 点击宫格时,返回的值
  19. * @property {Object} custom-style 自定义样式,对象形式
  20. * @event {Function} click 点击宫格触发
  21. * @example <u-grid-item></u-grid-item>
  22. */
  23. export default {
  24. name: "u-grid-item",
  25. props: {
  26. // 背景颜色
  27. bgColor: {
  28. type: String,
  29. default: '#ffffff'
  30. },
  31. // 点击时返回的index
  32. index: {
  33. type: [Number, String],
  34. default: ''
  35. },
  36. // 自定义样式,对象形式
  37. customStyle: {
  38. type: Object,
  39. default() {
  40. return {
  41. padding: '30rpx 0'
  42. }
  43. }
  44. }
  45. },
  46. data() {
  47. return {
  48. parentData: {
  49. hoverClass: '', // 按下去的时候,是否显示背景灰色
  50. col: 3, // 父组件划分的宫格数
  51. border: true, // 是否显示边框,根据父组件决定
  52. }
  53. };
  54. },
  55. created() {
  56. // 父组件的实例
  57. this.updateParentData();
  58. // this.parent在updateParentData()中定义
  59. this.parent.children.push(this);
  60. },
  61. computed: {
  62. // 每个grid-item的宽度
  63. width() {
  64. return 100 / Number(this.parentData.col) + '%';
  65. },
  66. },
  67. methods: {
  68. // 获取父组件的参数
  69. updateParentData() {
  70. // 此方法写在mixin中
  71. this.getParentData('u-grid');
  72. },
  73. click() {
  74. this.$emit('click', this.index);
  75. this.parent && this.parent.click(this.index);
  76. }
  77. }
  78. };
  79. </script>
  80. <style scoped lang="scss">
  81. @import "../../libs/css/style.components.scss";
  82. .u-grid-item {
  83. box-sizing: border-box;
  84. background: #fff;
  85. @include vue-flex;
  86. align-items: center;
  87. justify-content: center;
  88. position: relative;
  89. flex-direction: column;
  90. /* #ifdef MP */
  91. position: relative;
  92. float: left;
  93. /* #endif */
  94. }
  95. .u-grid-item-hover {
  96. background: #f7f7f7 !important;
  97. }
  98. .u-grid-marker-box {
  99. position: absolute;
  100. /* #ifndef APP-NVUE */
  101. display: inline-flex;
  102. /* #endif */
  103. line-height: 0;
  104. }
  105. .u-grid-marker-wrap {
  106. position: absolute;
  107. }
  108. .u-grid-item-box {
  109. padding: 30rpx 0;
  110. @include vue-flex;
  111. align-items: center;
  112. justify-content: center;
  113. flex-direction: column;
  114. flex: 1;
  115. width: 100%;
  116. height: 100%;
  117. }
  118. </style>