From ee65d6c9e5bc187ddb44e24d64489c8f4acf91be Mon Sep 17 00:00:00 2001 From: rex Date: Wed, 15 Jul 2020 00:02:40 +0800 Subject: [PATCH] feat(notice-bar): add new prop background & add new event close (#3388) fix #3380 --- example/pages/notice-bar/index.js | 9 +-- example/pages/notice-bar/index.wxml | 38 +++++------- example/pages/notice-bar/index.wxss | 5 +- packages/notice-bar/README.md | 95 +++++++++++++++-------------- packages/notice-bar/index.ts | 27 ++++---- packages/notice-bar/index.wxml | 2 +- 6 files changed, 80 insertions(+), 96 deletions(-) diff --git a/example/pages/notice-bar/index.js b/example/pages/notice-bar/index.js index 8cb36092..6298dcf7 100644 --- a/example/pages/notice-bar/index.js +++ b/example/pages/notice-bar/index.js @@ -2,12 +2,7 @@ import Page from '../../common/page'; Page({ data: { - text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', - speedValue: 80 - }, - onChange(event) { - this.setData({ - speedValue: event.detail - }); + text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。', + shortText: '技术是开发它的人的共同灵魂。' } }); diff --git a/example/pages/notice-bar/index.wxml b/example/pages/notice-bar/index.wxml index 06a9f7ab..8e5028bc 100644 --- a/example/pages/notice-bar/index.wxml +++ b/example/pages/notice-bar/index.wxml @@ -1,40 +1,30 @@ - - - - - - - + + + - - - [公告] - [结束] - + + + - + - 当前速度{{speedValue}}px/s - + text="{{ shortText }}" + color="#1989fa" + background="#ecf9ff" + left-icon="info-o" + > + diff --git a/example/pages/notice-bar/index.wxss b/example/pages/notice-bar/index.wxss index f86246c4..1308e481 100644 --- a/example/pages/notice-bar/index.wxss +++ b/example/pages/notice-bar/index.wxss @@ -1 +1,4 @@ -/* pages/notice-bar/index.wxss */ \ No newline at end of file +/* pages/notice-bar/index.wxss */ +.margin-top { + margin-top: 4px; +} diff --git a/packages/notice-bar/README.md b/packages/notice-bar/README.md index a6e6adee..04ddc619 100644 --- a/packages/notice-bar/README.md +++ b/packages/notice-bar/README.md @@ -16,62 +16,60 @@ ```html ``` -### 禁用滚动 +### 滚动播放 -文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动 +通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。 ```html + + + + ``` ### 多行展示 -禁用滚动时，可以设置`wrapable`来开启多行展示 +文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。 ```html ``` -### 使用左右插槽 +### 通知栏模式 -使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容 - -```html - - [公告] - [结束] - -``` - -### 通告栏模式 - -默认模式为空，支持`closeable`和`link`。 +通知栏支持 `closeable` 和 `link` 两种模式。 ```html - + + +``` + +### 自定义样式 + +通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。 + +```html ``` @@ -91,29 +89,32 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` | - | -| delay | 动画延迟时间 (s) | _number_ | `1` | - | -| speed | 滚动速率 (px/s) | _number_ | `50` | - | -| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` | - | -| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | -| color | 文本颜色 | _string_ | `#ed6a0c` | - | -| backgroundColor | 滚动条背景 | _string_ | `#fffbe8` | - | -| open-type | 微信开放能力 | _string_ | `navigate` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ---------------------------------------- | --------- | ---------- | +| mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` | +| text | 通知文本内容 | _string_ | `''` | +| color | 通知文本颜色 | _string_ | `#ed6a0c` | +| background | 滚动条背景 | _string_ | `#fffbe8` | +| left-icon | 左侧[图标名称](#/icon)或图片链接 | _string_ | - | +| delay | 动画延迟时间 (s) | _number_ | `1` | +| speed | 滚动速率 (px/s) | _number_ | `50` | +| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | `true` | +| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` | +| open-type | 微信开放能力 | _string_ | `navigate` | ### Events -| 事件名 | 说明 | 参数 | -| ---------- | ------------ | ---- | -| bind:click | 点击事件回调 | - | +| 事件名 | 说明 | 参数 | +| ------ | ---------------- | -------------- | +| click | 点击通知栏时触发 | _event: Event_ | +| close | 关闭通知栏时触发 | _event: Event_ | ### Slot -| 名称 | 说明 | -| ---------- | ------------------ | -| left-icon | 自定义左侧固定内容 | -| right-icon | 自定义右侧固定内容 | +| 名称 | 说明 | +| ---------- | -------------- | +| left-icon | 自定义左侧图标 | +| right-icon | 自定义右侧图标 | ### 外部样式类 diff --git a/packages/notice-bar/index.ts b/packages/notice-bar/index.ts index 20900227..d30e606a 100644 --- a/packages/notice-bar/index.ts +++ b/packages/notice-bar/index.ts @@ -1,9 +1,6 @@ import { VantComponent } from '../common/component'; import { Weapp } from 'definitions/weapp'; -const FONT_COLOR = '#ed6a0c'; -const BG_COLOR = '#fffbe8'; - VantComponent({ props: { text: { @@ -48,15 +45,10 @@ VantComponent({ type: String, value: '', }, - color: { - type: String, - value: FONT_COLOR, - }, - backgroundColor: { - type: String, - value: BG_COLOR, - }, - wrapable: Boolean, + color: String, + backgroundColor: String, + background: String, + wrapable: Boolean }, data: { @@ -134,11 +126,14 @@ VantComponent({ }, this.duration); }, - onClickIcon() { - this.timer && clearTimeout(this.timer); - this.timer = null; + onClickIcon(event) { + if (this.data.mode === 'closeable') { + this.timer && clearTimeout(this.timer); + this.timer = null; - this.setData({ show: false }); + this.setData({ show: false }); + this.$emit('close', event.detail); + } }, onClick(event: Weapp.Event) { diff --git a/packages/notice-bar/index.wxml b/packages/notice-bar/index.wxml index eb0851c3..9228c6b5 100644 --- a/packages/notice-bar/index.wxml +++ b/packages/notice-bar/index.wxml @@ -3,7 +3,7 @@