1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
{"version":3,"file":"su-navbar.js","sources":["../../../../../../src/sheep/ui/su-navbar/su-navbar.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1uYXZiYXIvc3UtbmF2YmFyLnZ1ZQ"],"sourcesContent":["<!-- 自定义导航栏 -->\r\n<template>\r\n <view class=\"uni-navbar\" :class=\"{ 'uni-dark': dark }\">\r\n <view\r\n :class=\"{\r\n 'uni-navbar--fixed': fixed,\r\n 'uni-navbar--shadow': shadow,\r\n 'uni-navbar--border': border,\r\n }\"\r\n class=\"uni-navbar__content\"\r\n >\r\n <view class=\"fixed-bg\" :class=\"[opacity ? '' : opacityBgUi]\"></view>\r\n <su-status-bar v-if=\"statusBar\" />\r\n <view\r\n :style=\"{\r\n color: themeColor,\r\n height: navbarHeight,\r\n background: backgroundColor,\r\n }\"\r\n class=\"uni-navbar__header\"\r\n >\r\n <view\r\n class=\"uni-navbar__header-btns uni-navbar__header-btns-left\"\r\n :style=\"{ width: leftIconWidth }\"\r\n >\r\n <slot name=\"left\">\r\n <view class=\"uni-navbar__content_view\" v-if=\"leftIcon.length > 0\">\r\n <view class=\"icon-box ss-flex\">\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\r\n class=\"icon-button icon-button-right ss-flex ss-row-center\"\r\n @tap=\"showMenuTools\"\r\n >\r\n <text class=\"sicon-more\" />\r\n </view>\r\n </view>\r\n </view>\r\n <view\r\n :class=\"{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }\"\r\n class=\"uni-navbar-btn-text\"\r\n v-if=\"\r\n titleAlign === 'left' &&\r\n title.length &&\r\n sheep.$platform.name !== 'WechatOfficialAccount'\r\n \"\r\n >\r\n <text :style=\"{ color: themeColor, fontSize: '18px' }\">{{ title }}</text>\r\n </view>\r\n </slot>\r\n </view>\r\n <view v-if=\"tools === 'search'\" class=\"ss-flex-1\">\r\n <slot name=\"center\">\r\n <uni-search-bar\r\n class=\"ss-flex-1 search-box\"\r\n :radius=\"20\"\r\n placeholder=\"请输入关键词\"\r\n cancelButton=\"none\"\r\n v-model=\"searchModel\"\r\n @confirm=\"onSearch\"\r\n />\r\n </slot>\r\n </view>\r\n <view v-else class=\"uni-navbar__header-container\" @tap=\"onClickTitle\">\r\n <slot name=\"center\">\r\n <view\r\n v-if=\"tools === 'title' && titleAlign === 'center' && title.length\"\r\n class=\"uni-navbar__header-container-inner\"\r\n >\r\n <text :style=\"{ color: themeColor, fontSize: '36rpx' }\" class=\"ss-line-1\">\r\n {{ title }}\r\n </text>\r\n </view>\r\n </slot>\r\n </view>\r\n </view>\r\n </view>\r\n <view class=\"uni-navbar__placeholder\" v-if=\"placeholder\">\r\n <su-status-bar v-if=\"statusBar\" />\r\n <view class=\"uni-navbar__placeholder-view\" :style=\"{ height: navbarHeight }\" />\r\n </view>\r\n <!-- 头部问题 -->\r\n <!-- #ifdef MP -->\r\n <!-- <view :style=\"[capsuleStyle]\"></view> -->\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script setup>\r\nimport sheep from '@/sheep'\r\nimport { onLoad } from '@dcloudio/uni-app'\r\nimport { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal'\r\nimport { computed, ref } from 'vue'\r\n\r\n/**\r\n * NavBar 自定义导航栏\r\n * @description 导航栏组件，主要用于头部导航\r\n * @property {Boolean} dark 开启黑暗模式\r\n * @property {String} title 标题文字\r\n * @property {String} rightText 右侧按钮文本\r\n * @property {String} leftIcon 左侧按钮图标\r\n * @property {String} rightIcon 右侧按钮图标\r\n * @property {String} color 图标和文字颜色\r\n * @property {String} backgroundColor 导航栏背景颜色\r\n * @property {Boolean} fixed = [true|false] 是否固定顶部\r\n * @property {Boolean} statusBar = [true|false] 是否包含状态栏\r\n * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影\r\n * @event {Function} clickLeft 左侧按钮点击时触发\r\n * @event {Function} clickRight 右侧按钮点击时触发\r\n * @event {Function} clickTitle 中间标题点击时触发\r\n */\r\n\r\nconst getVal = (val) => (typeof val === 'number' ? val + 'px' : val)\r\n\r\nconst emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search'])\r\nconst props = defineProps({\r\n dark: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n modelValue: {\r\n type: String,\r\n default: '',\r\n },\r\n title: {\r\n type: String,\r\n default: '',\r\n },\r\n titleAlign: {\r\n type: String,\r\n default: 'center', // left | center\r\n },\r\n rightText: {\r\n type: String,\r\n default: '',\r\n },\r\n leftIcon: {\r\n type: String,\r\n default: 'left',\r\n },\r\n rightIcon: {\r\n type: String,\r\n default: '',\r\n },\r\n fixed: {\r\n type: [Boolean, String],\r\n default: true,\r\n },\r\n placeholder: {\r\n type: [Boolean, String],\r\n default: true,\r\n },\r\n color: {\r\n type: String,\r\n default: '',\r\n },\r\n backgroundColor: {\r\n type: String,\r\n default: '',\r\n },\r\n opacity: {\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n opacityBgUi: {\r\n type: String,\r\n default: 'bg-white',\r\n },\r\n statusBar: {\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n shadow: {\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n border: {\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n height: {\r\n type: [Number, String],\r\n default: 44,\r\n },\r\n leftWidth: {\r\n type: [Number, String],\r\n default: 80,\r\n },\r\n rightWidth: {\r\n type: [Number, String],\r\n default: 0,\r\n },\r\n tools: {\r\n type: String,\r\n default: 'title',\r\n },\r\n defaultSearch: {\r\n type: String,\r\n default: '',\r\n },\r\n})\r\n\r\nconst capsuleStyle = computed(() => {\r\n return {\r\n width: sheep.$platform.capsule.width + 'px',\r\n height: sheep.$platform.capsule.height + 'px',\r\n margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',\r\n }\r\n})\r\n\r\nconst searchModel = computed(() => {\r\n return props.defaultSearch\r\n})\r\n\r\nconst themeBgColor = computed(() => {\r\n if (props.dark) {\r\n // 默认值\r\n if (props.backgroundColor) {\r\n return props.backgroundColor\r\n } else {\r\n return props.dark ? '#333' : '#FFF'\r\n }\r\n }\r\n return props.backgroundColor || '#FFF'\r\n})\r\nconst themeColor = computed(() => {\r\n if (props.dark) {\r\n // 默认值\r\n if (props.color) {\r\n return props.color\r\n } else {\r\n return props.dark ? '#fff' : '#333'\r\n }\r\n }\r\n return props.color || '#333'\r\n})\r\nconst navbarHeight = computed(() => {\r\n return getVal(props.height)\r\n})\r\nconst leftIconWidth = computed(() => {\r\n return getVal(props.leftWidth)\r\n})\r\nconst rightIconWidth = computed(() => {\r\n return getVal(props.rightWidth)\r\n})\r\n\r\nfunction onSearch(e) {\r\n emits('search', e.value)\r\n}\r\n\r\nonLoad(() => {\r\n if (uni.report && props.title !== '') {\r\n uni.report('title', props.title)\r\n }\r\n})\r\n\r\nconst hasHistory = sheep.$router.hasHistory()\r\n\r\nfunction onClickLeft() {\r\n if (hasHistory) {\r\n sheep.$router.back()\r\n } else {\r\n sheep.$router.go('/modules/mall/index/index')\r\n }\r\n emits('clickLeft')\r\n}\r\nfunction onClickRight() {\r\n showMenuTools()\r\n}\r\nfunction onClickTitle() {\r\n emits('clickTitle')\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.bg-main {\r\n background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;\r\n color: #fff !important;\r\n}\r\n.icon-box {\r\n background: #ffffff;\r\n box-shadow:\r\n 0px 0px 4rpx rgba(51, 51, 51, 0.08),\r\n 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);\r\n border-radius: 30rpx;\r\n width: 134rpx;\r\n height: 56rpx;\r\n margin-left: 8rpx;\r\n .line {\r\n width: 2rpx;\r\n height: 24rpx;\r\n background: #e5e5e7;\r\n }\r\n .sicon-back {\r\n font-size: 32rpx;\r\n color: #000;\r\n }\r\n .sicon-home {\r\n font-size: 32rpx;\r\n color: #000;\r\n }\r\n .sicon-more {\r\n font-size: 32rpx;\r\n color: #000;\r\n }\r\n .icon-button {\r\n width: 67rpx;\r\n height: 56rpx;\r\n &-left:hover {\r\n background: rgba(0, 0, 0, 0.16);\r\n border-radius: 30rpx 0px 0px 30rpx;\r\n }\r\n &-right:hover {\r\n background: rgba(0, 0, 0, 0.16);\r\n border-radius: 0px 30rpx 30rpx 0px;\r\n }\r\n }\r\n}\r\n\r\n$nav-height: 44px;\r\n\r\n.fixed-bg {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n.uni-nav-bar-text {\r\n /* #ifdef APP-PLUS */\r\n font-size: 34rpx;\r\n /* #endif */\r\n /* #ifndef APP-PLUS */\r\n font-size: 14px;\r\n /* #endif */\r\n}\r\n\r\n.uni-nav-bar-right-text {\r\n font-size: 12px;\r\n}\r\n\r\n.uni-navbar__content {\r\n position: relative;\r\n // background-color: #fff;\r\n // box-sizing: border-box;\r\n background-color: transparent;\r\n}\r\n\r\n.uni-navbar__content_view {\r\n // box-sizing: border-box;\r\n}\r\n\r\n.uni-navbar-btn-text {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: center;\r\n line-height: 18px;\r\n}\r\n\r\n.uni-navbar__header {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n padding: 0 10px;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n height: $nav-height;\r\n font-size: 12px;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.uni-navbar__header-btns {\r\n /* #ifndef APP-NVUE */\r\n overflow: hidden;\r\n display: flex;\r\n /* #endif */\r\n flex-wrap: nowrap;\r\n flex-direction: row;\r\n // min-width: 120rpx;\r\n min-width: 40rpx;\r\n // padding: 0 6px;\r\n justify-content: center;\r\n align-items: center;\r\n /* #ifdef H5 */\r\n cursor: pointer;\r\n /* #endif */\r\n}\r\n\r\n.uni-navbar__header-btns-left {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n width: 120rpx;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.uni-navbar__header-btns-right {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n flex-direction: row;\r\n // width: 150rpx;\r\n // padding-right: 30rpx;\r\n justify-content: flex-end;\r\n align-items: center;\r\n}\r\n.uni-navbar__header-container {\r\n /* #ifndef APP-NVUE */\r\n // display: flex;\r\n /* #endif */\r\n // flex: 1;\r\n // padding: 0 10px;\r\n // overflow: hidden;\r\n position: absolute;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-50%);\r\n top: 50%;\r\n}\r\n\r\n.uni-navbar__header-container-inner {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n /* #endif */\r\n flex: 1;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n overflow: hidden;\r\n // box-sizing: border-box;\r\n}\r\n\r\n.uni-navbar__placeholder-view {\r\n height: $nav-height;\r\n}\r\n\r\n.uni-navbar--fixed {\r\n position: fixed;\r\n z-index: 998;\r\n /* #ifdef H5 */\r\n left: var(--window-left);\r\n right: var(--window-right);\r\n /* #endif */\r\n /* #ifndef H5 */\r\n left: 0;\r\n right: 0;\r\n /* #endif */\r\n}\r\n\r\n.uni-navbar--shadow {\r\n box-shadow: 0 1px 6px #ccc;\r\n}\r\n\r\n.uni-navbar--border {\r\n border-bottom-width: 1rpx;\r\n border-bottom-style: solid;\r\n border-bottom-color: #eee;\r\n}\r\n\r\n.uni-ellipsis-1 {\r\n overflow: hidden;\r\n /* #ifndef APP-NVUE */\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n /* #endif */\r\n /* #ifdef APP-NVUE */\r\n lines: 1;\r\n text-overflow: ellipsis;\r\n /* #endif */\r\n}\r\n\r\n// 暗主题配置\r\n.uni-dark {\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-navbar/su-navbar.vue'\nwx.createComponent(Component)"],"names":["computed","sheep","onLoad","uni"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,UAAM,SAAS,CAAC,QAAS,OAAO,QAAQ,WAAW,MAAM,OAAO;AAEhE,UAAM,QAAQ;AACd,UAAM,QAAQ;AAuFOA,kBAAAA,SAAS,MAAM;AAClC,aAAO;AAAA,QACL,OAAOC,YAAAA,MAAM,UAAU,QAAQ,QAAQ;AAAA,QACvC,QAAQA,YAAAA,MAAM,UAAU,QAAQ,SAAS;AAAA,QACzC,QAAQ,QAAQA,kBAAM,UAAU,OAAO,cAAcA,YAAAA,MAAM,UAAU,QAAQ,SAAS;AAAA,MACvF;AAAA,IACH,CAAC;AAED,UAAM,cAAcD,cAAQ,SAAC,MAAM;AACjC,aAAO,MAAM;AAAA,IACf,CAAC;AAEoBA,kBAAAA,SAAS,MAAM;AAClC,UAAI,MAAM,MAAM;AAEd,YAAI,MAAM,iBAAiB;AACzB,iBAAO,MAAM;AAAA,QACnB,OAAW;AACL,iBAAO,MAAM,OAAO,SAAS;AAAA,QAC9B;AAAA,MACF;AACD,aAAO,MAAM,mBAAmB;AAAA,IAClC,CAAC;AACD,UAAM,aAAaA,cAAQ,SAAC,MAAM;AAChC,UAAI,MAAM,MAAM;AAEd,YAAI,MAAM,OAAO;AACf,iBAAO,MAAM;AAAA,QACnB,OAAW;AACL,iBAAO,MAAM,OAAO,SAAS;AAAA,QAC9B;AAAA,MACF;AACD,aAAO,MAAM,SAAS;AAAA,IACxB,CAAC;AACD,UAAM,eAAeA,cAAQ,SAAC,MAAM;AAClC,aAAO,OAAO,MAAM,MAAM;AAAA,IAC5B,CAAC;AACD,UAAM,gBAAgBA,cAAQ,SAAC,MAAM;AACnC,aAAO,OAAO,MAAM,SAAS;AAAA,IAC/B,CAAC;AACsBA,kBAAAA,SAAS,MAAM;AACpC,aAAO,OAAO,MAAM,UAAU;AAAA,IAChC,CAAC;AAED,aAAS,SAAS,GAAG;AACnB,YAAM,UAAU,EAAE,KAAK;AAAA,IACzB;AAEAE,kBAAAA,OAAO,MAAM;AACX,UAAIC,cAAG,MAAC,UAAU,MAAM,UAAU,IAAI;AACpCA,sBAAAA,MAAI,OAAO,SAAS,MAAM,KAAK;AAAA,MAChC;AAAA,IACH,CAAC;AAED,UAAM,aAAaF,YAAAA,MAAM,QAAQ,WAAY;AAE7C,aAAS,cAAc;AACrB,UAAI,YAAY;AACdA,oBAAK,MAAC,QAAQ,KAAM;AAAA,MACxB,OAAS;AACLA,0BAAM,QAAQ,GAAG,2BAA2B;AAAA,MAC7C;AACD,YAAM,WAAW;AAAA,IACnB;AAIA,aAAS,eAAe;AACtB,YAAM,YAAY;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjRA,GAAG,gBAAgB,SAAS;"} |