first commit
This commit is contained in:
lingxiao865
27
uni_modules/tdesign-uniapp/components/side-bar-item/props.ts
Normal file
27
uni_modules/tdesign-uniapp/components/side-bar-item/props.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
export default {
|
||||
/** 透传至 Badge 组件 */
|
||||
badgeProps: {
|
||||
type: Object,
|
||||
},
|
||||
/** 是否禁用 */
|
||||
disabled: Boolean,
|
||||
/** 图标，传对象则透传至 Icon */
|
||||
icon: {
|
||||
type: [String, Object],
|
||||
},
|
||||
/** 展示的标签 */
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 当前选项的值 */
|
||||
value: {
|
||||
type: [String, Number],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,66 @@
|
||||
.t-side-bar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
font: var(--td-side-bar-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-side-bar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background: var(--td-side-bar-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
min-height: var(--td-side-bar-item-height, auto);
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
}
|
||||
.t-side-bar-item--active {
|
||||
font-weight: 600;
|
||||
background: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
--td-badge-content-text-color: var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-side-bar-item__icon {
|
||||
font-size: var(--td-side-bar-icon-size, 40rpx);
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
.t-side-bar-item__prefix,
|
||||
.t-side-bar-item__suffix {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--td-side-bar-border-radius, 18rpx) * 2);
|
||||
background: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
pointer-events: none;
|
||||
}
|
||||
.t-side-bar-item__prefix::after,
|
||||
.t-side-bar-item__suffix::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--td-side-bar-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
|
||||
}
|
||||
.t-side-bar-item__prefix {
|
||||
top: calc(var(--td-side-bar-border-radius, 18rpx) * -2);
|
||||
}
|
||||
.t-side-bar-item__prefix::after {
|
||||
border-bottom-right-radius: var(--td-side-bar-border-radius, 18rpx);
|
||||
}
|
||||
.t-side-bar-item__suffix {
|
||||
bottom: calc(var(--td-side-bar-border-radius, 18rpx) * -2);
|
||||
}
|
||||
.t-side-bar-item__suffix::after {
|
||||
border-top-right-radius: var(--td-side-bar-border-radius, 18rpx);
|
||||
}
|
||||
.t-side-bar-item--disabled {
|
||||
color: var(--td-side-bar-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
--td-badge-content-text-color: var(--td-side-bar-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
.t-side-bar-item__line {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--td-side-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view
|
||||
:id="tId"
|
||||
:class="
|
||||
tools.cls(classPrefix, [
|
||||
['active', active],
|
||||
['disabled', disabled]
|
||||
]) +
|
||||
' ' +
|
||||
tClass
|
||||
"
|
||||
:style="tools._style([customStyle])"
|
||||
aria-role="button"
|
||||
:aria-label="
|
||||
ariaLabel ||
|
||||
(badgeProps && (badgeProps.dot || badgeProps.count)
|
||||
? (active ? '已选中，' + label + tools.getBadgeAriaLabel({ ...badgeProps })
|
||||
: label + tools.getBadgeAriaLabel({ ...badgeProps })) : '')
|
||||
"
|
||||
:aria-disabled="disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<block v-if="active">
|
||||
<view :class="classPrefix + '__line'" />
|
||||
<view
|
||||
v-if="!isFirstChild"
|
||||
:class="classPrefix + '__prefix'"
|
||||
/>
|
||||
<view
|
||||
v-if="!isLastChild"
|
||||
:class="classPrefix + '__suffix'"
|
||||
/>
|
||||
</block>
|
||||
<block
|
||||
v-if="_icon"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="iconCustomStyle"
|
||||
:t-class="classPrefix + '__icon'"
|
||||
:prefix="_icon.prefix"
|
||||
:name="_icon.name"
|
||||
:size="_icon.size"
|
||||
:color="_icon.color"
|
||||
:aria-hidden="!!_icon.ariaHidden"
|
||||
:aria-label="_icon.ariaLabel"
|
||||
:aria-role="_icon.ariaRole"
|
||||
@click="_icon.click || ''"
|
||||
/>
|
||||
</block>
|
||||
<block v-if="badgeProps">
|
||||
<t-badge
|
||||
:color="badgeProps.color"
|
||||
:content="label"
|
||||
:count="badgeProps.count"
|
||||
:dot="badgeProps.dot"
|
||||
:max-count="badgeProps.maxCount"
|
||||
:offset="badgeProps.offset"
|
||||
:shape="badgeProps.shape"
|
||||
:show-zero="badgeProps.showZero"
|
||||
:size="badgeProps.size"
|
||||
:t-class="badgeProps.tClass"
|
||||
:t-class-content="badgeProps.tClassContent"
|
||||
:t-class-count="badgeProps.tClassCount"
|
||||
/>
|
||||
</block>
|
||||
<block v-else>
|
||||
{{ label }}
|
||||
</block>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TBadge from '../badge/badge';
|
||||
import TIcon from '../icon/icon';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { ChildrenMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-side-bar-item`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
],
|
||||
mixins: [ChildrenMixin(RELATION_MAP.SideBarItem)],
|
||||
components: {
|
||||
TBadge,
|
||||
TIcon,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
tId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
active: false,
|
||||
isPre: false,
|
||||
isNext: false,
|
||||
tools,
|
||||
isFirstChild: false,
|
||||
isLastChild: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
iconCustomStyle() {
|
||||
return tools._style([
|
||||
{
|
||||
fontSize: 'var(--td-side-bar-icon-size, 20px)',
|
||||
marginRight: '2px',
|
||||
},
|
||||
this._icon.style || '',
|
||||
]);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
icon: {
|
||||
handler(v) {
|
||||
this._icon = typeof v === 'string' ? { name: v } : v;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
disabled: {
|
||||
handler() {
|
||||
this.updateActive(this.value);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
innerAfterLinked() {
|
||||
const parent = this[RELATION_MAP.SideBarItem];
|
||||
this.updateActive(parent.dataValue);
|
||||
},
|
||||
updateActive(value) {
|
||||
const active = value === this.value && !this.disabled;
|
||||
this.active = active;
|
||||
},
|
||||
handleClick() {
|
||||
if (this.disabled) return;
|
||||
const { value, label } = this;
|
||||
|
||||
this[RELATION_MAP.SideBarItem]?.doChange({ value, label });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './side-bar-item.css';
|
||||
|
||||
</style>
|
||||
32
uni_modules/tdesign-uniapp/components/side-bar-item/type.ts
Normal file
32
uni_modules/tdesign-uniapp/components/side-bar-item/type.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdBadgeProps as BadgeProps } from '../badge/type';
|
||||
|
||||
export interface TdSideBarItemProps {
|
||||
/**
|
||||
* 透传至 Badge 组件
|
||||
*/
|
||||
badgeProps?: BadgeProps;
|
||||
/**
|
||||
* 是否禁用
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 图标，传对象则透传至 Icon
|
||||
*/
|
||||
icon?: string | object;
|
||||
/**
|
||||
* 展示的标签
|
||||
* @default ''
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* 当前选项的值
|
||||
*/
|
||||
value?: string | number;
|
||||
}
|
||||
Reference in New Issue
Block a user