index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <uni-shadow-root class="vant-grid-index"><view :class="'van-grid '+(border && !gutter ? 'van-hairline--top' : '')" :style="style">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <script>
  7. global['__wxRoute'] = 'vant/grid/index'
  8. import { VantComponent } from '../common/component';
  9. import { addUnit } from '../common/utils';
  10. VantComponent({
  11. relation: {
  12. name: 'grid-item',
  13. type: 'descendant',
  14. linked(child) {
  15. this.children.push(child);
  16. },
  17. unlinked(child) {
  18. this.children = this.children.filter((item) => item !== child);
  19. }
  20. },
  21. props: {
  22. square: {
  23. type: Boolean,
  24. observer: 'updateChildren'
  25. },
  26. gutter: {
  27. type: [Number, String],
  28. value: 0,
  29. observer: 'updateChildren'
  30. },
  31. clickable: {
  32. type: Boolean,
  33. observer: 'updateChildren'
  34. },
  35. columnNum: {
  36. type: Number,
  37. value: 4,
  38. observer: 'updateChildren'
  39. },
  40. center: {
  41. type: Boolean,
  42. value: true,
  43. observer: 'updateChildren'
  44. },
  45. border: {
  46. type: Boolean,
  47. value: true,
  48. observer: 'updateChildren'
  49. }
  50. },
  51. beforeCreate() {
  52. this.children = [];
  53. },
  54. created() {
  55. const { gutter } = this.data;
  56. if (gutter) {
  57. this.setData({
  58. style: `padding-left: ${addUnit(gutter)}`
  59. });
  60. }
  61. },
  62. methods: {
  63. updateChildren() {
  64. this.children.forEach((child) => {
  65. child.updateStyle();
  66. });
  67. }
  68. }
  69. });
  70. export default global['__wxComponents']['vant/grid/index']
  71. </script>
  72. <style platform="mp-weixin">
  73. @import '../common/index.css';.van-grid{position:relative;box-sizing:border-box;overflow:hidden}
  74. </style>