mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] NoticeBar: add wrapable prop (#2992)
This commit is contained in:
neverland
GitHub
parent
7b0a3319ba
commit
7b919ce890
@ -7,14 +7,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<demo-block :title="$t('mode')">
|
||||
<van-notice-bar
|
||||
mode="closeable"
|
||||
:text="$t('text')"
|
||||
@ -24,6 +17,21 @@
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('unscrollable')">
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('wrapable')">
|
||||
<van-notice-bar
|
||||
wrapable
|
||||
:scrollable="false"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -31,13 +39,15 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '禁用滚动',
|
||||
title3: '通告栏模式',
|
||||
unscrollable: '禁用滚动',
|
||||
mode: '通告栏模式',
|
||||
wrapable: '文本换行',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Disable scroll',
|
||||
title3: 'Mode',
|
||||
mode: 'Mode',
|
||||
wrapable: 'Wrapable',
|
||||
unscrollable: 'Disable scroll',
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,14 +18,6 @@ Vue.use(NoticeBar);
|
||||
/>
|
||||
```
|
||||
|
||||
#### Disable scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Mode
|
||||
|
||||
```html
|
||||
@ -38,6 +30,22 @@ Vue.use(NoticeBar);
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Disable scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Wrapable
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
@ -46,6 +54,7 @@ Vue.use(NoticeBar);
|
||||
| delay | Animation delay (s) | `Number` | `1` |
|
||||
| speed | Scroll speed (px/s) | `Number` | `50` |
|
||||
| scrollable | Whether to scroll content | `Boolean` | `true` |
|
||||
| wrapable | Whether to enable text wrap | `Boolean` | `false` | - |
|
||||
| left-icon | Left Icon | `String` | - |
|
||||
| color | Text color | `String` | `#f60` |
|
||||
| background | Background color | `String` | `#fff7cc` |
|
||||
|
||||
@ -9,6 +9,7 @@ export default sfc({
|
||||
mode: String,
|
||||
color: String,
|
||||
leftIcon: String,
|
||||
wrapable: Boolean,
|
||||
background: String,
|
||||
delay: {
|
||||
type: [String, Number],
|
||||
@ -94,17 +95,23 @@ export default sfc({
|
||||
return (
|
||||
<div
|
||||
vShow={this.showNoticeBar}
|
||||
class={bem({ withicon: mode })}
|
||||
class={bem({ withicon: mode, wrapable: this.wrapable })}
|
||||
style={barStyle}
|
||||
onClick={() => {
|
||||
this.$emit('click');
|
||||
}}
|
||||
>
|
||||
{this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />}
|
||||
{this.leftIcon && (
|
||||
<Icon class={bem('left-icon')} name={this.leftIcon} />
|
||||
)}
|
||||
<div ref="wrap" class={bem('wrap')}>
|
||||
<div
|
||||
ref="content"
|
||||
class={[bem('content'), this.animationClass, { 'van-ellipsis': !this.scrollable }]}
|
||||
class={[
|
||||
bem('content'),
|
||||
this.animationClass,
|
||||
{ 'van-ellipsis': !this.scrollable && !this.wrapable }
|
||||
]}
|
||||
style={contentStyle}
|
||||
onAnimationend={this.onAnimationEnd}
|
||||
onWebkitAnimationEnd={this.onAnimationEnd}
|
||||
@ -112,7 +119,13 @@ export default sfc({
|
||||
{this.slots() || this.text}
|
||||
</div>
|
||||
</div>
|
||||
{iconName && <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />}
|
||||
{iconName && (
|
||||
<Icon
|
||||
class={bem('right-icon')}
|
||||
name={iconName}
|
||||
onClick={this.onClickIcon}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,14 +11,9 @@
|
||||
color: @orange-dark;
|
||||
background-color: @orange-light;
|
||||
|
||||
&--withicon {
|
||||
position: relative;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
font-size: 16px;
|
||||
min-width: 20px;
|
||||
min-width: 22px;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
@ -47,10 +42,31 @@
|
||||
|
||||
&__play {
|
||||
animation: van-notice-bar-play linear both;
|
||||
|
||||
&--infinite {
|
||||
animation: van-notice-bar-play-infinite linear infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
&__play--infinite {
|
||||
animation: van-notice-bar-play-infinite linear infinite both;
|
||||
&--wrapable {
|
||||
height: auto;
|
||||
padding: 8px 15px;
|
||||
|
||||
.van-notice-bar {
|
||||
&__wrap {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--withicon {
|
||||
position: relative;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,13 +10,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar van-notice-bar--withicon">
|
||||
<div class="van-notice-bar__wrap">
|
||||
@ -31,5 +24,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -18,16 +18,8 @@ Vue.use(NoticeBar);
|
||||
/>
|
||||
```
|
||||
|
||||
#### 禁用滚动
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 通告栏模式
|
||||
|
||||
默认模式为空，支持`closeable`和`link`。
|
||||
|
||||
```html
|
||||
@ -42,6 +34,26 @@ Vue.use(NoticeBar);
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 禁用滚动
|
||||
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 文本换行
|
||||
|
||||
禁用滚动时，可以设置`wrapable`来开启文本换行
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
@ -50,6 +62,7 @@ Vue.use(NoticeBar);
|
||||
| delay | 动画延迟时间 (s) | `Number` | `1` | - |
|
||||
| speed | 滚动速率 (px/s) | `Number` | `50` | - |
|
||||
| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | - |
|
||||
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | `Boolean` | `false` | 1.6.11 |
|
||||
| left-icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
|
||||
| color | 文本颜色 | `String` | `#f60` | - |
|
||||
| background | 滚动条背景 | `String` | `#fff7cc` | - |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user