vue

#vue| 来源: 网络整理| 查看: 265

1、新建一个名为marquee.vue的文件，代码如下

{{text}} {{text}} export default { data () { return { needToScroll: false, text: '' } }, mounted () { this.startCheck() }, beforeDestroy () { this.stopCheck() }, methods: { // 检查当前元素是否需要滚动 check () { this.setText() this.$nextTick(() => { let flag = this.isOverflow() this.needToScroll = flag }) }, // 判断子元素宽度是否大于父元素宽度，超出则需要滚动，否则不滚动 isOverflow () { let outer = this.$refs.outer let inner = this.$refs.inner let outerWidth = this.getWidth(outer) let innerWidth = this.getWidth(inner) return innerWidth > outerWidth }, // 获取元素宽度 getWidth (el) { let { width } = el.getBoundingClientRect() return width }, // 获取到父组件传过来的内容复传给this.text setText () { this.text = (this.$slots.default && this.$slots.default.reduce((res, it) => res + it.text, '')) || '' }, // 增加定时器，隔一秒check一次 startCheck () { this._checkTimer = setInterval(this.check, 1000) this.check() }, // 关闭定时器 stopCheck () { clearInterval(this._checkTimer) } } } .scrollText { overflow: hidden; white-space: nowrap; } .st-inner { display: inline-block; } .st-scrolling .st-section { padding: 0 30px; } /* 向左匀速滚动动画 */ .st-scrolling { animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }

2、在你需要用到它的地方引入:

我是一个跑马灯跑马灯跑马灯跑马灯跑马灯....... import marquee from './marquee.vue' export default { components: { marquee }, } //这里设置的宽度就是文字长度超过30px后就自动滚动 .scroll_box { width: 30px; }

【本文地址】

公司简介

联系我们