mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] NoticeBar: jsx (#2554)
This commit is contained in:
neverland
GitHub
parent
b38b3575a2
commit
5d17b5e643
116
packages/notice-bar/index.js
Normal file
116
packages/notice-bar/index.js
Normal file
@ -0,0 +1,116 @@
|
||||
import { use } from '../utils';
|
||||
import Icon from '../icon';
|
||||
|
||||
const [sfc, bem] = use('notice-bar');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
text: String,
|
||||
mode: String,
|
||||
color: String,
|
||||
leftIcon: String,
|
||||
background: String,
|
||||
delay: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
duration: 0,
|
||||
offsetWidth: 0,
|
||||
showNoticeBar: true,
|
||||
animationClass: ''
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
text: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
const { wrap, content } = this.$refs;
|
||||
if (!wrap || !content) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapWidth = wrap.getBoundingClientRect().width;
|
||||
const offsetWidth = content.getBoundingClientRect().width;
|
||||
if (this.scrollable && offsetWidth > wrapWidth) {
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.offsetWidth = offsetWidth;
|
||||
this.duration = offsetWidth / this.speed;
|
||||
this.animationClass = bem('play');
|
||||
}
|
||||
});
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
this.showNoticeBar = this.mode !== 'closeable';
|
||||
},
|
||||
|
||||
onAnimationEnd() {
|
||||
this.firstRound = false;
|
||||
this.$nextTick(() => {
|
||||
this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
|
||||
this.animationClass = bem('play--infinite');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { mode } = this;
|
||||
|
||||
const iconName = mode === 'closeable' ? 'cross' : mode === 'link' ? 'arrow' : '';
|
||||
|
||||
const barStyle = {
|
||||
color: this.color,
|
||||
background: this.background
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
|
||||
animationDelay: (this.firstRound ? this.delay : 0) + 's',
|
||||
animationDuration: this.duration + 's'
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
v-show={this.showNoticeBar}
|
||||
class={bem({ withicon: mode })}
|
||||
style={barStyle}
|
||||
onClick={() => {
|
||||
this.$emit('click');
|
||||
}}
|
||||
>
|
||||
{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 }]}
|
||||
style={contentStyle}
|
||||
onAnimationend={this.onAnimationEnd}
|
||||
onWebkitAnimationEnd={this.onAnimationEnd}
|
||||
>
|
||||
{this.$slots.default || this.text}
|
||||
</div>
|
||||
</div>
|
||||
{iconName && <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="showNoticeBar"
|
||||
:class="b({ withicon: mode })"
|
||||
:style="barStyle"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<icon
|
||||
v-if="leftIcon"
|
||||
:class="b('left-icon')"
|
||||
:name="leftIcon"
|
||||
/>
|
||||
<div
|
||||
ref="wrap"
|
||||
:class="b('wrap')"
|
||||
>
|
||||
<div
|
||||
ref="content"
|
||||
:class="[b('content'), animationClass, { 'van-ellipsis': !scrollable }]"
|
||||
:style="contentStyle"
|
||||
@animationend="onAnimationEnd"
|
||||
@webkitAnimationEnd="onAnimationEnd"
|
||||
>
|
||||
<slot>{{ text }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
<icon
|
||||
v-if="iconName"
|
||||
:class="b('right-icon')"
|
||||
:name="iconName"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'notice-bar',
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
mode: String,
|
||||
color: String,
|
||||
leftIcon: String,
|
||||
background: String,
|
||||
delay: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
duration: 0,
|
||||
offsetWidth: 0,
|
||||
showNoticeBar: true,
|
||||
animationClass: ''
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconName() {
|
||||
return this.mode === 'closeable' ? 'cross' : this.mode === 'link' ? 'arrow' : '';
|
||||
},
|
||||
|
||||
barStyle() {
|
||||
return {
|
||||
color: this.color,
|
||||
background: this.background
|
||||
};
|
||||
},
|
||||
|
||||
contentStyle() {
|
||||
return {
|
||||
paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
|
||||
animationDelay: (this.firstRound ? this.delay : 0) + 's',
|
||||
animationDuration: this.duration + 's'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
text: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
const { wrap, content } = this.$refs;
|
||||
if (!wrap || !content) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapWidth = wrap.getBoundingClientRect().width;
|
||||
const offsetWidth = content.getBoundingClientRect().width;
|
||||
if (this.scrollable && offsetWidth > wrapWidth) {
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.offsetWidth = offsetWidth;
|
||||
this.duration = offsetWidth / this.speed;
|
||||
this.animationClass = this.b('play');
|
||||
}
|
||||
});
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
this.showNoticeBar = this.mode !== 'closeable';
|
||||
},
|
||||
|
||||
onAnimationEnd() {
|
||||
this.firstRound = false;
|
||||
this.$nextTick(() => {
|
||||
this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
|
||||
this.animationClass = this.b('play--infinite');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -8,28 +8,23 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<div class="van-notice-bar" style="color:undefined;background:undefined;">
|
||||
<!---->
|
||||
<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" style="color:undefined;background:undefined;">
|
||||
<!---->
|
||||
<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><i class="van-icon van-icon-cross van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-notice-bar van-notice-bar--withicon" style="color:undefined;background:undefined;">
|
||||
<!---->
|
||||
<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><i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
|
||||
|
||||
@ -4,11 +4,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-notice-bar" style="color:undefined;background:undefined;">
|
||||
<!---->
|
||||
<div class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">建议在手机模式下浏览本示例</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-swipe-cell">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user