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.

преди 2 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="u-grid-item" :hover-class="hoverClass"
  3. :hover-stay-time="200" @tap="click" :style="{
  4. background: bgColor,
  5. width: width,
  6. }">
  7. <view class="u-grid-item-box" :class="[showBorder ? '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. * @event {Function} click 点击宫格触发
  20. * @example <u-grid-item></u-grid-item>
  21. */
  22. export default {
  23. name: "u-grid-item",
  24. props: {
  25. // 背景颜色
  26. bgColor: {
  27. type: String,
  28. default: '#ffffff'
  29. },
  30. // 点击时返回的index
  31. index: {
  32. type: [Number, String],
  33. default: ''
  34. },
  35. },
  36. // 父组件通过provide传递过来的整个this
  37. inject: ['uGrid'],
  38. data() {
  39. return {
  40. hoverClass: '', // 按下去的时候,是否显示背景灰色
  41. };
  42. },
  43. created() {
  44. this.hoverClass = this.uGrid.hoverClass;
  45. },
  46. computed: {
  47. // 小于2,显示2列;大于12,显示12列
  48. colNum() {
  49. return this.col < 2 ? 2 : this.col > 12 ? 12 : this.col;
  50. },
  51. // 每个grid-item的宽度
  52. width() {
  53. return 100 / Number(this.uGrid.col) + '%';
  54. },
  55. // 是否显示边框
  56. // 为了迎合演示的需要,从created生命周期移到此,以为演示中可能需要动态修改有无边框
  57. showBorder() {
  58. return this.uGrid.border;
  59. }
  60. },
  61. methods: {
  62. click() {
  63. this.$emit('click', this.index);
  64. this.uGrid.click(this.index);
  65. }
  66. },
  67. };
  68. </script>
  69. <style scoped lang="scss">
  70. @import "../../libs/css/style.components.scss";
  71. .u-grid-item {
  72. box-sizing: border-box;
  73. background: #fff;
  74. display: flex;
  75. align-items: center;
  76. justify-content: center;
  77. position: relative;
  78. flex-direction: column;
  79. /* #ifdef MP */
  80. position: relative;
  81. float: left;
  82. /* #endif */
  83. }
  84. .u-grid-item-hover {
  85. background: #f7f7f7 !important;
  86. }
  87. .u-grid-marker-box {
  88. position: absolute;
  89. display: inline-block;
  90. line-height: 0;
  91. }
  92. .u-grid-marker-wrap {
  93. position: absolute;
  94. }
  95. .u-grid-item-box {
  96. padding: 30rpx 0;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. flex-direction: column;
  101. flex: 1;
  102. width: 100%;
  103. height: 100%;
  104. }
  105. </style>