index.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <uni-shadow-root class="vant-grid-index"><view :class="'van-grid custom-class '+(border && !gutter ? 'van-hairline--top' : '')" :style="viewStyle">
  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. current: 'grid',
  15. },
  16. props: {
  17. square: {
  18. type: Boolean,
  19. observer: 'updateChildren',
  20. },
  21. gutter: {
  22. type: [Number, String],
  23. value: 0,
  24. observer: 'updateChildren',
  25. },
  26. clickable: {
  27. type: Boolean,
  28. observer: 'updateChildren',
  29. },
  30. columnNum: {
  31. type: Number,
  32. value: 4,
  33. observer: 'updateChildren',
  34. },
  35. center: {
  36. type: Boolean,
  37. value: true,
  38. observer: 'updateChildren',
  39. },
  40. border: {
  41. type: Boolean,
  42. value: true,
  43. observer: 'updateChildren',
  44. },
  45. direction: {
  46. type: String,
  47. observer: 'updateChildren',
  48. },
  49. iconSize: {
  50. type: String,
  51. observer: 'updateChildren',
  52. },
  53. },
  54. data: {
  55. viewStyle: '',
  56. },
  57. created() {
  58. const { gutter } = this.data;
  59. if (gutter) {
  60. this.setData({
  61. viewStyle: `padding-left: ${addUnit(gutter)}`,
  62. });
  63. }
  64. },
  65. methods: {
  66. updateChildren() {
  67. this.children.forEach((child) => {
  68. child.updateStyle();
  69. });
  70. },
  71. },
  72. });
  73. export default global['__wxComponents']['vant/grid/index']
  74. </script>
  75. <style platform="mp-weixin">
  76. @import '../common/index.css';.van-grid{position:relative;box-sizing:border-box;overflow:hidden}
  77. </style>