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.

108 lines
2.7 KiB

3 years ago
  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. watch: {
  45. // 当父组件需要子组件需要共享的参数发生了变化,手动通知子组件
  46. parentData() {
  47. if(this.children.length) {
  48. this.children.map(child => {
  49. // 判断子组件(u-radio)如果有updateParentData方法的话,就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
  50. typeof(child.updateParentData) == 'function' && child.updateParentData();
  51. })
  52. }
  53. },
  54. },
  55. created() {
  56. // 如果将children定义在data中,在微信小程序会造成循环引用而报错
  57. this.children = [];
  58. },
  59. computed: {
  60. // 计算父组件的值是否发生变化
  61. parentData() {
  62. return [this.hoverClass, this.col, this.size, this.border];
  63. },
  64. // 宫格对齐方式
  65. gridStyle() {
  66. let style = {};
  67. switch(this.align) {
  68. case 'left':
  69. style.justifyContent = 'flex-start';
  70. break;
  71. case 'center':
  72. style.justifyContent = 'center';
  73. break;
  74. case 'right':
  75. style.justifyContent = 'flex-end';
  76. break;
  77. default: style.justifyContent = 'flex-start';
  78. };
  79. return style;
  80. }
  81. },
  82. methods: {
  83. click(index) {
  84. this.$emit('click', index);
  85. }
  86. }
  87. };
  88. </script>
  89. <style scoped lang="scss">
  90. @import "../../libs/css/style.components.scss";
  91. .u-grid {
  92. width: 100%;
  93. /* #ifdef MP */
  94. position: relative;
  95. box-sizing: border-box;
  96. overflow: hidden;
  97. /* #endif */
  98. /* #ifndef MP */
  99. @include vue-flex;
  100. flex-wrap: wrap;
  101. align-items: center;
  102. /* #endif */
  103. }
  104. </style>