index.vue 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <uni-shadow-root class="weapp-lib-tabbar-item-index"><view :class="(utils.bem('tabbar-item', { active }))+' custom-class'" :style="'color: '+(active ? activeColor : inactiveColor)" @click="onClick">
  3. <view class="van-tabbar-item__icon">
  4. <van-icon v-if="icon" :name="icon" :class-prefix="iconPrefix" custom-class="van-tabbar-item__icon__inner"></van-icon>
  5. <block v-else>
  6. <slot v-if="active" name="icon-active"></slot>
  7. <slot v-else name="icon"></slot>
  8. </block>
  9. <van-info :dot="dot" :info="info" custom-class="van-tabbar-item__info"></van-info>
  10. </view>
  11. <view class="van-tabbar-item__text">
  12. <slot></slot>
  13. </view>
  14. </view></uni-shadow-root>
  15. </template>
  16. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  17. <script>
  18. import VanIcon from '../icon/index.vue'
  19. import VanInfo from '../info/index.vue'
  20. global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-info': VanInfo}}
  21. global['__wxRoute'] = 'weapp/lib/tabbar-item/index'
  22. "use strict";
  23. Object.defineProperty(exports, "__esModule", { value: true });
  24. var component_1 = require("../common/component");
  25. var relation_1 = require("../common/relation");
  26. (0, component_1.VantComponent)({
  27. props: {
  28. info: null,
  29. name: null,
  30. icon: String,
  31. dot: Boolean,
  32. url: {
  33. type: String,
  34. value: '',
  35. },
  36. linkType: {
  37. type: String,
  38. value: 'redirectTo',
  39. },
  40. iconPrefix: {
  41. type: String,
  42. value: 'van-icon',
  43. },
  44. },
  45. relation: (0, relation_1.useParent)('tabbar'),
  46. data: {
  47. active: false,
  48. activeColor: '',
  49. inactiveColor: '',
  50. },
  51. methods: {
  52. onClick: function () {
  53. var parent = this.parent;
  54. if (parent) {
  55. var index = parent.children.indexOf(this);
  56. var active = this.data.name || index;
  57. if (active !== this.data.active) {
  58. parent.$emit('change', active);
  59. }
  60. }
  61. var _a = this.data, url = _a.url, linkType = _a.linkType;
  62. if (url && wx[linkType]) {
  63. return wx[linkType]({ url: url });
  64. }
  65. this.$emit('click');
  66. },
  67. updateFromParent: function () {
  68. var parent = this.parent;
  69. if (!parent) {
  70. return;
  71. }
  72. var index = parent.children.indexOf(this);
  73. var parentData = parent.data;
  74. var data = this.data;
  75. var active = (data.name || index) === parentData.active;
  76. var patch = {};
  77. if (active !== data.active) {
  78. patch.active = active;
  79. }
  80. if (parentData.activeColor !== data.activeColor) {
  81. patch.activeColor = parentData.activeColor;
  82. }
  83. if (parentData.inactiveColor !== data.inactiveColor) {
  84. patch.inactiveColor = parentData.inactiveColor;
  85. }
  86. if (Object.keys(patch).length > 0) {
  87. this.setData(patch);
  88. }
  89. },
  90. },
  91. });
  92. export default global['__wxComponents']['weapp/lib/tabbar-item/index']
  93. </script>
  94. <style platform="mp-weixin">
  95. @import '../common/index.css';.weapp-lib-tabbar-item-index{flex:1}.van-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,#646566);display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.van-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.van-tabbar-item__icon__inner{display:block;min-width:1em}.van-tabbar-item--active{color:var(--tabbar-item-active-color,#1989fa)}.van-tabbar-item__info{margin-top:2px}
  96. </style>