前言

在此之前，你需要去npm官网注册一个属于自己的账号，记住自己的账户名以及密码、邮箱，后面会用的到。
第一步，安装webpack简易框架

vue init webpack-simple marquee

这里会用到vue init 命令，如果你的cli版本是3或者以上，那么在此之前你需要安装vue/cli-init

npm install -g @vue/cli-init

vue init 的运行效果将会跟 vue-cli@2.x 相同

第二步，封装Vue插件
1、安装完成后，会出现以下目录即可成功

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

2、接下来，我们在src文件夹下创建一个名叫marquee的文件夹，在文件夹里面创建marquee.vue和index.js

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│ ├── App.vue
│ ├── marquee
│ │ └── marquee.vue
│ │ └── index.js
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

3、开始在marquee.vue封装Vue插件了

<template>
<div class="marquee-wrap">
<!-- 滚动内容 -->
<div class="scroll">
<p class="marquee">{{text}}</p>
<!-- 文字副本 -->
<p class="copy"></p>
</div>
<!-- 为了计算总文本宽度，通过css在页面中隐藏 -->
<p class="getWidth">{{text}}</p>
</div>
</template>

<script>
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = setTimeout(() => {
this.move()
clearTimeout(timer)
}, 1000)
},
// 把父组件传入的arr转化成字符串
mounted () {
for (let item of this.val) {
this.text += ' ' + item
}
},
methods: {
move () {
let maxWidth = document.querySelector('.marquee-wrap').clientWidth
// 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
let width = document.querySelector('.getWidth').scrollWidth
// 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动
if (width <= maxWidth) return
let scroll = document.querySelector('.scroll')
let copy = document.querySelector('.copy')
copy.innerText = this.text // 文字副本填充
let distance = 0 // 位移距离
// 设置位移
this.timer = setInterval(() => {
distance -= 1
// 如果位移超过文字宽度，则回到起点
if (-distance >= width) {
distance = 16 // 距离必须与marquee的margin宽度相同
}
scroll.style.transform = 'translateX(' + distance + 'px)'
}, 20)
}
},
beforeDestroy () {
// 清除计时器
clearInterval(this.timer)
}
}
</script>

<style scoped>
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 Light";
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>

4、为了方便查看效果，可以在App.vue先引入组件查看效果

<template>
<div id="app">
<Marquee :val="msg"></Marquee>
</div>
</template>

<script>
import Marquee from '../src/marquee/marquee.vue';
export default {
name: 'app',
data () {
return {
msg: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
}
},
components:{
Marquee
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>

5、启动命令，查看效果

npm install
npm run dev

第三步，发布Vue插件前配置
1、编辑marquee文件夹下的index.js

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│ ├── App.vue
│ ├── marquee
│ │ └── marquee.vue
│ │ └── index.js
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

index.js

// index.js

// 引入组件
import marquee from './marquee';
// 组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
marquee.install = Vue => Vue.component(marquee.name, marquee); //注册组件

export default marquee;

。。。。。。。。。。。。。

作者：Vam的金豆之路

篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/50858.html