blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(notice-bar): add new prop background & add new event close (#3388)

Browse Source 
fix #3380
This commit is contained in:
rex 2020-07-15 00:02:40 +08:00 committed by GitHub
parent 375eb64adc
commit ee65d6c9e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
example/pages/notice-bar/index.js
View File

@ -2,12 +2,7 @@ import Page from '../../common/page';
Page({ Page({
data: { data: {
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
speedValue: 80 shortText: '技术是开发它的人的共同灵魂。'
},
onChange(event) {
this.setData({
speedValue: event.detail
});
} }
}); });

38
example/pages/notice-bar/index.wxml
View File

@ -1,40 +1,30 @@
<demo-block title="基础用法"> <demo-block title="基础用法">
<van-notice-bar <van-notice-bar
text="{{ text }}" text="{{ text }}"
left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" left-icon="volume-o"
/> />
</demo-block> </demo-block>
<demo-block title="通告栏模式"> <demo-block title="滚动模式">
<van-notice-bar mode="closeable" text="{{ text }}" custom-class="demo-margin-bottom" /> <van-notice-bar scrollable text="{{ shortText }}" custom-class="demo-margin-bottom" />
<van-notice-bar mode="link" text="{{ text }}" /> <van-notice-bar scrollable="{{ false }}" text="{{ text }}" custom-class="demo-margin-bottom" />
</demo-block>
<demo-block title="禁用滚动">
<van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
</demo-block> </demo-block>
<demo-block title="多行展示"> <demo-block title="多行展示">
<van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" /> <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
</demo-block> </demo-block>
<demo-block title="使用左右插槽"> <demo-block title="通知栏模式">
<van-notice-bar text="{{ text }}"> <van-notice-bar mode="closeable" text="{{ shortText }}" />
<text slot="left-icon">[公告]</text> <van-notice-bar custom-class="margin-top" mode="link" text="{{ shortText }}" />
<text slot="right-icon">[结束]</text>
</van-notice-bar>
</demo-block> </demo-block>
<demo-block title="自定义滚动速率"> <demo-block title="自定义样式">
<van-notice-bar <van-notice-bar
text="{{ text }}" text="{{ shortText }}"
speed="{{speedValue}}" color="#1989fa"
left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" background="#ecf9ff"
/> left-icon="info-o"
当前速度{{speedValue}}px/s >
<van-slider </van-notice-bar>
value="{{speedValue}}"
custom-class="slider"
bind:change="onChange"
/>
</demo-block> </demo-block>

3
example/pages/notice-bar/index.wxss
View File

@ -1 +1,4 @@
/* pages/notice-bar/index.wxss */ /* pages/notice-bar/index.wxss */
.margin-top {
margin-top: 4px;
}

91
packages/notice-bar/README.md
View File

@ -16,62 +16,60 @@
```html ```html
<van-notice-bar <van-notice-bar
left-icon="https://img.yzcdn.cn/1.png" left-icon="volume-o"
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/> />
``` ```
### 禁用滚动 ### 滚动播放
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动 通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
```html ```html
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
<van-notice-bar <van-notice-bar
scrollable="false" scrollable="{{ false }}"
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/> />
``` ```
### 多行展示 ### 多行展示
禁用滚动时，可以设置`wrapable`来开启多行展示 文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。
```html ```html
<van-notice-bar <van-notice-bar
wrapable wrapable
scrollable="false" scrollable="{{ false }}"
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/> />
``` ```
### 使用左右插槽 ### 通知栏模式
使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容 通知栏支持 `closeable` 和 `link` 两种模式。
```html
<van-notice-bar
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
>
<text slot="left-icon">[公告]</text>
<text slot="right-icon">[结束]</text>
</van-notice-bar>
```
### 通告栏模式
默认模式为空，支持`closeable`和`link`。
```html ```html
<!-- closeable 模式，在右侧显示关闭按钮 --> <!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar <van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />
mode="closeable"
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
/>
<!-- link 模式，在右侧显示链接箭头 --> <!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />
```
### 自定义样式
通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。
```html
<van-notice-bar <van-notice-bar
mode="link" color="#1989fa"
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" background="#ecf9ff"
left-icon="info-o"
text="技术是开发它的人的共同灵魂。"
/> />
``` ```
@ -91,29 +89,32 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- | | ---------- | ---------------------------------------- | --------- | ---------- |
| mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` | - | | mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` |
| delay | 动画延迟时间 (s) | _number_ | `1` | - | | text | 通知文本内容 | _string_ | `''` |
| speed | 滚动速率 (px/s) | _number_ | `50` | - | | color | 通知文本颜色 | _string_ | `#ed6a0c` |
| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` | - | | background | 滚动条背景 | _string_ | `#fffbe8` |
| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | | left-icon | 左侧[图标名称](#/icon)或图片链接 | _string_ | - |
| color | 文本颜色 | _string_ | `#ed6a0c` | - | | delay | 动画延迟时间 (s) | _number_ | `1` |
| backgroundColor | 滚动条背景 | _string_ | `#fffbe8` | - | | speed | 滚动速率 (px/s) | _number_ | `50` |
| open-type | 微信开放能力 | _string_ | `navigate` | - | | scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | `true` |
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
| open-type | 微信开放能力 | _string_ | `navigate` |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
| ---------- | ------------ | ---- | | ------ | ---------------- | -------------- |
| bind:click | 点击事件回调 | - | | click | 点击通知栏时触发 | _event: Event_ |
| close | 关闭通知栏时触发 | _event: Event_ |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
| ---------- | ------------------ | | ---------- | -------------- |
| left-icon | 自定义左侧固定内容 | | left-icon | 自定义左侧图标 |
| right-icon | 自定义右侧固定内容 | | right-icon | 自定义右侧图标 |
### 外部样式类 ### 外部样式类

21
packages/notice-bar/index.ts
View File

@ -1,9 +1,6 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp'; import { Weapp } from 'definitions/weapp';
const FONT_COLOR = '#ed6a0c';
const BG_COLOR = '#fffbe8';
VantComponent({ VantComponent({
props: { props: {
text: { text: {
@ -48,15 +45,10 @@ VantComponent({
type: String, type: String,
value: '', value: '',
}, },
color: { color: String,
type: String, backgroundColor: String,
value: FONT_COLOR, background: String,
}, wrapable: Boolean
backgroundColor: {
type: String,
value: BG_COLOR,
},
wrapable: Boolean,
}, },
data: { data: {
@ -134,11 +126,14 @@ VantComponent({
}, this.duration); }, this.duration);
}, },
onClickIcon() { onClickIcon(event) {
if (this.data.mode === 'closeable') {
this.timer && clearTimeout(this.timer); this.timer && clearTimeout(this.timer);
this.timer = null; this.timer = null;
this.setData({ show: false }); this.setData({ show: false });
this.$emit('close', event.detail);
}
}, },
onClick(event: Weapp.Event) { onClick(event: Weapp.Event) {

2
packages/notice-bar/index.wxml
View File

@ -3,7 +3,7 @@
<view <view
wx:if="{{ show }}" wx:if="{{ show }}"
class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}" class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
style="color: {{ color }}; background-color: {{ backgroundColor }};" style="color: {{ color }}; background-color: {{ backgroundColor }}; background: {{ background }}"
bind:tap="onClick" bind:tap="onClick"
> >
<van-icon <van-icon