1 line
7.7 KiB
Plaintext
1 line
7.7 KiB
Plaintext
|
{"version":3,"file":"s-custom-navbar.js","sources":["../../../../../../src/sheep/components/s-custom-navbar/s-custom-navbar.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3MtY3VzdG9tLW5hdmJhci9zLWN1c3RvbS1uYXZiYXIudnVl"],"sourcesContent":["<!-- 顶部导航栏 -->\r\n<template>\r\n <navbar\r\n :alway=\"isAlways\"\r\n :back=\"false\"\r\n bg=\"\"\r\n :placeholder=\"isPlaceholder\"\r\n :bgStyles=\"bgStyles\"\r\n :opacity=\"isOpacity\"\r\n :sticky=\"sticky\"\r\n >\r\n <template #item>\r\n <view class=\"nav-box\">\r\n <view class=\"nav-icon\" v-if=\"showLeftButton\">\r\n <view class=\"icon-box ss-flex\" :class=\"{ 'inner-icon-box': data.styleType === 'inner' }\">\r\n <view class=\"icon-button icon-button-left ss-flex ss-row-center\" @tap=\"onClickLeft\">\r\n <text class=\"sicon-back\" v-if=\"hasHistory\" />\r\n <text class=\"sicon-home\" v-else />\r\n </view>\r\n <view class=\"line\"></view>\r\n <view class=\"icon-button icon-button-right ss-flex ss-row-center\" @tap=\"onClickRight\">\r\n <text class=\"sicon-more\" />\r\n </view>\r\n </view>\r\n </view>\r\n <view\r\n class=\"nav-item\"\r\n v-for=\"(item, index) in navList\"\r\n :key=\"index\"\r\n :style=\"[parseImgStyle(item)]\"\r\n :class=\"[{ 'ss-flex ss-col-center ss-row-center': item.type !== 'search' }]\"\r\n >\r\n <navbar-item :data=\"item\" :width=\"parseImgStyle(item).width\" />\r\n </view>\r\n </view>\r\n </template>\r\n </navbar>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 装修组件 - 自定义标题栏\r\n *\r\n *\r\n * @property {Number | String} alwaysShow = [0,1]\t\t\t - 是否常驻\r\n * @property {Number | String} styleType = [inner]\t\t\t \t- 是否沉浸式\r\n * @property {String | Number} type \t\t \t\t\t\t\t- 标题背景模式\r\n * @property {String} color \t\t \t\t\t\t\t\t\t- 页面背景色\r\n * @property {String} src \t\t \t\t\t\t\t\t\t\t- 页面背景图片\r\n */\r\nimport { computed, unref } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport Navbar from './components/navbar.vue'\r\nimport NavbarItem from './components/navbar-item.vue'\r\nimport { showMenuTools } from '@/sheep/hooks/useModal'\r\n\r\nconst props = defineProps({\r\n data: {\r\n type: Object,\r\n default: () => ({}),\r\n },\r\n showLeftButton: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n})\r\nconst hasHistory = sheep.$router.hasHistory()\r\nconst sticky = computed(() => {\r\n if (props.data.styleType === 'inner') {\r\n if (props.data.alwaysShow) {\r\n return false\r\n }\r\n }\r\n if (props.data.styleType === 'normal') {\r\n return false\r\n }\r\n})\r\nconst navList = computed(() => {\r\n // #ifdef MP\r\n return props.data.mapCells || []\r\n // #endif\r\n return props.data.otherCells || []\r\n})\r\n// 页面宽度\r\nconst windowWidth = sheep.$platform.device.windowWidth\r\n// 单元格宽度\r\nconst cell = computed(() => {\r\n if (unref(navList).length) {\r\n // 默认宽度为8个格子，微信公众号右上角有胶囊按钮所以是6个格子\r\n let cell = (windowWidth - 90) / 8\r\n // #ifdef MP\r\n cell = (windowWidth - 80 - unref(sheep.$platform.capsule).width) / 6\r\n // #endif\r\n return cell\r\n }\r\n})\r\n// 解析位置\r\nconst parseImgStyle = (item) => {\r\n const obj = {\r\n width: item.width * cell.value + (item.width - 1) * 10 + 'px',\r\n left: item.left * cell.value + (item.left + 1) * 10 + 'px',\r\n 'border-radius': item.borderRadius + 'px',\r\n }\r\n return obj\r\n}\r\nconst isAlways = computed(() =>\r\n props.data.styleType === 'inner' ? Boolean(props.data.alwaysShow) : true,\r\n)\r\nconst isOpacity = computed(() =>\r\n props.data.styleType === 'normal'\r\n ? false\r\n : props.showLeftButton\r\n ? false\r\n : props.data.styleType === 'inner',\r\n)\r\nconst isPl
|