index.vue 1.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <uni-shadow-root class="vant-tab-index"><view v-if="animated || inited" :class="'custom-class '+(utils.bem('tab__pane', { active, inactive: !active }))" :style="(animated || active ? '' : 'display: none;')+' '+(width ? 'width:' + width + 'px;' : '')">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  7. <script>
  8. global['__wxRoute'] = 'vant/tab/index'
  9. import { VantComponent } from '../common/component';
  10. VantComponent({
  11. relation: {
  12. name: 'tabs',
  13. type: 'ancestor'
  14. },
  15. props: {
  16. dot: Boolean,
  17. info: null,
  18. title: String,
  19. disabled: Boolean,
  20. titleStyle: String
  21. },
  22. data: {
  23. width: null,
  24. inited: false,
  25. active: false,
  26. animated: false
  27. },
  28. watch: {
  29. title: 'update',
  30. disabled: 'update',
  31. dot: 'update',
  32. info: 'update',
  33. titleStyle: 'update'
  34. },
  35. methods: {
  36. update() {
  37. const parent = this.getRelationNodes('../tabs/index')[0];
  38. if (parent) {
  39. parent.updateTabs();
  40. }
  41. }
  42. }
  43. });
  44. export default global['__wxComponents']['vant/tab/index']
  45. </script>
  46. <style platform="mp-weixin">
  47. @import '../common/index.css';.van-tab__pane{box-sizing:border-box;overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
  48. </style>