index.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <uni-shadow-root class="vant-row-index"><view class="custom-class van-row" :style="viewStyle">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <script>
  7. global['__wxRoute'] = 'vant/row/index'
  8. import { VantComponent } from '../common/component';
  9. VantComponent({
  10. relation: {
  11. name: 'col',
  12. type: 'descendant',
  13. current: 'row',
  14. linked(target) {
  15. if (this.data.gutter) {
  16. target.setGutter(this.data.gutter);
  17. }
  18. },
  19. },
  20. props: {
  21. gutter: {
  22. type: Number,
  23. observer: 'setGutter',
  24. },
  25. },
  26. data: {
  27. viewStyle: '',
  28. },
  29. mounted() {
  30. if (this.data.gutter) {
  31. this.setGutter();
  32. }
  33. },
  34. methods: {
  35. setGutter() {
  36. const { gutter } = this.data;
  37. const margin = `-${Number(gutter) / 2}px`;
  38. const viewStyle = gutter
  39. ? `margin-right: ${margin}; margin-left: ${margin};`
  40. : '';
  41. this.setData({ viewStyle });
  42. this.getRelationNodes('../col/index').forEach((col) => {
  43. col.setGutter(this.data.gutter);
  44. });
  45. },
  46. },
  47. });
  48. export default global['__wxComponents']['vant/row/index']
  49. </script>
  50. <style platform="mp-weixin">
  51. @import '../common/index.css';.van-row:after{display:table;clear:both;content:""}
  52. </style>