{"version":3,"file":"su-tabbar.js","sources":["../../../../../../src/sheep/ui/su-tabbar/su-tabbar.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS10YWJiYXIvc3UtdGFiYmFyLnZ1ZQ"],"sourcesContent":["<!-- 底部导航栏 -->\r\n<template>\r\n  <view class=\"u-tabbar\">\r\n    <view\r\n      class=\"u-tabbar__content\"\r\n      ref=\"u-tabbar__content\"\r\n      @touchmove.stop.prevent=\"\"\r\n      :class=\"[border && 'u-border-top', fixed && 'u-tabbar--fixed', { 'mid-tabbar': midTabBar }]\"\r\n      :style=\"[tabbarStyle]\"\r\n    >\r\n      <view class=\"u-tabbar__content__item-wrapper\">\r\n        <slot></slot>\r\n      </view>\r\n      <view v-if=\"safeAreaInsetBottom\" :style=\"[{ height: safeBottomHeight + 'px' }]\"></view>\r\n    </view>\r\n    <view\r\n      class=\"u-tabbar__placeholder\"\r\n      v-if=\"placeholder\"\r\n      :style=\"{\r\n        height: placeholderHeight + 'px',\r\n      }\"\r\n    ></view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n// #ifdef APP-NVUE\r\nconst dom = uni.requireNativePlugin('dom')\r\n// #endif\r\n/**\r\n * Tabbar 底部导航栏\r\n * @description 此组件提供了自定义tabbar的能力。\r\n * @property {String | Number}\tvalue\t\t\t\t当前匹配项的name\r\n * @property {Boolean}\t\t\tsafeAreaInsetBottom\t是否为iPhoneX留出底部安全距离（默认 true ）\r\n * @property {Boolean}\t\t\tborder\t\t\t\t是否显示上方边框（默认 true ）\r\n * @property {String | Number}\tzIndex\t\t\t\t元素层级z-index（默认 1 ）\r\n * @property {String}\t\t\tactiveColor\t\t\t选中标签的颜色（默认 '#1989fa' ）\r\n * @property {String}\t\t\tinactiveColor\t\t未选中标签的颜色（默认 '#7d7e80' ）\r\n * @property {Boolean}\t\t\tfixed\t\t\t\t是否固定在底部（默认 true ）\r\n * @property {Boolean}\t\t\tplaceholder\t\t\tfixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）\r\n * @property {Object}\t\t\tcustomStyle\t\t\t定义需要用到的外部样式\r\n *\r\n */\r\n\r\nimport { deepMerge, addStyle, sleep } from '@/sheep/helper'\r\nimport sheep from '@/sheep'\r\n\r\nexport default {\r\n  name: 'su-tabbar',\r\n  props: {\r\n    customStyle: {\r\n      type: [Object, String],\r\n      default: () => ({}),\r\n    },\r\n    customClass: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    // 跳转的页面路径\r\n    url: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    // 页面跳转的类型\r\n    linkType: {\r\n      type: String,\r\n      default: 'navigateTo',\r\n    },\r\n    // 当前匹配项的name\r\n    value: {\r\n      type: [String, Number, null],\r\n      default: '',\r\n    },\r\n    // 是否为iPhoneX留出底部安全距离\r\n    safeAreaInsetBottom: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    // 是否显示上方边框\r\n    border: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    // 元素层级z-index\r\n    zIndex: {\r\n      type: [String, Number],\r\n      default: 10,\r\n    },\r\n    // 选中标签的颜色\r\n    activeColor: {\r\n      type: String,\r\n      default: '#1989fa',\r\n    },\r\n    // 未选中标签的颜色\r\n    inactiveColor: {\r\n      type: String,\r\n      default: '#7d7e80',\r\n    },\r\n    // 是否固定在底部\r\n    fixed: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    // fixed定位固定在底部时，是否生成一个等高元素防止塌陷\r\n    placeholder: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    midTabBar: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      placeholderHeight: 0,\r\n      safeBottomHeight: sheep.$platform.device.safeAreaInsets.bottom,\r\n    }\r\n  },\r\n  computed: {\r\n    tabbarStyle() {\r\n      const style = {\r\n        zIndex: this.zIndex,\r\n      }\r\n      // 合并来自父组件的customStyle样式\r\n      return deepMerge(style, addStyle(this.customStyle))\r\n    },\r\n    // 监听多个参数的变化，通过在computed执行对应的操作\r\n    updateChild() {\r\n      return [this.value, this.activeColor, this.inactiveColor]\r\n    },\r\n    updatePlaceholder() {\r\n      return [this.fixed, this.placeholder]\r\n    },\r\n  },\r\n  watch: {\r\n    updateChild() {\r\n      // 如果updateChildren中的元素发生了变化，则执行子元素初始化操作\r\n      this.updateChildren()\r\n    },\r\n    updatePlaceholder() {\r\n      // 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度\r\n      this.setPlaceholderHeight()\r\n    },\r\n  },\r\n  created() {\r\n    this.children = []\r\n  },\r\n  mounted() {\r\n    this.setPlaceholderHeight()\r\n  },\r\n  methods: {\r\n    updateChildren() {\r\n      // 如果存在子元素，则执行子元素的updateFromParent进行更新数据\r\n      this.children.length && this.children.map((child) => child.updateFromParent())\r\n    },\r\n    getRect(selector, all) {\r\n      return new Promise((resolve) => {\r\n        uni\r\n          .createSelectorQuery()\r\n          .in(this)\r\n          [all ? 'selectAll' : 'select'](selector)\r\n          .boundingClientRect((rect) => {\r\n            if (all && Array.isArray(rect) && rect.length) {\r\n              resolve(rect)\r\n            }\r\n            if (!all && rect) {\r\n              resolve(rect)\r\n            }\r\n          })\r\n          .exec()\r\n      })\r\n    },\r\n    // 设置用于防止塌陷元素的高度\r\n    async setPlaceholderHeight() {\r\n      if (!this.fixed || !this.placeholder) return\r\n      // 延时一定时间\r\n      await sleep(20)\r\n      // #ifndef APP-NVUE\r\n      this.getRect('.u-tabbar__content').then(({ height = 50 }) => {\r\n        // 修复IOS safearea bottom 未填充高度\r\n        this.placeholderHeight = height\r\n      })\r\n      // #endif\r\n\r\n      // #ifdef APP-NVUE\r\n      dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {\r\n        const { size } = res\r\n        this.placeholderHeight = size.height\r\n      })\r\n      // #endif\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.u-tabbar {\r\n  display: flex;\r\n  flex: 1;\r\n  justify-content: center;\r\n\r\n  &__content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    background-color: #fff;\r\n    box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);\r\n\r\n    &__item-wrapper {\r\n      height: 50px;\r\n      display: flex;\r\n      justify-content: space-around;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  .mid-tabbar {\r\n    border-radius: 30rpx 30rpx 0 0;\r\n  }\r\n\r\n  &--fixed {\r\n    position: fixed;\r\n    bottom: -1px;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-tabbar/su-tabbar.vue'\nwx.createComponent(Component)"],"names":["sheep","deepMerge","addStyle","uni","sleep"],"mappings":"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"}