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" />
```
### Disable scroll
### Scrollable
```html
<van-notice-bar :scrollable="false">
Notice Content
</van-notice-bar>
<!-- Enable scroll when text is short -->
<van-notice-bar scrollable text="Notice Content" />
<!-- Disable scroll when text is long -->
<van-notice-bar
:scrollable="false"
text="Technology is the common soul of the people who developed it."
/>
```
### Wrapable
@ -90,7 +95,7 @@ Vue.use(NoticeBar);
| left-icon | Left Icon | _string_ | - |
| delay | Animation delay (s) | _number \| string_ | `1` |
| 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` | - |
### Events

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

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

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

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

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

@ -14,7 +14,7 @@ export default createComponent({
background: String,
scrollable: {
type: Boolean,
default: true,
default: null,
},
delay: {
type: [Number, String],
@ -81,14 +81,14 @@ export default createComponent({
setTimeout(() => {
const { wrap, content } = this.$refs;
if (!wrap || !content) {
if (!wrap || !content || this.scrollable === false) {
return;
}
const wrapWidth = wrap.getBoundingClientRect().width;
const contentWidth = content.getBoundingClientRect().width;
if (this.scrollable && contentWidth > wrapWidth) {
if (this.scrollable || contentWidth > wrapWidth) {
doubleRaf(() => {
this.offset = -contentWidth;
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">
<!----></i>
<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 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;">足协杯战线连续第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 role="alert" class="van-notice-bar van-notice-bar--wrapable">
<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 role="alert" class="van-notice-bar">
<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">
<!----></i>
</div>
<div role="alert" class="van-notice-bar">
<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">
<!----></i>
</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">
<!----></i>
<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>

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

@ -2,7 +2,7 @@
exports[`icon slot 1`] = `
<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
</div>
</div>Custom Right Icon</div>
@ -11,7 +11,7 @@ exports[`icon slot 1`] = `
exports[`should not scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar">
<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>
`;
@ -19,7 +19,7 @@ exports[`should not 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="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>
`;