New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

@@ -0,0 +1,53 @@
:: BASE_DOC ::
## API
### NoticeBar Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
content | String / Array / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
direction | String | horizontal | options: horizontal/vertical | N
interval | Number | 2000 | \- | N
marquee | Boolean / Object | false | Typescript`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
operation | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
prefix-icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
suffix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
theme | String | info | options: info/success/warning/error | N
visible | Boolean | false | \- | N
default-visible | Boolean | undefined | uncontrolled property | N
### NoticeBar Events
name | params | description
-- | -- | --
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | \-
click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
### NoticeBar External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-operation | \-
t-class-prefix-icon | \-
t-class-suffix-icon | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-notice-bar-error-bg-color | @error-color-1 | -
--td-notice-bar-error-color | @error-color | -
--td-notice-bar-font-color | @text-color-primary | -
--td-notice-bar-info-bg-color | @brand-color-light | -
--td-notice-bar-info-color | @brand-color | -
--td-notice-bar-operation-font-color | @brand-color | -
--td-notice-bar-success-bg-color | @success-color-1 | -
--td-notice-bar-success-color | @success-color | -
--td-notice-bar-suffix-icon-color | @text-color-placeholder | -
--td-notice-bar-warning-bg-color | @warning-color-1 | -
--td-notice-bar-warning-color | @warning-color | -

View File

@@ -0,0 +1,124 @@
---
title: NoticeBar 公告栏
description: 在导航栏下方,用于给用户显示提示消息。
spline: message
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.9.0 版本上线,请留意版本。
</div>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/ul8DximQ79SB" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 01 组件类型
纯文字的公告栏
{{ base }}
带图标的公告栏
{{ iconDemo }}
带关闭的公告栏
{{ suffixIcon }}
带入口的公告栏
{{ event }}
自定义样式的公告栏
{{ custom }}
自定义内容的公告栏
{{ customization }}
### 02 组件状态
公告栏类型有普通info、警示warning、成功success、错误error
{{ theme }}
### 03 可滚动公告栏
可滚动公告栏有水平horizontal和垂直vertical
{{ scrolling }}
## API
### NoticeBar Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
content | String / Array / Slot | - | 文本内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
direction | String | horizontal | 滚动方向。可选项horizontal/vertical | N
interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】 | N
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型:`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
operation | String / Slot | - | 右侧额外信息。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
prefix-icon | String / Boolean / Object / Slot | true | 前缀图标。值为字符串表示图标名称,值为 `false` 表示不显示前缀图标,值为 `Object` 类型,表示透传至 `icon`,不传表示使用主题图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型,表示透传至 `icon`,不传表示不显示后缀图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
theme | String | info | 内置主题。可选项info/success/warning/error | N
visible | Boolean | false | 显示/隐藏 | N
default-visible | Boolean | undefined | 显示/隐藏。非受控属性 | N
### NoticeBar Events
名称 | 参数 | 描述
-- | -- | --
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发
click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
### NoticeBar External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-operation | 右侧额外信息样式类
t-class-prefix-icon | 前置图标样式类
t-class-suffix-icon | 后置图标样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-notice-bar-error-bg-color | @error-color-1 | -
--td-notice-bar-error-color | @error-color | -
--td-notice-bar-font-color | @text-color-primary | -
--td-notice-bar-info-bg-color | @brand-color-light | -
--td-notice-bar-info-color | @brand-color | -
--td-notice-bar-operation-font-color | @brand-color | -
--td-notice-bar-success-bg-color | @success-color-1 | -
--td-notice-bar-success-color | @success-color | -
--td-notice-bar-suffix-icon-color | @text-color-placeholder | -
--td-notice-bar-warning-bg-color | @warning-color-1 | -
--td-notice-bar-warning-color | @warning-color | -

View File

@@ -0,0 +1,36 @@
import { SuperComponent, ComponentsOptionsType } from '../common/src/index';
export default class NoticeBar extends SuperComponent {
externalClasses: string[];
options: ComponentsOptionsType;
properties: import("./type").TdNoticeBarProps;
data: {
prefix: string;
classPrefix: string;
loop: number;
__ready: boolean;
};
observers: {
marquee(val: any): void;
visible(visible: any): void;
prefixIcon(prefixIcon: any): void;
suffixIcon(v: any): void;
content(): void;
};
lifetimes: {
created(): void;
detached(): void;
ready(): void;
};
methods: {
initAnimation(): void;
startScrollAnimation(isFirstScroll?: boolean): void;
show(): void;
clearNoticeBarAnimation(): void;
setPrefixIcon(v: any): void;
onChange(e: WechatMiniprogram.SwiperChange): void;
clickPrefixIcon(): void;
clickContent(): void;
clickSuffixIcon(): void;
clickOperation(): void;
};
}

View File

@@ -0,0 +1,192 @@
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 { getRect, getAnimationFrame, calcIcon } from '../common/utils';
import props from './props';
import config from '../common/config';
const { prefix } = config;
const name = `${prefix}-notice-bar`;
const THEME_ICON = {
info: 'info-circle-filled',
success: 'check-circle-filled',
warning: 'info-circle-filled',
error: 'error-circle-filled',
};
let NoticeBar = class NoticeBar extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-content`,
`${prefix}-class-prefix-icon`,
`${prefix}-class-operation`,
`${prefix}-class-suffix-icon`,
];
this.options = {
multipleSlots: true,
pureDataPattern: /^__/,
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
loop: -1,
__ready: false,
};
this.observers = {
marquee(val) {
if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
this.setData({
marquee: {
speed: 50,
loop: -1,
delay: 0,
},
});
}
},
visible(visible) {
if (!this.data.__ready)
return;
if (visible) {
this.show();
}
else {
this.clearNoticeBarAnimation();
}
},
prefixIcon(prefixIcon) {
this.setPrefixIcon(prefixIcon);
},
suffixIcon(v) {
this.setData({
_suffixIcon: calcIcon(v),
});
},
content() {
if (!this.data.__ready)
return;
this.clearNoticeBarAnimation();
this.initAnimation();
},
};
this.lifetimes = {
created() {
this.resetAnimation = wx.createAnimation({
duration: 0,
timingFunction: 'linear',
});
},
detached() {
this.clearNoticeBarAnimation();
},
ready() {
this.show();
this.setData({ __ready: true });
},
};
this.methods = {
initAnimation() {
const warpID = `.${name}__content-wrap`;
const nodeID = `.${name}__content`;
getAnimationFrame(this, () => {
Promise.all([getRect(this, nodeID), getRect(this, warpID)])
.then(([nodeRect, wrapRect]) => {
const { marquee } = this.properties;
if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width || marquee === false) {
return;
}
if (marquee || wrapRect.width < nodeRect.width) {
const speeding = marquee.speed || 50;
const delaying = marquee.delay || 0;
const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000;
const firstAnimationDuration = (nodeRect.width / speeding) * 1000;
this.setData({
wrapWidth: Number(wrapRect.width),
nodeWidth: Number(nodeRect.width),
animationDuration: animationDuration,
delay: delaying,
loop: marquee.loop - 1,
firstAnimationDuration: firstAnimationDuration,
});
marquee.loop !== 0 && this.startScrollAnimation(true);
}
})
.catch(() => { });
});
},
startScrollAnimation(isFirstScroll = false) {
this.clearNoticeBarAnimation();
const { wrapWidth, nodeWidth, firstAnimationDuration, animationDuration, delay } = this.data;
const delayTime = isFirstScroll ? delay : 0;
const durationTime = isFirstScroll ? firstAnimationDuration : animationDuration;
this.setData({
animationData: this.resetAnimation
.translateX(isFirstScroll ? 0 : wrapWidth)
.step()
.export(),
});
getAnimationFrame(this, () => {
this.setData({
animationData: wx
.createAnimation({ duration: durationTime, timingFunction: 'linear', delay: delayTime })
.translateX(-nodeWidth)
.step()
.export(),
});
});
this.nextAnimationContext = setTimeout(() => {
if (this.data.loop > 0) {
this.data.loop -= 1;
this.startScrollAnimation();
}
else if (this.data.loop === 0) {
this.setData({ animationData: this.resetAnimation.translateX(0).step().export() });
}
else if (this.data.loop < 0) {
this.startScrollAnimation();
}
}, durationTime + delayTime);
},
show() {
this.clearNoticeBarAnimation();
this.setPrefixIcon(this.properties.prefixIcon);
this.initAnimation();
},
clearNoticeBarAnimation() {
this.nextAnimationContext && clearTimeout(this.nextAnimationContext);
this.nextAnimationContext = null;
},
setPrefixIcon(v) {
const { theme } = this.properties;
this.setData({
_prefixIcon: calcIcon(v, THEME_ICON[theme]),
});
},
onChange(e) {
const { current, source } = e.detail;
this.triggerEvent('change', { current, source });
},
clickPrefixIcon() {
this.triggerEvent('click', { trigger: 'prefix-icon' });
},
clickContent() {
this.triggerEvent('click', { trigger: 'content' });
},
clickSuffixIcon() {
this.triggerEvent('click', { trigger: 'suffix-icon' });
},
clickOperation() {
this.triggerEvent('click', { trigger: 'operation' });
},
};
}
};
NoticeBar = __decorate([
wxComponent()
], NoticeBar);
export default NoticeBar;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}

View File

@@ -0,0 +1,62 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
wx:if="{{visible}}"
style="{{_._style([style, customStyle])}}"
class="{{classPrefix}} {{classPrefix}}--{{theme}} class {{prefix}}-class"
>
<!-- prefixIcon -->
<view class="{{classPrefix}}__prefix-icon" bind:tap="clickPrefixIcon">
<slot name="prefix-icon" />
<template
wx:if="{{_prefixIcon}}"
is="icon"
data="{{tClass: prefix + '-class-prefix-icon', ..._prefixIcon }}"
></template>
</view>
<!-- content -->
<view class="{{classPrefix}}__content-wrap" bind:tap="clickContent">
<!-- 垂直滚动通知基于swiper实现适用信息量短的多条公告消息超出省略 -->
<view wx:if="{{ direction === 'vertical' && _.isArray(content) }}">
<swiper
autoplay="true"
vertical="true"
circular="true"
interval="{{interval}}"
display-multiple-items="1"
class="{{classPrefix}}__content {{classPrefix}}__content--vertical"
bindchange="onChange"
>
<block wx:for="{{content}}" wx:key="index">
<swiper-item>
<view class="{{classPrefix}}__content--vertical-item"> {{item}} </view>
</swiper-item>
</block>
</swiper>
</view>
<view
wx:else
class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}"
animation="{{ animationData }}"
>
<block wx:if="{{content}}">{{content}}</block>
<slot name="content" />
<view class="{{classPrefix}}__operation {{prefix}}-class-operation" catch:tap="clickOperation">
<block wx:if="{{ operation }}">{{operation}}</block>
<slot name="operation" />
</view>
</view>
</view>
<!-- suffixIcon -->
<view class="{{classPrefix}}__suffix-icon" bind:tap="clickSuffixIcon">
<slot name="suffix-icon" />
<template
wx:if="{{_suffixIcon}}"
is="icon"
data="{{tClass: prefix + '-class-suffix-icon', ..._suffixIcon }}"
></template>
</view>
</view>

View File

@@ -0,0 +1,103 @@
.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-notice-bar {
display: flex;
align-items: flex-start;
padding: 26rpx 32rpx;
font-size: var(--td-font-size-base, 28rpx);
}
.t-notice-bar__content-wrap {
flex: 1;
overflow-x: hidden;
line-height: 44rpx;
color: var(--td-notice-bar-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-notice-bar__content {
display: inline-block;
white-space: nowrap;
}
.t-notice-bar__content-wrapable {
white-space: normal;
}
.t-notice-bar__content--vertical {
display: block;
height: 44rpx;
line-height: 44rpx;
}
.t-notice-bar__content--vertical-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-notice-bar__prefix-icon {
color: inherit;
}
.t-notice-bar__prefix-icon:not(:empty) {
padding-right: var(--td-spacer, 16rpx);
width: 44rpx;
}
.t-notice-bar__suffix-icon {
color: var(--td-notice-bar-suffix-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-notice-bar__prefix-icon,
.t-notice-bar__suffix-icon {
font-size: 44rpx;
}
.t-notice-bar__prefix-icon:empty,
.t-notice-bar__suffix-icon:empty {
display: none;
}
.t-notice-bar__operation {
display: inline-flex;
vertical-align: top;
color: var(--td-notice-bar-operation-font-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
font-weight: 700;
}
.t-notice-bar__operation:empty {
display: none;
}
.t-notice-bar__suffix-icon:not(:empty) {
padding-left: var(--td-spacer, 16rpx);
width: 44rpx;
}
.t-notice-bar--info {
color: var(--td-notice-bar-info-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
background-color: var(--td-notice-bar-info-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-notice-bar--success {
color: var(--td-notice-bar-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
background-color: var(--td-notice-bar-success-bg-color, var(--td-success-color-1, #e3f9e9));
}
.t-notice-bar--warning {
color: var(--td-notice-bar-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
background-color: var(--td-notice-bar-warning-bg-color, var(--td-warning-color-1, #fff1e9));
}
.t-notice-bar--error {
color: var(--td-notice-bar-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
background-color: var(--td-notice-bar-error-bg-color, var(--td-error-color-1, #fff0ed));
}

View File

@@ -0,0 +1,3 @@
import { TdNoticeBarProps } from './type';
declare const props: TdNoticeBarProps;
export default props;

View File

@@ -0,0 +1,40 @@
const props = {
content: {
type: null,
},
direction: {
type: String,
value: 'horizontal',
},
interval: {
type: Number,
value: 2000,
},
marquee: {
type: null,
value: false,
},
operation: {
type: String,
},
prefixIcon: {
type: null,
value: true,
},
suffixIcon: {
type: null,
},
theme: {
type: String,
value: 'info',
},
visible: {
type: Boolean,
value: null,
},
defaultVisible: {
type: Boolean,
value: false,
},
};
export default props;

View File

@@ -0,0 +1,47 @@
export interface TdNoticeBarProps {
content?: {
type: null;
value?: string | string[];
};
direction?: {
type: StringConstructor;
value?: 'horizontal' | 'vertical';
};
interval?: {
type: NumberConstructor;
value?: number;
};
marquee?: {
type: null;
value?: boolean | NoticeBarMarquee;
};
operation?: {
type: StringConstructor;
value?: string;
};
prefixIcon?: {
type: null;
value?: string | boolean | object;
};
suffixIcon?: {
type: null;
value?: string | object;
};
theme?: {
type: StringConstructor;
value?: 'info' | 'success' | 'warning' | 'error';
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
}
export interface NoticeBarMarquee {
speed?: number;
loop?: number;
delay?: number;
}

View File

@@ -0,0 +1 @@
export {};