12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <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">
- <view class="van-tabbar-item__icon">
- <van-icon v-if="icon" :name="icon" :class-prefix="iconPrefix" custom-class="van-tabbar-item__icon__inner"></van-icon>
- <block v-else>
- <slot v-if="active" name="icon-active"></slot>
- <slot v-else name="icon"></slot>
- </block>
- <van-info :dot="dot" :info="info" custom-class="van-tabbar-item__info"></van-info>
- </view>
- <view class="van-tabbar-item__text">
- <slot></slot>
- </view>
- </view></uni-shadow-root>
- </template>
- <wxs src="../wxs/utils.wxs" module="utils"></wxs>
- <script>
- import VanIcon from '../icon/index.vue'
- import VanInfo from '../info/index.vue'
- global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-info': VanInfo}}
- global['__wxRoute'] = 'weapp/lib/tabbar-item/index'
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- var component_1 = require("../common/component");
- var relation_1 = require("../common/relation");
- (0, component_1.VantComponent)({
- props: {
- info: null,
- name: null,
- icon: String,
- dot: Boolean,
- url: {
- type: String,
- value: '',
- },
- linkType: {
- type: String,
- value: 'redirectTo',
- },
- iconPrefix: {
- type: String,
- value: 'van-icon',
- },
- },
- relation: (0, relation_1.useParent)('tabbar'),
- data: {
- active: false,
- activeColor: '',
- inactiveColor: '',
- },
- methods: {
- onClick: function () {
- var parent = this.parent;
- if (parent) {
- var index = parent.children.indexOf(this);
- var active = this.data.name || index;
- if (active !== this.data.active) {
- parent.$emit('change', active);
- }
- }
- var _a = this.data, url = _a.url, linkType = _a.linkType;
- if (url && wx[linkType]) {
- return wx[linkType]({ url: url });
- }
- this.$emit('click');
- },
- updateFromParent: function () {
- var parent = this.parent;
- if (!parent) {
- return;
- }
- var index = parent.children.indexOf(this);
- var parentData = parent.data;
- var data = this.data;
- var active = (data.name || index) === parentData.active;
- var patch = {};
- if (active !== data.active) {
- patch.active = active;
- }
- if (parentData.activeColor !== data.activeColor) {
- patch.activeColor = parentData.activeColor;
- }
- if (parentData.inactiveColor !== data.inactiveColor) {
- patch.inactiveColor = parentData.inactiveColor;
- }
- if (Object.keys(patch).length > 0) {
- this.setData(patch);
- }
- },
- },
- });
- export default global['__wxComponents']['weapp/lib/tabbar-item/index']
- </script>
- <style platform="mp-weixin">
- @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}
- </style>
|