New Huajishe Check ChaoXing
This commit is contained in:
e2hang
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdSideBarItemProps } from './type';
|
||||
declare const props: TdSideBarItemProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,20 @@
|
||||
const props = {
|
||||
badgeProps: {
|
||||
type: Object,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
44
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.d.ts
vendored
Normal file
44
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/side-bar-item.d.ts
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class SideBarItem extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: {
|
||||
tId: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: import("../badge").BadgeProps;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
observers: {
|
||||
icon(v: any): void;
|
||||
};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
prefix: string;
|
||||
active: boolean;
|
||||
isPre: boolean;
|
||||
isNext: boolean;
|
||||
};
|
||||
methods: {
|
||||
updateActive(value: any): void;
|
||||
handleClick(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
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;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-side-bar-item`;
|
||||
let SideBarItem = class SideBarItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = Object.assign(Object.assign({}, props), { tId: {
|
||||
type: String,
|
||||
} });
|
||||
this.relations = {
|
||||
'../side-bar/side-bar': {
|
||||
type: 'parent',
|
||||
linked(parent) {
|
||||
this.parent = parent;
|
||||
this.updateActive(parent.data.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.observers = {
|
||||
icon(v) {
|
||||
this.setData({ _icon: typeof v === 'string' ? { name: v } : v });
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
prefix,
|
||||
active: false,
|
||||
isPre: false,
|
||||
isNext: false,
|
||||
};
|
||||
this.methods = {
|
||||
updateActive(value) {
|
||||
const active = value === this.data.value;
|
||||
this.setData({
|
||||
active,
|
||||
});
|
||||
},
|
||||
handleClick() {
|
||||
var _a;
|
||||
if (this.data.disabled)
|
||||
return;
|
||||
const { value, label } = this.data;
|
||||
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.doChange({ value, label });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
SideBarItem = __decorate([
|
||||
wxComponent()
|
||||
], SideBarItem);
|
||||
export default SideBarItem;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-badge": "../badge/badge",
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<import src="../common/template/badge" />
|
||||
<import src="../common/template/icon" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
id="{{tId}}"
|
||||
class="{{_.cls(classPrefix, [['active', active], ['disabled', disabled]])}} class {{prefix}}-class"
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
bind:tap="handleClick"
|
||||
aria-role="button"
|
||||
aria-label="{{ active ? '已选中，' + label : label}}"
|
||||
aria-label="{{ ariaLabel || (badgeProps.dot || badgeProps.count ? (active ? '已选中，' + label + _.getBadgeAriaLabel({ ...badgeProps }) : label + _.getBadgeAriaLabel({ ...badgeProps })) : '') }}"
|
||||
aria-disabled="{{disabled}}"
|
||||
>
|
||||
<block wx:if="{{active}}">
|
||||
<view class="{{classPrefix}}__line"></view>
|
||||
<view class="{{classPrefix}}__prefix"></view>
|
||||
<view class="{{classPrefix}}__suffix"></view>
|
||||
</block>
|
||||
<template wx:if="{{_icon}}" is="icon" data="{{ tClass: classPrefix + '__icon', ..._icon }}" />
|
||||
<block wx:if="{{badgeProps}}">
|
||||
<template is="badge" data="{{ ...badgeProps, content: label }}" />
|
||||
</block>
|
||||
<block wx:else>{{label}}</block>
|
||||
</view>
|
||||
@@ -0,0 +1,93 @@
|
||||
.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);
|
||||
}
|
||||
.t-side-bar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
font-size: var(--td-side-bar-font-size, 32rpx);
|
||||
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, 112rpx);
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
line-height: var(--td-side-bar-item-line-height, 48rpx);
|
||||
}
|
||||
.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))));
|
||||
}
|
||||
.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;
|
||||
}
|
||||
23
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/type.d.ts
vendored
Normal file
23
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/side-bar-item/type.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
import { BadgeProps } from '../badge/index';
|
||||
export interface TdSideBarItemProps {
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: BadgeProps;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
label?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user