1 line
9.0 KiB
Plaintext
1 line
9.0 KiB
Plaintext
{"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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"} |