From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue | 686 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 343 insertions(+), 343 deletions(-) diff --git a/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue index 08712ab..75bf306 100644 --- a/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue +++ b/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue @@ -1,343 +1,343 @@ -<template> - <view class="uni-navbar" :class="{'uni-dark':dark}"> - <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" - :style="{ 'background-color': themeBgColor }" class="uni-navbar__content"> - <status-bar v-if="statusBar" /> - <view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}" - class="uni-navbar__header"> - <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left" - :style="{width:leftIconWidth}"> - <slot name="left"> - <view class="uni-navbar__content_view" v-if="leftIcon.length > 0"> - <uni-icons :color="themeColor" :type="leftIcon" size="20" /> - </view> - <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text" - v-if="leftText.length"> - <text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text> - </view> - </slot> - </view> - <view class="uni-navbar__header-container " @tap="onClickTitle"> - <slot> - <view class="uni-navbar__header-container-inner" v-if="title.length>0"> - <text class="uni-nav-bar-text uni-ellipsis-1" - :style="{color: themeColor }">{{ title }}</text> - </view> - </slot> - </view> - <view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right" - :style="{width:rightIconWidth}"> - <slot name="right"> - <view v-if="rightIcon.length"> - <uni-icons :color="themeColor" :type="rightIcon" size="22" /> - </view> - <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length"> - <text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text> - </view> - </slot> - </view> - </view> - </view> - <view class="uni-navbar__placeholder" v-if="fixed"> - <status-bar v-if="statusBar" /> - <view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" /> - </view> - </view> -</template> - -<script> - import statusBar from "./uni-status-bar.vue"; - const getVal = (val) => typeof val === 'number' ? val + 'px' : val; - - /** - * NavBar 鑷畾涔夊鑸爮 - * @description 瀵艰埅鏍忕粍浠讹紝涓昏鐢ㄤ簬澶撮儴瀵艰埅 - * @tutorial https://ext.dcloud.net.cn/plugin?id=52 - * @property {Boolean} dark 寮�鍚粦鏆楁ā寮� - * @property {String} title 鏍囬鏂囧瓧 - * @property {String} leftText 宸︿晶鎸夐挳鏂囨湰 - * @property {String} rightText 鍙充晶鎸夐挳鏂囨湰 - * @property {String} leftIcon 宸︿晶鎸夐挳鍥炬爣锛堝浘鏍囩被鍨嬪弬鑰� [Icon 鍥炬爣](http://ext.dcloud.net.cn/plugin?id=28) type 灞炴�э級 - * @property {String} rightIcon 鍙充晶鎸夐挳鍥炬爣锛堝浘鏍囩被鍨嬪弬鑰� [Icon 鍥炬爣](http://ext.dcloud.net.cn/plugin?id=28) type 灞炴�э級 - * @property {String} color 鍥炬爣鍜屾枃瀛楅鑹� - * @property {String} backgroundColor 瀵艰埅鏍忚儗鏅鑹� - * @property {Boolean} fixed = [true|false] 鏄惁鍥哄畾椤堕儴 - * @property {Boolean} statusBar = [true|false] 鏄惁鍖呭惈鐘舵�佹爮 - * @property {Boolean} shadow = [true|false] 瀵艰埅鏍忎笅鏄惁鏈夐槾褰� - * @event {Function} clickLeft 宸︿晶鎸夐挳鐐瑰嚮鏃惰Е鍙� - * @event {Function} clickRight 鍙充晶鎸夐挳鐐瑰嚮鏃惰Е鍙� - * @event {Function} clickTitle 涓棿鏍囬鐐瑰嚮鏃惰Е鍙� - */ - export default { - name: "UniNavBar", - components: { - statusBar - }, - emits: ['clickLeft', 'clickRight', 'clickTitle'], - props: { - dark: { - type: Boolean, - default: false - }, - title: { - type: String, - default: "" - }, - leftText: { - type: String, - default: "" - }, - rightText: { - type: String, - default: "" - }, - leftIcon: { - type: String, - default: "" - }, - rightIcon: { - type: String, - default: "" - }, - fixed: { - type: [Boolean, String], - default: false - }, - color: { - type: String, - default: "" - }, - backgroundColor: { - type: String, - default: "" - }, - statusBar: { - type: [Boolean, String], - default: false - }, - shadow: { - type: [Boolean, String], - default: false - }, - border: { - type: [Boolean, String], - default: true - }, - height: { - type: [Number, String], - default: 44 - }, - leftWidth: { - type: [Number, String], - default: 60 - }, - rightWidth: { - type: [Number, String], - default: 60 - }, - }, - computed: { - themeBgColor() { - if (this.dark) { - // 榛樿鍊� - if (this.backgroundColor) { - return this.backgroundColor - } else { - return this.dark ? '#333' : '#FFF' - } - } - return this.backgroundColor || '#FFF' - }, - themeColor() { - if (this.dark) { - // 榛樿鍊� - if (this.color) { - return this.color - } else { - return this.dark ? '#fff' : '#333' - } - } - return this.color || '#333' - }, - navbarHeight() { - return getVal(this.height) - }, - leftIconWidth() { - return getVal(this.leftWidth) - }, - rightIconWidth() { - return getVal(this.rightWidth) - } - }, - mounted() { - if (uni.report && this.title !== '') { - uni.report('title', this.title) - } - }, - methods: { - onClickLeft() { - this.$emit("clickLeft"); - }, - onClickRight() { - this.$emit("clickRight"); - }, - onClickTitle() { - this.$emit("clickTitle"); - } - } - }; -</script> - -<style lang="scss" scoped> - $nav-height: 44px; - - .uni-navbar { - // box-sizing: border-box; - } - - .uni-nav-bar-text { - /* #ifdef APP-PLUS */ - font-size: 34rpx; - /* #endif */ - /* #ifndef APP-PLUS */ - font-size: 14px; - /* #endif */ - } - - .uni-nav-bar-right-text { - font-size: 12px; - } - - .uni-navbar__content { - position: relative; - // background-color: #fff; - // box-sizing: border-box; - background-color: transparent; - } - - .uni-navbar__content_view { - // box-sizing: border-box; - } - - .uni-navbar-btn-text { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - justify-content: flex-start; - align-items: center; - line-height: 12px; - } - - .uni-navbar__header { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - padding: 0 10px; - flex-direction: row; - height: $nav-height; - font-size: 12px; - } - - .uni-navbar__header-btns { - /* #ifndef APP-NVUE */ - overflow: hidden; - display: flex; - /* #endif */ - flex-wrap: nowrap; - flex-direction: row; - width: 120rpx; - // padding: 0 6px; - justify-content: center; - align-items: center; - /* #ifdef H5 */ - cursor: pointer; - /* #endif */ - } - - .uni-navbar__header-btns-left { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - width: 120rpx; - justify-content: flex-start; - align-items: center; - } - - .uni-navbar__header-btns-right { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - // width: 150rpx; - // padding-right: 30rpx; - justify-content: flex-end; - align-items: center; - } - - .uni-navbar__header-container { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex: 1; - padding: 0 10px; - overflow: hidden; - } - - .uni-navbar__header-container-inner { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex: 1; - flex-direction: row; - align-items: center; - justify-content: center; - font-size: 12px; - overflow: hidden; - // box-sizing: border-box; - } - - - .uni-navbar__placeholder-view { - height: $nav-height; - } - - .uni-navbar--fixed { - position: fixed; - z-index: 998; - /* #ifdef H5 */ - left: var(--window-left); - right: var(--window-right); - /* #endif */ - /* #ifndef H5 */ - left: 0; - right: 0; - /* #endif */ - - } - - .uni-navbar--shadow { - box-shadow: 0 1px 6px #ccc; - } - - .uni-navbar--border { - border-bottom-width: 1rpx; - border-bottom-style: solid; - border-bottom-color: #eee; - } - - .uni-ellipsis-1 { - overflow: hidden; - /* #ifndef APP-NVUE */ - white-space: nowrap; - text-overflow: ellipsis; - /* #endif */ - /* #ifdef APP-NVUE */ - lines: 1; - text-overflow: ellipsis; - /* #endif */ - } - - // 鏆椾富棰橀厤缃� - .uni-dark {} -</style> +<template> + <view class="uni-navbar" :class="{'uni-dark':dark}"> + <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" + :style="{ 'background-color': themeBgColor }" class="uni-navbar__content"> + <status-bar v-if="statusBar" /> + <view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}" + class="uni-navbar__header"> + <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left" + :style="{width:leftIconWidth}"> + <slot name="left"> + <view class="uni-navbar__content_view" v-if="leftIcon.length > 0"> + <uni-icons :color="themeColor" :type="leftIcon" size="20" /> + </view> + <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text" + v-if="leftText.length"> + <text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text> + </view> + </slot> + </view> + <view class="uni-navbar__header-container " @tap="onClickTitle"> + <slot> + <view class="uni-navbar__header-container-inner" v-if="title.length>0"> + <text class="uni-nav-bar-text uni-ellipsis-1" + :style="{color: themeColor }">{{ title }}</text> + </view> + </slot> + </view> + <view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right" + :style="{width:rightIconWidth}"> + <slot name="right"> + <view v-if="rightIcon.length"> + <uni-icons :color="themeColor" :type="rightIcon" size="22" /> + </view> + <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length"> + <text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text> + </view> + </slot> + </view> + </view> + </view> + <view class="uni-navbar__placeholder" v-if="fixed"> + <status-bar v-if="statusBar" /> + <view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" /> + </view> + </view> +</template> + +<script> + import statusBar from "./uni-status-bar.vue"; + const getVal = (val) => typeof val === 'number' ? val + 'px' : val; + + /** + * NavBar 鑷畾涔夊鑸爮 + * @description 瀵艰埅鏍忕粍浠讹紝涓昏鐢ㄤ簬澶撮儴瀵艰埅 + * @tutorial https://ext.dcloud.net.cn/plugin?id=52 + * @property {Boolean} dark 寮�鍚粦鏆楁ā寮� + * @property {String} title 鏍囬鏂囧瓧 + * @property {String} leftText 宸︿晶鎸夐挳鏂囨湰 + * @property {String} rightText 鍙充晶鎸夐挳鏂囨湰 + * @property {String} leftIcon 宸︿晶鎸夐挳鍥炬爣锛堝浘鏍囩被鍨嬪弬鑰� [Icon 鍥炬爣](http://ext.dcloud.net.cn/plugin?id=28) type 灞炴�э級 + * @property {String} rightIcon 鍙充晶鎸夐挳鍥炬爣锛堝浘鏍囩被鍨嬪弬鑰� [Icon 鍥炬爣](http://ext.dcloud.net.cn/plugin?id=28) type 灞炴�э級 + * @property {String} color 鍥炬爣鍜屾枃瀛楅鑹� + * @property {String} backgroundColor 瀵艰埅鏍忚儗鏅鑹� + * @property {Boolean} fixed = [true|false] 鏄惁鍥哄畾椤堕儴 + * @property {Boolean} statusBar = [true|false] 鏄惁鍖呭惈鐘舵�佹爮 + * @property {Boolean} shadow = [true|false] 瀵艰埅鏍忎笅鏄惁鏈夐槾褰� + * @event {Function} clickLeft 宸︿晶鎸夐挳鐐瑰嚮鏃惰Е鍙� + * @event {Function} clickRight 鍙充晶鎸夐挳鐐瑰嚮鏃惰Е鍙� + * @event {Function} clickTitle 涓棿鏍囬鐐瑰嚮鏃惰Е鍙� + */ + export default { + name: "UniNavBar", + components: { + statusBar + }, + emits: ['clickLeft', 'clickRight', 'clickTitle'], + props: { + dark: { + type: Boolean, + default: false + }, + title: { + type: String, + default: "" + }, + leftText: { + type: String, + default: "" + }, + rightText: { + type: String, + default: "" + }, + leftIcon: { + type: String, + default: "" + }, + rightIcon: { + type: String, + default: "" + }, + fixed: { + type: [Boolean, String], + default: false + }, + color: { + type: String, + default: "" + }, + backgroundColor: { + type: String, + default: "" + }, + statusBar: { + type: [Boolean, String], + default: false + }, + shadow: { + type: [Boolean, String], + default: false + }, + border: { + type: [Boolean, String], + default: true + }, + height: { + type: [Number, String], + default: 44 + }, + leftWidth: { + type: [Number, String], + default: 60 + }, + rightWidth: { + type: [Number, String], + default: 60 + }, + }, + computed: { + themeBgColor() { + if (this.dark) { + // 榛樿鍊� + if (this.backgroundColor) { + return this.backgroundColor + } else { + return this.dark ? '#333' : '#FFF' + } + } + return this.backgroundColor || '#FFF' + }, + themeColor() { + if (this.dark) { + // 榛樿鍊� + if (this.color) { + return this.color + } else { + return this.dark ? '#fff' : '#333' + } + } + return this.color || '#333' + }, + navbarHeight() { + return getVal(this.height) + }, + leftIconWidth() { + return getVal(this.leftWidth) + }, + rightIconWidth() { + return getVal(this.rightWidth) + } + }, + mounted() { + if (uni.report && this.title !== '') { + uni.report('title', this.title) + } + }, + methods: { + onClickLeft() { + this.$emit("clickLeft"); + }, + onClickRight() { + this.$emit("clickRight"); + }, + onClickTitle() { + this.$emit("clickTitle"); + } + } + }; +</script> + +<style lang="scss" scoped> + $nav-height: 44px; + + .uni-navbar { + // box-sizing: border-box; + } + + .uni-nav-bar-text { + /* #ifdef APP-PLUS */ + font-size: 34rpx; + /* #endif */ + /* #ifndef APP-PLUS */ + font-size: 14px; + /* #endif */ + } + + .uni-nav-bar-right-text { + font-size: 12px; + } + + .uni-navbar__content { + position: relative; + // background-color: #fff; + // box-sizing: border-box; + background-color: transparent; + } + + .uni-navbar__content_view { + // box-sizing: border-box; + } + + .uni-navbar-btn-text { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: flex-start; + align-items: center; + line-height: 12px; + } + + .uni-navbar__header { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + padding: 0 10px; + flex-direction: row; + height: $nav-height; + font-size: 12px; + } + + .uni-navbar__header-btns { + /* #ifndef APP-NVUE */ + overflow: hidden; + display: flex; + /* #endif */ + flex-wrap: nowrap; + flex-direction: row; + width: 120rpx; + // padding: 0 6px; + justify-content: center; + align-items: center; + /* #ifdef H5 */ + cursor: pointer; + /* #endif */ + } + + .uni-navbar__header-btns-left { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + width: 120rpx; + justify-content: flex-start; + align-items: center; + } + + .uni-navbar__header-btns-right { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + // width: 150rpx; + // padding-right: 30rpx; + justify-content: flex-end; + align-items: center; + } + + .uni-navbar__header-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex: 1; + padding: 0 10px; + overflow: hidden; + } + + .uni-navbar__header-container-inner { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex: 1; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 12px; + overflow: hidden; + // box-sizing: border-box; + } + + + .uni-navbar__placeholder-view { + height: $nav-height; + } + + .uni-navbar--fixed { + position: fixed; + z-index: 998; + /* #ifdef H5 */ + left: var(--window-left); + right: var(--window-right); + /* #endif */ + /* #ifndef H5 */ + left: 0; + right: 0; + /* #endif */ + + } + + .uni-navbar--shadow { + box-shadow: 0 1px 6px #ccc; + } + + .uni-navbar--border { + border-bottom-width: 1rpx; + border-bottom-style: solid; + border-bottom-color: #eee; + } + + .uni-ellipsis-1 { + overflow: hidden; + /* #ifndef APP-NVUE */ + white-space: nowrap; + text-overflow: ellipsis; + /* #endif */ + /* #ifdef APP-NVUE */ + lines: 1; + text-overflow: ellipsis; + /* #endif */ + } + + // 鏆椾富棰橀厤缃� + .uni-dark {} +</style> -- Gitblit v1.9.1