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 6eb8c4a
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 15 deletions.
8 changes: 8 additions & 0 deletions example/pages/notice-bar/notice-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 6eb8c4a

Please sign in to comment.