{"version":3,"file":"su-tabbar-item.js","sources":["../../../../../../src/sheep/ui/su-tabbar-item/su-tabbar-item.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS10YWJiYXItaXRlbS9zdS10YWJiYXItaXRlbS52dWU"],"sourcesContent":["<!-- 自定义底部导航项 -->\r\n<template>\r\n  <view class=\"u-tabbar-item\" :style=\"[addStyle(customStyle)]\">\r\n    <view v-if=\"isCenter\" class=\"tabbar-center-item\">\r\n      <image class=\"center-image\" :src=\"centerImage\" mode=\"aspectFill\"></image>\r\n    </view>\r\n    <template v-else>\r\n      <view class=\"u-tabbar-item__icon\">\r\n        <image\r\n          v-if=\"icon\"\r\n          :name=\"icon\"\r\n          :color=\"isActive ? parentData.activeColor : parentData.color\"\r\n          :size=\"20\"\r\n        ></image>\r\n        <block v-else>\r\n          <slot v-if=\"isActive\" name=\"active-icon\" />\r\n          <slot v-else name=\"inactive-icon\" />\r\n        </block>\r\n        <!-- <u-badge\r\n\t\t\t\t\tabsolute\r\n\t\t\t\t\t:offset=\"[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']\"\r\n\t\t\t\t\t:customStyle=\"badgeStyle\"\r\n\t\t\t\t\t:isDot=\"dot\"\r\n\t\t\t\t\t:value=\"badge || (dot ? 1 : null)\"\r\n\t\t\t\t\t:show=\"dot || badge > 0\"\r\n\t\t\t\t></u-badge> -->\r\n      </view>\r\n\r\n      <slot name=\"text\">\r\n        <text\r\n          class=\"u-tabbar-item__text\"\r\n          :style=\"{\r\n            color: isActive ? parentData.activeColor : parentData.color,\r\n          }\"\r\n        >\r\n          {{ text }}\r\n        </text>\r\n      </slot>\r\n    </template>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n/**\r\n * TabbarItem 底部导航栏子组件\r\n * @description 此组件提供了自定义tabbar的能力。\r\n * @property {String | Number}\tname\t\titem标签的名称，作为与u-tabbar的value参数匹配的标识符\r\n * @property {String}\t\t\ticon\t\tuView内置图标或者绝对路径的图片\r\n * @property {String | Number}\tbadge\t\t右上角的角标提示信息\r\n * @property {Boolean}\t\t\tdot\t\t\t是否显示圆点，将会覆盖badge参数（默认 false ）\r\n * @property {String}\t\t\ttext\t\t描述文本\r\n * @property {Object | String}\tbadgeStyle\t控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）\r\n * @property {Object}\t\t\tcustomStyle\t定义需要用到的外部样式\r\n *\r\n */\r\nimport { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper'\r\nexport default {\r\n  name: 'su-tabbar-item',\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    // item标签的名称，作为与u-tabbar的value参数匹配的标识符\r\n    name: {\r\n      type: [String, Number, null],\r\n      default: '',\r\n    },\r\n    // uView内置图标或者绝对路径的图片\r\n    icon: {\r\n      icon: String,\r\n      default: '',\r\n    },\r\n    // 右上角的角标提示信息\r\n    badge: {\r\n      type: [String, Number, null],\r\n      default: '',\r\n    },\r\n    // 是否显示圆点，将会覆盖badge参数\r\n    dot: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    // 描述文本\r\n    text: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性\r\n    badgeStyle: {\r\n      type: [Object, String],\r\n      default: '',\r\n    },\r\n    isCenter: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    centerImage: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      isActive: false, // 是否处于激活状态\r\n      addStyle,\r\n      parentData: {\r\n        value: null,\r\n        activeColor: '',\r\n        color: '',\r\n      },\r\n      parent: {},\r\n    }\r\n  },\r\n  created() {\r\n    this.init()\r\n  },\r\n  methods: {\r\n    getParentData(parentName = '') {\r\n      // 避免在created中去定义parent变量\r\n      if (!this.parent) this.parent = {}\r\n      // 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)\r\n      // 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性\r\n      // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化\r\n      // 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取\r\n      this.parent = $parent.call(this, parentName)\r\n      if (this.parent.children) {\r\n        // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中\r\n        this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)\r\n      }\r\n      if (this.parent && this.parentData) {\r\n        // 历遍parentData中的属性，将parent中的同名属性赋值给parentData\r\n        Object.keys(this.parentData).map((key) => {\r\n          this.parentData[key] = this.parent[key]\r\n        })\r\n      }\r\n    },\r\n    init() {\r\n      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用\r\n      this.updateParentData()\r\n      if (!this.parent) {\r\n        console.log('u-tabbar-item必须搭配u-tabbar组件使用')\r\n      }\r\n      // 本子组件在u-tabbar的children数组中的索引\r\n      const index = this.parent.children.indexOf(this)\r\n      // 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数\r\n      this.isActive = (this.name.split('?')[0] || index) === this.parentData.value\r\n    },\r\n    updateParentData() {\r\n      // 此方法在mixin中\r\n      this.getParentData('su-tabbar')\r\n    },\r\n    // 此方法将会被父组件u-tabbar调用\r\n    updateFromParent() {\r\n      // 重新初始化\r\n      this.init()\r\n    },\r\n    clickHandler() {\r\n      this.$nextTick(() => {\r\n        const index = this.parent.children.indexOf(this)\r\n        const name = this.name || index\r\n        // 点击的item为非激活的item才发出change事件\r\n        if (name !== this.parent.value) {\r\n          this.parent.$emit('change', name)\r\n        }\r\n        this.$emit('click', name)\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.tabbar-center-item {\r\n  position: absolute;\r\n  z-index: 2;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  background-color: rebeccapurple;\r\n  border-radius: 50%;\r\n  transform: scale(1.3) translateY(-6px);\r\n\r\n  .center-image {\r\n    width: 25px;\r\n    height: 25px;\r\n  }\r\n}\r\n.u-tabbar-item {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  &__icon {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    width: 150rpx;\r\n  }\r\n\r\n  &__text {\r\n    margin-top: 2px;\r\n    font-size: 12px;\r\n    color: var(--textSize);\r\n  }\r\n}\r\n/* #ifdef MP */\r\n// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开\r\n:host {\r\n  flex: 1;\r\n}\r\n/* #endif */\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-tabbar-item/su-tabbar-item.vue'\nwx.createComponent(Component)"],"names":["addStyle","$parent"],"mappings":"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"}