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 // 监听多个参<E4B8AA>
|