25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 

96 satır
2.0 KiB

  1. <template>
  2. <view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
  3. </template>
  4. <script>
  5. /**
  6. * grid 宫格布局
  7. * @description 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。
  8. * @tutorial https://www.uviewui.com/components/grid.html
  9. * @property {String Number} col 宫格的列数(默认3)
  10. * @property {Boolean} border 是否显示宫格的边框(默认true)
  11. * @property {Boolean} hover-class 点击宫格的时候,是否显示按下的灰色背景(默认false)
  12. * @event {Function} click 点击宫格触发
  13. * @example <u-grid :col="3" @click="click"></u-grid>
  14. */
  15. export default {
  16. name: 'u-grid',
  17. props: {
  18. // 分成几列
  19. col: {
  20. type: [Number, String],
  21. default: 3
  22. },
  23. // 是否显示边框
  24. border: {
  25. type: Boolean,
  26. default: true
  27. },
  28. // 宫格对齐方式,表现为数量少的时候,靠左,居中,还是靠右
  29. align: {
  30. type: String,
  31. default: 'left'
  32. },
  33. // 宫格按压时的样式类,"none"为无效果
  34. hoverClass: {
  35. type: String,
  36. default: 'u-hover-class'
  37. }
  38. },
  39. data() {
  40. return {
  41. index: 0,
  42. }
  43. },
  44. provide() {
  45. return {
  46. uGrid: this
  47. }
  48. },
  49. computed: {
  50. // 宫格对齐方式
  51. gridStyle() {
  52. let style = {};
  53. switch(this.align) {
  54. case 'left':
  55. style.justifyContent = 'flex-start';
  56. break;
  57. case 'center':
  58. style.justifyContent = 'center';
  59. break;
  60. case 'right':
  61. style.justifyContent = 'flex-end';
  62. break;
  63. default: style.justifyContent = 'flex-start';
  64. };
  65. return style;
  66. }
  67. },
  68. methods: {
  69. click(index) {
  70. this.$emit('click', index);
  71. }
  72. }
  73. };
  74. </script>
  75. <style scoped lang="scss">
  76. @import "../../libs/css/style.components.scss";
  77. .u-grid {
  78. width: 100%;
  79. /* #ifdef MP */
  80. position: relative;
  81. box-sizing: border-box;
  82. overflow: hidden;
  83. /* #endif */
  84. /* #ifndef MP */
  85. display: flex;
  86. flex-wrap: wrap;
  87. align-items: center;
  88. /* #endif */
  89. }
  90. </style>