🐛(component): notice-bar 组件切换页面后, NodeJS.Timeout 定时器不清除的问题

This commit is contained in:
就眠儀式 2022-09-28 14:57:02 +08:00
parent 15c95a90f2
commit c2c8416233
3 changed files with 18 additions and 4 deletions

View File

@ -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;

View File

@ -51,7 +51,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
placeholder: "请选择",
showEmpty: true,
emptyMessage: "请选择",
searchPlaceholder: "请输入",
searchPlaceholder: "请搜索",
collapseTagsTooltip: true,
minCollapsedNum: 3,
disabled: false,

View File

@ -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>