123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <view
- :class="'custom-class ' + (border ? 'van-hairline--top-bottom' : '') + ' ' + utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom })"
- :style="zIndex ? 'z-index: ' + zIndex : ''"
- >
- <slot />
- </view>
- </template>
- <script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
- <script>
- import { VantComponent } from '../common/component';
- export default {
- data() {
- return {};
- },
- '../tabbar-item/index': {
- name: 'tabbar-item',
- type: 'descendant',
- current: 'tabbar',
- linked(target) {
- target.parent = this;
- target.updateFromParent();
- },
- unlinked() {
- this.updateChildren();
- }
- },
- props: {
- active: {
- type: null
- },
- activeColor: {
- type: String
- },
- inactiveColor: {
- type: String
- },
- fixed: {
- type: Boolean,
- default: true
- },
- border: {
- type: Boolean,
- default: true
- },
- zIndex: {
- type: Number,
- default: 1
- },
- safeAreaInsetBottom: {
- type: Boolean,
- default: true
- }
- },
- methods: {
- updateChildren() {
- const { children } = this;
- if (!Array.isArray(children) || !children.length) {
- return Promise.resolve();
- }
- return Promise.all(children.map((child) => child.updateFromParent()));
- },
- onChange(child) {
- const index = this.children.indexOf(child);
- const active = child.data.name || index;
- if (active !== this.active) {
- this.$emit('change', active);
- }
- }
- },
- watch: {
- active: {
- handler: function () {
- const { children } = this;
- if (!Array.isArray(children) || !children.length) {
- return Promise.resolve();
- }
- return Promise.all(children.map((child) => child.updateFromParent()));
- },
- immediate: true
- },
- activeColor: {
- handler: function () {
- const { children } = this;
- if (!Array.isArray(children) || !children.length) {
- return Promise.resolve();
- }
- return Promise.all(children.map((child) => child.updateFromParent()));
- },
- immediate: true
- },
- inactiveColor: {
- handler: function () {
- const { children } = this;
- if (!Array.isArray(children) || !children.length) {
- return Promise.resolve();
- }
- return Promise.all(children.map((child) => child.updateFromParent()));
- },
- immediate: true
- }
- }
- };
- </script>
- <style>
- @import './index.css';
- </style>
|