wx-mini-weview/components/tabbar-item/tabbar-item.js

weixin UI

const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true 
  },

  relations: {
    '../tabbar/tabbar': {
      type: 'parent',
      linked(target) {
        this.linkParentNode('tabbar', target);
      },
      unlinked() {
        this.unlinkParentNode('tabbar');
      }
    }, 
    '../vtabbar/vtabbar': {
      type: 'parent',
      linked(target) {
        this.linkParentNode('vtabbar', target);
      },
      unlinked() {
        this.unlinkParentNode('vtabbar');
      }
    }
  },

  behaviors: [
    WvInheritable({
      properties: {
        name: {
          type: String,
          value: ''
        },
        icon: {
          type: String,
          value: ''
        },
        iconActive: {
          type: String,
          value: ''
        },
        disabled: {
          type: Boolean,
          value: false
        },
        customClass: {
          type: String,
          value: ''
        },
        
        iconMode: {
          type: String,
          value: 'left'  // left | right | top | bottom
        },

        align: {
          type: String,
          value: 'center'  // center | left | right
        },
        stretch: {
          type: Boolean,
          value: true
        },
        
        theme: {
          type: String,
          value: 'wv-theme-transparent'
        },
        themeActive: {
          type: String,
          value: 'wv-theme-plain'
        },
        
        color: {
          type: String,
          value: ''
        },
        fontSize: {
          type: String,
          value: ''
        },
        colorActive: {
          type: String,
          value: ''
        }, 
        fontSizeActive: {
          type: String,
          value: ''
        },
        bold: {
          type: Boolean,
          value: false
        },
        boldActive: {
          type: Boolean,
          value: false
        },
        background: {
          type: String,
          value: ''
        },
        backgroundActive: {
          type: String,
          value: ''
        },
        scaleActive: {
          type: Number,
          value: 1
        },
        
        textColor: {
          type: String,
          value: ''
        },
        textFontSize: {
          type: String,
          value: ''
        },
        textColorActive: {
          type: String,
          value: ''
        },
        textFontSizeActive: {
          type: String,
          value: ''
        },
        
        iconSize: {
          type: String,
          value: ''
        },
        iconColor: {
          type: String,
          value: ''
        },
        iconColorActive: {
          type: String,
          value: ''
        },
        iconFontSizeActive: {
          type: String,
          value: ''
        },

        padding: {
          type: String,
          value: ''
        },
        radius: {
          type: String,
          value: ''
        },
        
        arcSize: {
          type: String,
          value: '0'
        },
        
        // 导航属性
        url: {
          type: String,
          value: ''
        },
        openType: {
          type: String,
          value: 'navigateTo'  // redirectTo | switchTab
        },
        delta: {
          type: Number,
          value: 1
        },

        active: {
          type: Boolean,
          value: false
        },

        width: {
          type: String,
          value: ''
        },
        height: {
          type: String,
          value: ''
        }
      }
    })
  ],

  data: {
    index: -1,
  },

  lifetimes: {
    attached() {
      const that = this;
      if (!that.data.wvInheritableApply.name) {
        let randomName = 'tabitem_' + Math.floor(Math.random() * 10000);
        that.setInheritedProps({
          name: randomName
        });
      }
    }
  },

  methods: {
    onClick() {
      const that = this;
      
      if (that.data.wvInheritableApply.disabled) return;
      
      const tabbarParent = that.getParentNode('tabbar');
      if (tabbarParent) {
        tabbarParent.setActive(that.data.wvInheritableApply.name);
      }
      
      const vTabbarParent = that.getParentNode('vtabbar');
      if (vTabbarParent) {
        vTabbarParent.setActive(that.data.wvInheritableApply.name);
      }
    },

    setActive(active) {
      const that = this;
      
      if (that.data.wvInheritableApply.disabled && active === true) {
        return false; 
      }
      
      that.setData({ active });
      
      return true; 
    },

    getRect() {
      return new Promise((resolve) => {
        wx.createSelectorQuery()
          .in(this)
          .select('.wv-tabbar-item')
          .boundingClientRect()
          .exec((rect = []) => {
            resolve(rect[0]);
          });
      });
    }
  }
});