Skip to content

Commit

Permalink
feat(notice-bar): add prefix-icon and content trigger
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Apr 20, 2022
1 parent 4622ad1 commit 86d4d6c
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 56 deletions.
10 changes: 9 additions & 1 deletion example/pages/notice-bar/notice-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Page({
visible: true,
marquee1: {
speed: 80,
loop: 2,
loop: -1,
delay: 0,
},
marquee2: {
Expand All @@ -24,6 +24,14 @@ Page({
console.log('click extre text', e);
},

handlePrefixIcon(e) {
console.log('click prefix-icon close', e);
},

handleContent(e) {
console.log('click content', e);
},

handleSuffixIconCloseDemo(e) {
console.log('click suffix-icon close', e);
this.setData({
Expand Down
2 changes: 2 additions & 0 deletions example/pages/notice-bar/notice-bar.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
visible="{{true}}"
suffixIcon="chevron-right"
content="提示文字描述提示文字描述提示文字描述"
bind:prefix-icon="handlePrefixIcon"
bind:content="handleContent"
bind:suffix-icon="handleSuffixIconLink"
/>
</view>
Expand Down
25 changes: 12 additions & 13 deletions src/notice-bar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ isComponent: true

### 带图标静态公告栏
```xml
<t-notice-bar visible="{{true}}" content="带图标静态公告栏"></t-notice-bar>
<t-notice-bar visible="{{true}}" content="带图标静态公告栏"/>
<t-notice-bar visible="{{true}}" content="提示文字描述提示文字描述提示文字描述">
<view slot="prefixIcon">
<t-icon name="error-circle-filled"></t-icon>
Expand All @@ -38,8 +38,10 @@ isComponent: true
visible="{{true}}"
suffixIcon="chevron-right"
content="提示文字描述提示文字描述提示文字描述"
bind:prefix-icon="handlePrefixIcon"
bind:content="handleContent"
bind:suffix-icon="handleSuffixIconLink"
></t-notice-bar>
/>

<t-notice-bar
visible="{{visible}}"
Expand Down Expand Up @@ -132,18 +134,15 @@ isComponent: true
## API
### NoticeBar Props

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| --------------- | ---------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- |
| content | String / Slot | - | 文本内容 | N |
| delay | Number | 0 | 当 marquee = true 时，延迟滚动的时间，单位 ms | N |
| extra | String / Slot | - | 右侧额外信息 | N |
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---- | ---- | ------ | ---- ||
| content | String / Slot | - | 文本内容 | N |
| extra | String / Slot | - | 右侧额外信息| N |
| marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N |
| prefix-icon | String | - | 左边图标 | N |
| speed | Number | 50 | 当 marquee = true 时，文字滚动的速度，默认50px/s | N |
| suffix-icon | String | - | 后缀图标 | N |
| theme | String | info | 内置主题。可选项：info/success/warning/error | N |
| visible | Boolean | false | 显示/隐藏 | N |
| default-visible | Boolean | undefined | 显示/隐藏。非受控属性 | N |
| prefix-icon | String | - | 左边图标 | N |
| suffix-icon | String | - | 后缀图标 | N |
| theme | String | info | 内置主题。可选项：info/success/warning/error | N |
| visible | Boolean | false | 显示/隐藏 | N |

### NoticeBar Events

Expand Down
8 changes: 8 additions & 0 deletions src/notice-bar/notice-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,14 @@ export default class NoticeBar extends SuperComponent {
}
},

handlePrefixIcon() {
this.triggerEvent('prefix-icon', { self: this });
},

handleContent() {
this.triggerEvent('content', { self: this });
},

handleSuffixIcon() {
this.triggerEvent('suffix-icon', { self: this });
},
Expand Down
4 changes: 2 additions & 2 deletions src/notice-bar/notice-bar.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<view wx:if="{{visible}}" class="{{classPrefix}} {{classPrefix}}--{{theme}} {{prefix}}-class">
<!-- prefixIcon -->
<view class="{{classPrefix}}__prefix-icon {{prefix}}-class-prefix-icon">
<view class="{{classPrefix}}__prefix-icon {{prefix}}-class-prefix-icon" bind:tap="handlePrefixIcon">
<t-icon wx:if="{{ iconName }}" name="{{ iconName }}" />
<slot wx:else name="prefixIcon" />
</view>

<!-- conten -->
<view class="{{classPrefix}}__content-wrap">
<view class="{{classPrefix}}__content-wrap" bind:tap="handleContent">
<view
class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}"
animation="{{ animationData }}"
Expand Down
15 changes: 0 additions & 15 deletions src/notice-bar/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ const props: TdNoticeBarProps = {
content: {
type: String,
},
/** 当 marquee = true 时，延迟滚动的时间，单位 ms */
delay: {
type: Number,
value: 0,
},
/** 右侧额外信息 */
extra: {
type: String,
Expand All @@ -30,11 +25,6 @@ const props: TdNoticeBarProps = {
type: String,
value: '',
},
/** 当 marquee = true 时，文字滚动的速度，默认50px/s */
speed: {
type: Number,
value: 50,
},
/** 后缀图标 */
suffixIcon: {
type: String,
Expand All @@ -50,11 +40,6 @@ const props: TdNoticeBarProps = {
type: Boolean,
value: null,
},
/** 显示/隐藏，非受控属性 */
defaultVisible: {
type: Boolean,
value: false,
},
};

export default props;
30 changes: 5 additions & 25 deletions src/notice-bar/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,6 @@ export interface TdNoticeBarProps {
type: StringConstructor;
value?: string;
};
/**
* 当 marquee = true 时，延迟滚动的时间，单位 ms
* @default 0
*/
delay?: {
type: NumberConstructor;
value?: number;
};
/**
* 右侧额外信息
*/
Expand All @@ -44,14 +36,6 @@ export interface TdNoticeBarProps {
type: StringConstructor;
value?: string;
};
/**
* 当 marquee = true 时，文字滚动的速度，默认50px/s
* @default 50
*/
speed?: {
type: NumberConstructor;
value?: number;
};
/**
* 后缀图标
* @default ''
Expand All @@ -76,14 +60,10 @@ export interface TdNoticeBarProps {
type: BooleanConstructor;
value?: boolean;
};
/**
* 显示/隐藏，非受控属性
* @default false
*/
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
}

export interface DrawMarquee { speed?: number; loop?: number; delay?: number };
export interface DrawMarquee {
speed?: number;
loop?: number;
delay?: number;
}

0 comments on commit 86d4d6c

Please sign in to comment.