New Huajishe Check ChaoXing
This commit is contained in:
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdTabBarItemProps } from './type';
|
||||
declare const props: TdTabBarItemProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,15 @@
|
||||
const props = {
|
||||
badgeProps: {
|
||||
type: Object,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
},
|
||||
subTabBar: {
|
||||
type: Array,
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
37
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts
vendored
Normal file
37
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class TabBarItem extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
parent: any;
|
||||
relations: RelationsOptions;
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
isSpread: boolean;
|
||||
isChecked: boolean;
|
||||
hasChildren: boolean;
|
||||
currentName: string;
|
||||
split: boolean;
|
||||
iconOnly: boolean;
|
||||
theme: string;
|
||||
crowded: boolean;
|
||||
shape: string;
|
||||
};
|
||||
properties: import("./type").TdTabBarItemProps;
|
||||
observers: {
|
||||
subTabBar(value: Record<string, any>[]): void;
|
||||
icon(v: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): Promise<void>;
|
||||
};
|
||||
methods: {
|
||||
showSpread(): void;
|
||||
toggle(): void;
|
||||
selectChild(event: any): void;
|
||||
checkActive(value: any): void;
|
||||
closeSpread(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { wxComponent, SuperComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
import { getRect, calcIcon } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const classPrefix = `${prefix}-tab-bar-item`;
|
||||
let TabBarItem = class TabBarItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.parent = null;
|
||||
this.relations = {
|
||||
'../tab-bar/tab-bar': {
|
||||
type: 'ancestor',
|
||||
linked(parent) {
|
||||
const { theme, split, shape } = parent.data;
|
||||
this.setData({
|
||||
theme,
|
||||
split,
|
||||
shape,
|
||||
currentName: this.properties.value ? this.properties.value : parent.initName(),
|
||||
});
|
||||
parent.updateChildren();
|
||||
},
|
||||
},
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix,
|
||||
isSpread: false,
|
||||
isChecked: false,
|
||||
hasChildren: false,
|
||||
currentName: '',
|
||||
split: true,
|
||||
iconOnly: false,
|
||||
theme: '',
|
||||
crowded: false,
|
||||
shape: 'normal',
|
||||
};
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
subTabBar(value) {
|
||||
this.setData({
|
||||
hasChildren: value.length > 0,
|
||||
});
|
||||
},
|
||||
icon(v) {
|
||||
this.setData({
|
||||
_icon: calcIcon(v),
|
||||
});
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
return __awaiter(this, void 0, void 0, function* () {
|
||||
const res = yield getRect(this, `.${classPrefix}__text`);
|
||||
this.setData({ iconOnly: res.height === 0 });
|
||||
});
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
showSpread() {
|
||||
this.setData({
|
||||
isSpread: true,
|
||||
});
|
||||
},
|
||||
toggle() {
|
||||
const { currentName, hasChildren, isSpread } = this.data;
|
||||
if (hasChildren) {
|
||||
this.setData({
|
||||
isSpread: !isSpread,
|
||||
});
|
||||
}
|
||||
this.$parent.updateValue(currentName);
|
||||
this.$parent.changeOtherSpread(currentName);
|
||||
},
|
||||
selectChild(event) {
|
||||
const { value } = event.target.dataset;
|
||||
this.$parent.updateValue(value);
|
||||
this.setData({
|
||||
isSpread: false,
|
||||
});
|
||||
},
|
||||
checkActive(value) {
|
||||
const { currentName, subTabBar } = this.data;
|
||||
const isChecked = (subTabBar === null || subTabBar === void 0 ? void 0 : subTabBar.some((item) => item.value === value)) || currentName === value;
|
||||
this.setData({
|
||||
isChecked,
|
||||
});
|
||||
},
|
||||
closeSpread() {
|
||||
this.setData({
|
||||
isSpread: false,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
TabBarItem = __decorate([
|
||||
wxComponent()
|
||||
], TabBarItem);
|
||||
export default TabBarItem;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-badge": "../badge/badge"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="{{_.cls(classPrefix, [['split', split], ['text-only', !icon], ['crowded', crowded], shape])}} class {{prefix}}-class"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [['checked', isChecked], theme])}}"
|
||||
hover-class="{{classPrefix}}__content--active"
|
||||
hover-stay-time="{{200}}"
|
||||
bindtap="toggle"
|
||||
aria-selected="{{(!hasChildren || !isSpread) && isChecked ? true : false}}"
|
||||
aria-expanded="{{hasChildren && isSpread ? true : ''}}"
|
||||
aria-role="{{hasChildren ? 'button' : 'tab'}}"
|
||||
aria-label="{{ ariaLabel || (badgeProps.dot || badgeProps.count ? _.getBadgeAriaLabel({ ...badgeProps }) : '') }}"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__icon"
|
||||
style="height: {{iconOnly ? 24 : 20}}px"
|
||||
aria-hidden="{{ badgeProps.dot || badgeProps.count }}"
|
||||
>
|
||||
<t-badge
|
||||
wx:if="{{badgeProps.dot || badgeProps.count}}"
|
||||
count="{{badgeProps.count || 0}}"
|
||||
max-count="{{badgeProps.maxCount || 99}}"
|
||||
dot="{{badgeProps.dot || false}}"
|
||||
content="{{badgeProps.content || ''}}"
|
||||
size="{{badgeProps.size || 'medium'}}"
|
||||
visible="{{badgeProps.visible}}"
|
||||
offset="{{badgeProps.offset || [0,0]}}"
|
||||
t-class-count="{{prefix + '-badge-class'}}"
|
||||
>
|
||||
<template is="icon" data="{{ size: iconOnly ? 24 : 20, ..._icon }}" />
|
||||
</t-badge>
|
||||
<template wx:elif="{{!!icon}}" is="icon" data="{{ ariaHidden: !iconOnly, size: iconOnly ? 24 : 20, ..._icon }}" />
|
||||
<slot name="icon" />
|
||||
</view>
|
||||
<view class="{{_.cls(classPrefix + '__text', [['small', !!icon]])}}">
|
||||
<t-icon wx:if="{{hasChildren}}" name="view-list" size="32rpx" t-class="{{classPrefix}}__icon-menu" />
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}">
|
||||
<view
|
||||
class="{{classPrefix}}__spread-item"
|
||||
hover-class="{{classPrefix}}__spread-item--active"
|
||||
hover-stay-time="{{200}}"
|
||||
wx:for="{{subTabBar}}"
|
||||
wx:for-item="child"
|
||||
wx:for-index="index"
|
||||
wx:key="value"
|
||||
bind:tap="selectChild"
|
||||
data-value="{{child.value || index}}"
|
||||
aria-role="tab"
|
||||
>
|
||||
<view class="{{classPrefix}}__spread-item-split" wx:if="{{index !== 0}}" />
|
||||
<view class="{{classPrefix}}__spread-item-text" data-value="{{child.value || index}}">{{ child.label }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,147 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
:host {
|
||||
flex: 1;
|
||||
}
|
||||
.t-tab-bar-item {
|
||||
flex: 1;
|
||||
height: var(--td-tab-bar-height, 80rpx);
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
margin: 16rpx 0;
|
||||
background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
.t-tab-bar-item--text-only {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.t-tab-bar-item--split + .t-tab-bar-item--split::before {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-left: 1px solid var(--td-tab-bar-border-color, var(--td-border-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
transform: scaleX(0.5);
|
||||
top: 16rpx;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
.t-tab-bar-item--crowded {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
.t-tab-bar-item--round {
|
||||
border-radius: 99px;
|
||||
}
|
||||
.t-tab-bar-item__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16rpx;
|
||||
color: var(--td-tab-bar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-tab-bar-item__content--checked {
|
||||
color: var(--td-tab-bar-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
font-weight: 600;
|
||||
}
|
||||
.t-tab-bar-item__content--tag {
|
||||
border-radius: 99px;
|
||||
}
|
||||
.t-tab-bar-item__content--tag.t-tab-bar-item__content--checked {
|
||||
background-color: var(--td-tab-bar-active-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-tab-bar-item__icon {
|
||||
display: contents;
|
||||
}
|
||||
.t-tab-bar-item__icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-tab-bar-item__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.t-tab-bar-item__text--small {
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.t-tab-bar-item__icon-menu {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.t-tab-bar-item__spread {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 7%;
|
||||
width: 86%;
|
||||
background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
transform: translate3d(0, calc(-100% - 32rpx), 0);
|
||||
z-index: 1;
|
||||
border-radius: 12rpx;
|
||||
color: var(--td-tab-bar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
box-shadow: var(--td-tab-bar-spread-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
|
||||
}
|
||||
.t-tab-bar-item__spread::before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 16rpx solid transparent;
|
||||
border-top: 16rpx solid var(--td-tab-bar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||
transform: translate3d(-50%, 32rpx, 0);
|
||||
}
|
||||
.t-tab-bar-item__spread-item {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
.t-tab-bar-item__spread-item--active {
|
||||
background-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
.t-tab-bar-item__spread-item-split {
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
background-color: var(--td-tab-bar-spread-border-color, var(--td-border-color, var(--td-gray-color-3, #e7e7e7)));
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
transform: translateY(0.5);
|
||||
}
|
||||
.t-tab-bar-item__spread-item-text {
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
23
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts
vendored
Normal file
23
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
import { BadgeProps } from '../badge/index';
|
||||
export interface TdTabBarItemProps {
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: BadgeProps;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
subTabBar?: {
|
||||
type: ArrayConstructor;
|
||||
value?: SubTabBarItem[];
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
export interface SubTabBarItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user