🐛(component): notice-bar 组件切换页面后, NodeJS.Timeout 定时器不清除的问题
This commit is contained in:
parent
15c95a90f2
commit
c2c8416233
@ -62,7 +62,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, nextTick, ref } from "vue";
|
||||
import { onMounted, reactive, nextTick, ref, onUnmounted } from "vue";
|
||||
import LayCarousel from "../carousel/index.vue";
|
||||
import LayCarouselItem from "../carouselItem/index.vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
@ -109,26 +109,36 @@ const state = reactive({
|
||||
isMode: false,
|
||||
height: 40,
|
||||
});
|
||||
|
||||
var timer:any;
|
||||
|
||||
// 初始化 animation 各项参数
|
||||
const initAnimation = () => {
|
||||
nextTick(() => {
|
||||
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
||||
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
||||
computeAnimationTime();
|
||||
setTimeout(() => {
|
||||
timer = setTimeout(() => {
|
||||
changeAnimation();
|
||||
}, props.delay * 1000);
|
||||
});
|
||||
};
|
||||
|
||||
// 清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
})
|
||||
|
||||
// 计算 animation 滚动时长
|
||||
const computeAnimationTime = () => {
|
||||
state.oneTime = state.textOWidth / props.speed;
|
||||
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
||||
};
|
||||
|
||||
// 改变 animation 动画调用
|
||||
const changeAnimation = () => {
|
||||
if (state.order === 1) {
|
||||
//noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
|
||||
noticeBarTextRef.value.style.cssText = `animation: around1 ${state.oneTime}s linear; opactity: 1;`;
|
||||
state.order = 2;
|
||||
} else {
|
||||
@ -136,6 +146,7 @@ const changeAnimation = () => {
|
||||
state.order = 1;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听 animation 动画的结束
|
||||
const listenerAnimationend = () => {
|
||||
noticeBarTextRef.value.addEventListener(
|
||||
@ -146,6 +157,7 @@ const listenerAnimationend = () => {
|
||||
false
|
||||
);
|
||||
};
|
||||
|
||||
// 右侧 icon 图标点击
|
||||
const onRightIconClick = () => {
|
||||
if (!props.mode) return false;
|
||||
@ -156,6 +168,7 @@ const onRightIconClick = () => {
|
||||
emit("link");
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
if (props.scrollable) return false;
|
||||
|
@ -51,7 +51,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
|
||||
placeholder: "请选择",
|
||||
showEmpty: true,
|
||||
emptyMessage: "请选择",
|
||||
searchPlaceholder: "请输入",
|
||||
searchPlaceholder: "请搜索",
|
||||
collapseTagsTooltip: true,
|
||||
minCollapsedNum: 3,
|
||||
disabled: false,
|
||||
|
@ -31,6 +31,7 @@
|
||||
<li>[修复] select 组件多选模式下提示信息错误, 将 "请选择" 调整为 "请输入"。</li>
|
||||
<li>[修复] icon-picker 组件 show-search 属性开启时, 搜索不生效的问题。</li>
|
||||
<li>[修复] select 组件外部修改 modelValue 值时, option 不选中的问题。</li>
|
||||
<li>[修复] notice-bar 组件切换页面后, NodeJS.Timeout 定时器不清除的问题。</li>
|
||||
<li>[优化] page 组件 limit 逻辑, 切换 limit 后,如果页数大于当前页,保持当前页码不变,否则使用最大页码。</li>
|
||||
<li>[优化] input 组件 suffix 插槽与 allow-clear 启用时的显示顺序, clear > suffix。</li>
|
||||
<li>[优化] tag 组件 border background height 等, 使其更贴合 layui 的设计规范。</li>
|
||||
|
Loading…
Reference in New Issue
Block a user