You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
2.8 KiB

3 years ago
  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>