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

feat(NoticeBar): allow to force scrolling

Browse Source
This commit is contained in:
chenjiahan 2020-06-11 16:33:48 +08:00 committed by neverland
parent e49fe84afb
commit 7b0546dbba
6 changed files with 66 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/notice-bar/README.md
View File

@ -17,12 +17,17 @@ Vue.use(NoticeBar);
<van-notice-bar text="Notice Content" left-icon="volume-o" /> <van-notice-bar text="Notice Content" left-icon="volume-o" />
``` ```
### Disable scroll ### Scrollable
```html ```html
<van-notice-bar :scrollable="false"> <!-- Enable scroll when text is short -->
Notice Content <van-notice-bar scrollable text="Notice Content" />
</van-notice-bar>
<!-- Disable scroll when text is long -->
<van-notice-bar
:scrollable="false"
text="Technology is the common soul of the people who developed it."
/>
``` ```
### Wrapable ### Wrapable
@ -90,7 +95,7 @@ Vue.use(NoticeBar);
| left-icon | Left Icon | _string_ | - | | left-icon | Left Icon | _string_ | - |
| delay | Animation delay (s) | _number \| string_ | `1` | | delay | Animation delay (s) | _number \| string_ | `1` |
| speed | Scroll speed (px/s) | _number \| string_ | `50` | | speed | Scroll speed (px/s) | _number \| string_ | `50` |
| scrollable | Whether to scroll content | _boolean_ | `true` | | scrollable | Whether to scroll content | _boolean_ | - |
| wrapable | Whether to enable text wrap | _boolean_ | `false` | - | | wrapable | Whether to enable text wrap | _boolean_ | `false` | - |
### Events ### Events

42
src/notice-bar/README.zh-CN.md
View File

@ -13,43 +13,55 @@ Vue.use(NoticeBar);
### 基础用法 ### 基础用法
通过 `text` 属性设置通知栏的内容，通过 `left-icon` 属性设置通知栏左侧的图标。
```html ```html
<van-notice-bar text="通知内容" left-icon="volume-o" /> <van-notice-bar
left-icon="volume-o"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
``` ```
### 禁用滚动 ### 滚动播放
文字内容多于一行时，可通过 `scrollable` 参数控制是否开启滚动。 通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
```html ```html
<van-notice-bar :scrollable="false"> <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
通知内容 <van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
</van-notice-bar>
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
<van-notice-bar
:scrollable="false"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
``` ```
### 多行展示 ### 多行展示
禁用滚动时，可以设置 `wrapable` 来开启多行展示。 文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。
```html ```html
<van-notice-bar wrapable :scrollable="false"> <van-notice-bar
通知内容 wrapable
</van-notice-bar> :scrollable="false"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
``` ```
### 通知栏模式 ### 通知栏模式
默认模式为空，支持 `closeable` 和 `link` 两种模式。 通知栏支持 `closeable` 和 `link` 两种模式。
```html ```html
<!-- closeable 模式，在右侧显示关闭按钮 --> <!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable"> <van-notice-bar mode="closeable">
通知内容 技术是开发它的人的共同灵魂。
</van-notice-bar> </van-notice-bar>
<!-- link 模式，在右侧显示链接箭头 --> <!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar mode="link"> <van-notice-bar mode="link">
通知内容 技术是开发它的人的共同灵魂。
</van-notice-bar> </van-notice-bar>
``` ```
@ -59,7 +71,7 @@ Vue.use(NoticeBar);
```html ```html
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o"> <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
通知内容 技术是开发它的人的共同灵魂。
</van-notice-bar> </van-notice-bar>
``` ```
@ -102,7 +114,7 @@ Vue.use(NoticeBar);
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| delay | 动画延迟时间 (s) | _number \| string_ | `1` | | delay | 动画延迟时间 (s) | _number \| string_ | `1` |
| speed | 滚动速率 (px/s) | _number \| string_ | `50` | | speed | 滚动速率 (px/s) | _number \| string_ | `50` |
| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` | | scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - |
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` | | wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
### Events ### Events

23
src/notice-bar/demo/index.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-notice-bar :text="t('text')" left-icon="volume-o" /> <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
</demo-block> </demo-block>
<demo-block :title="t('unscrollable')"> <demo-block :title="t('scrollable')">
<van-notice-bar scrollable :text="t('shortText')" />
<van-notice-bar :scrollable="false" :text="t('text')" /> <van-notice-bar :scrollable="false" :text="t('text')" />
</demo-block> </demo-block>
@ -13,13 +14,13 @@
</demo-block> </demo-block>
<demo-block :title="t('mode')"> <demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="t('text')" /> <van-notice-bar mode="closeable" :text="t('shortText')" />
<van-notice-bar mode="link" :text="t('text')" /> <van-notice-bar mode="link" :text="t('shortText')" />
</demo-block> </demo-block>
<demo-block :title="t('customStyle')"> <demo-block :title="t('customStyle')">
<van-notice-bar <van-notice-bar
:text="t('text')" :text="t('shortText')"
color="#1989fa" color="#1989fa"
background="#ecf9ff" background="#ecf9ff"
left-icon="info-o" left-icon="info-o"
@ -47,23 +48,23 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
text: text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
'足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
mode: '通知栏模式', mode: '通知栏模式',
content: '内容', content: '内容',
wrapable: '多行展示', wrapable: '多行展示',
unscrollable: '禁用滚动', shortText: '技术是开发它的人的共同灵魂。',
scrollable: '滚动播放',
customStyle: '自定义样式', customStyle: '自定义样式',
verticalScroll: '垂直滚动', verticalScroll: '垂直滚动',
}, },
'en-US': { 'en-US': {
text: text: 'Technology is the common soul of the people who developed it.',
'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
mode: 'Mode', mode: 'Mode',
content: 'Content', content: 'Content',
wrapable: 'Wrapable', wrapable: 'Wrapable',
shortText: 'Some short text.',
customStyle: 'Custom Style', customStyle: 'Custom Style',
unscrollable: 'Disable scroll', scrollable: 'Scrollable',
verticalScroll: 'Vertical Scroll', verticalScroll: 'Vertical Scroll',
}, },
}, },

6
src/notice-bar/index.js
View File

@ -14,7 +14,7 @@ export default createComponent({
background: String, background: String,
scrollable: { scrollable: {
type: Boolean, type: Boolean,
default: true, default: null,
}, },
delay: { delay: {
type: [Number, String], type: [Number, String],
@ -81,14 +81,14 @@ export default createComponent({
setTimeout(() => { setTimeout(() => {
const { wrap, content } = this.$refs; const { wrap, content } = this.$refs;
if (!wrap || !content) { if (!wrap || !content || this.scrollable === false) {
return; return;
} }
const wrapWidth = wrap.getBoundingClientRect().width; const wrapWidth = wrap.getBoundingClientRect().width;
const contentWidth = content.getBoundingClientRect().width; const contentWidth = content.getBoundingClientRect().width;
if (this.scrollable && contentWidth > wrapWidth) { if (this.scrollable || contentWidth > wrapWidth) {
doubleRaf(() => { doubleRaf(() => {
this.offset = -contentWidth; this.offset = -contentWidth;
this.duration = contentWidth / this.speed; this.duration = contentWidth / this.speed;

17
src/notice-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -6,34 +6,39 @@ exports[`renders demo correctly 1`] = `
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon"> <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
<!----></i> <!----></i>
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div role="alert" class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
</div>
</div>
<div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div role="alert" class="van-notice-bar van-notice-bar--wrapable"> <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div role="alert" class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
</div><i class="van-icon van-icon-cross van-notice-bar__right-icon"> </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
<!----></i> <!----></i>
</div> </div>
<div role="alert" class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
</div><i class="van-icon van-icon-arrow van-notice-bar__right-icon"> </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
<!----></i> <!----></i>
</div> </div>
@ -42,7 +47,7 @@ exports[`renders demo correctly 1`] = `
<div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon"> <div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
<!----></i> <!----></i>
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
</div> </div>
</div> </div>
</div> </div>

6
src/notice-bar/test/__snapshots__/index.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`icon slot 1`] = ` exports[`icon slot 1`] = `
<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap"> <div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;"> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
Content Content
</div> </div>
</div>Custom Right Icon</div> </div>Custom Right Icon</div>
@ -11,7 +11,7 @@ exports[`icon slot 1`] = `
exports[`should not scroll when content width > wrap width 1`] = ` exports[`should not scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">foo</div>
</div> </div>
</div> </div>
`; `;
@ -19,7 +19,7 @@ exports[`should not scroll when content width > wrap width 1`] = `
exports[`should scroll when content width > wrap width 1`] = ` exports[`should scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap"> <div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div> <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
</div> </div>
</div> </div>
`; `;