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

types(NoticeBar): use tsx (#8105)

Browse Source
This commit is contained in:
neverland 2021-02-09 16:25:31 +08:00 committed by GitHub
parent 71e6cce239
commit 8c58097121
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/notice-bar/index.js → src/notice-bar/index.tsx
View File

@ -1,4 +1,4 @@
import { ref, watch, reactive } from 'vue'; import { ref, watch, reactive, PropType } from 'vue';
import { isDef, createNamespace } from '../utils'; import { isDef, createNamespace } from '../utils';
// Composition // Composition
@ -13,12 +13,14 @@ import {
// Components // Components
import Icon from '../icon'; import Icon from '../icon';
export type NoticeBarMode = 'closeable' | 'link';
const [createComponent, bem] = createNamespace('notice-bar'); const [createComponent, bem] = createNamespace('notice-bar');
export default createComponent({ export default createComponent({
props: { props: {
text: String, text: String,
mode: String, mode: String as PropType<NoticeBarMode>,
color: String, color: String,
leftIcon: String, leftIcon: String,
wrapable: Boolean, wrapable: Boolean,
@ -42,7 +44,7 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
let wrapWidth = 0; let wrapWidth = 0;
let contentWidth = 0; let contentWidth = 0;
let startTimer; let startTimer: NodeJS.Timeout;
const wrapRef = ref(); const wrapRef = ref();
const contentRef = ref(); const contentRef = ref();
@ -71,7 +73,7 @@ export default createComponent({
} }
}; };
const onClickRightIcon = (event) => { const onClickRightIcon = (event: MouseEvent) => {
if (props.mode === 'closeable') { if (props.mode === 'closeable') {
state.show = false; state.show = false;
emit('close', event); emit('close', event);
@ -105,7 +107,7 @@ export default createComponent({
// use double raf to ensure animation can start // use double raf to ensure animation can start
doubleRaf(() => { doubleRaf(() => {
state.offset = -contentWidth; state.offset = -contentWidth;
state.duration = (contentWidth + wrapWidth) / props.speed; state.duration = (contentWidth + wrapWidth) / +props.speed;
emit('replay'); emit('replay');
}); });
}); });
@ -141,7 +143,7 @@ export default createComponent({
const start = () => { const start = () => {
const { delay, speed, scrollable } = props; const { delay, speed, scrollable } = props;
const ms = isDef(delay) ? delay * 1000 : 0; const ms = isDef(delay) ? +delay * 1000 : 0;
reset(); reset();
@ -159,7 +161,7 @@ export default createComponent({
wrapWidth = wrapRefWidth; wrapWidth = wrapRefWidth;
contentWidth = contentRefWidth; contentWidth = contentRefWidth;
state.offset = -contentWidth; state.offset = -contentWidth;
state.duration = contentWidth / speed; state.duration = contentWidth / +speed;
}); });
} }
}, ms); }, ms);