vue2 、 vue3 文本超出自动滚动

原创已于 2022-07-20 15:40:21 修改 · 5.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3 #vue

于 2022-07-19 15:07:31 首次发布

本文分享了一段Vue2和Vue3代码实现文本超出屏幕宽度时自动滚动的效果。通过设置CSS样式和JavaScript监听元素尺寸变化，当内容宽度大于容器宽度时启动滚动动画。代码可以直接复制使用。

vue2、vue3 实现文本超出自动滚动

一、直接上代码

<template>
    <div class="sizeScroll">
        <h1>1、文字滚动·超出时自动滚动</h1>
        <div class="content" ref="songName1">
            <div id="inner" :class="{innerActive: nameScroll }">
                <span ref="first" id="first">本店主营拉面,刀削面,烩面,盖浇饭</span>
                <span id="second">本店主营拉面,刀削面,烩面,盖浇饭</span>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance  } from 'vue'
export default {
		/** vue2写法 */
    // data() {
    //     return {
    //         nameScroll: false
    //     }
    // },
    // mounted() {
    //     console.log(this.$refs.songName1.clientWidth,'his.$refs.songName1.clientWidth');
    //     if (this.$refs.songName1.clientWidth > this.$refs.first.clientWidth) {
    //         this.nameScroll = true
    //     } else {
    //         this.nameScroll = false
    //     }
    // }
    /** vue3写法 */
    setup() {
        const internalInstance  = getCurrentInstance()
        let nameScroll = ref(false)
        onMounted(() => {
            console.log(internalInstance.ctx.$refs.songName1.clientWidth, internalInstance.ctx.$refs.first.clientWidth, 'songName1.clientWidth');
            if (internalInstance.ctx.$refs.songName1.clientWidth < internalInstance.ctx.$refs.first.clientWidth) {
                nameScroll.value = true
            } else {
                nameScroll.value = false
            }

        })
        return { nameScroll }
    }
}
</script>

<style lang="scss" scoped>
h1{ font-weight: bold; }
.sizeScroll{
    padding: 36px;
    .content {
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 50px;
        margin: 16px 10%;
        white-space: nowrap;
        border: 1px solid #808080;
    }
    #inner {
        position: absolute;
    }
    .innerActive{
        animation: slide 5s linear infinite;
        #first{
            margin-right: 8px;
        }
        #second{
            display: inline-block;
        }
    }

    #first{
        display: inline-block;
        border: 1px solid red;
    }

    #second{
        display: none;
        border: 1px solid green;
    }

    @keyframes slide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-51%);
        }
    }
}
</style>