【功能完善】TabBar 角标完善
puhui999
parent
a382a1a876
commit
d46cfd3943
|
|
@ -15,6 +15,9 @@
|
|||
:key="item.text"
|
||||
:text="item.text"
|
||||
:name="item.url"
|
||||
:badge="item.badge"
|
||||
:dot="item.dot"
|
||||
:badgeStyle="tabbar.badgeStyle"
|
||||
:isCenter="getTabbarCenter(index)"
|
||||
:centerImage="sheep.$url.cdn(item.iconUrl)"
|
||||
@tap="sheep.$router.go(item.url)"
|
||||
|
|
@ -33,6 +36,7 @@
|
|||
<script setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
|
||||
|
||||
const tabbar = computed(() => {
|
||||
return sheep.$store('app').template.basic?.tabbar;
|
||||
|
|
|
|||
|
|
@ -128,6 +128,14 @@ const adaptTemplate = async (appTemplate, templateId) => {
|
|||
const tabBar = diyTemplate?.property?.tabBar;
|
||||
if (tabBar) {
|
||||
appTemplate.basic.tabbar = tabBar;
|
||||
// TODO 商城装修没有对 tabBar 进行角标配置，测试角标需打开以下注释
|
||||
// appTemplate.basic.tabbar.items.forEach((tabBar) => {
|
||||
// tabBar.dot = false
|
||||
// tabBar.badge = 100
|
||||
// })
|
||||
// appTemplate.basic.tabbar.badgeStyle = {
|
||||
// backgroundColor: '#882222',
|
||||
// }
|
||||
if (tabBar?.theme) {
|
||||
appTemplate.basic.theme = tabBar?.theme;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,13 @@
|
|||
</view>
|
||||
<template v-else>
|
||||
<view class="u-tabbar-item__icon">
|
||||
<uni-badge
|
||||
absolute="rightTop"
|
||||
size="small"
|
||||
:text="badge || (dot ? 1 : null)"
|
||||
:customStyle="badgeStyle"
|
||||
:isDot="dot"
|
||||
>
|
||||
<image
|
||||
v-if="icon"
|
||||
:name="icon"
|
||||
|
|
@ -16,14 +23,7 @@
|
|||
<slot v-if="isActive" name="active-icon" />
|
||||
<slot v-else name="inactive-icon" />
|
||||
</block>
|
||||
<!-- <u-badge
|
||||
absolute
|
||||
:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
|
||||
:customStyle="badgeStyle"
|
||||
:isDot="dot"
|
||||
:value="badge || (dot ? 1 : null)"
|
||||
:show="dot || badge > 0"
|
||||
></u-badge> -->
|
||||
</uni-badge>
|
||||
</view>
|
||||
|
||||
<slot name="text">
|
||||
|
|
@ -53,7 +53,8 @@
|
|||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
*/
|
||||
import { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper';
|
||||
import { $parent, addStyle } from '@/sheep/helper';
|
||||
|
||||
export default {
|
||||
name: 'su-tabbar-item',
|
||||
props: {
|
||||
|
|
@ -102,8 +103,8 @@
|
|||
},
|
||||
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
|
||||
badgeStyle: {
|
||||
type: [Object, String],
|
||||
default: '',
|
||||
type: Object,
|
||||
default: ()=>{},
|
||||
},
|
||||
isCenter: {
|
||||
type: Boolean,
|
||||
|
|
@ -202,6 +203,7 @@
|
|||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-tabbar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -230,5 +232,6 @@
|
|||
:host {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
## 1.2.2（2023-01-28）
|
||||
- 修复 运行/打包 控制台警告问题
|
||||
## 1.2.1（2022-09-05）
|
||||
- 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="uni-badge--x">
|
||||
<slot />
|
||||
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
|
||||
<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
|
||||
class="uni-badge" @click="onClick()">{{displayValue}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -130,16 +130,13 @@
|
|||
const match = whiteList[this.absolute]
|
||||
return match ? match : whiteList['rightTop']
|
||||
},
|
||||
badgeWidth() {
|
||||
return {
|
||||
width: `${this.width}px`
|
||||
}
|
||||
},
|
||||
dotStyle() {
|
||||
if (!this.isDot) return {}
|
||||
return {
|
||||
width: '10px',
|
||||
minWidth: '0',
|
||||
height: '10px',
|
||||
padding: '0',
|
||||
borderRadius: '10px'
|
||||
}
|
||||
},
|
||||
|
|
@ -160,7 +157,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" >
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-success: #4cd964 !default;
|
||||
$uni-warning: #f0ad4e !default;
|
||||
|
|
@ -195,10 +192,13 @@
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
font-feature-settings: "tnum";
|
||||
min-width: 20px;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
height: 20px;
|
||||
padding: 0 4px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
border-radius: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "uni-badge",
|
||||
"displayName": "uni-badge 数字角标",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.2",
|
||||
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
|
||||
"keywords": [
|
||||
"",
|
||||
|
|
@ -18,11 +18,7 @@
|
|||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
|
|
@ -39,10 +35,11 @@
|
|||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue