一、前言
总结下最近工作上在移动端实现的一个跑马灯效果，最终效果如下：
印象中好像HTML标签的‘marquee'的直接可以实现这个效果，不过 HTML标准中已经废弃了‘marquee'标签
既然HTML标准已经废弃了这个标签，现在工作上用的是Vue，所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包，这样别人可以通过npm install ...就可以用，想想还有点激动，于是开始我的第一个npm组件之旅！
二、用npm发布一个包
有点惭愧，之前通过npm install ...安装package包时，我是不知道package包存在哪里，在github上？折腾一番才知道是在npm上发布的。
2.1 npm发布包流程
进入官网，注册帐号
进入已经写好的组件, 登录npm帐号
执行npm publish，最先遇到问题好像是这个
这里注意的是因为国内网络问题，许多小伙伴把npm的镜像代理到淘宝或者别的地方了，这里要设置回原来的镜像。npm config set registry=http://registry.npmjs.org
后面又遇到
这里我还特意查了下ENEEDAUTH错误，可是却没看后面的提示：You need to authorize this machine using 'npm adduser'
所以这里需要npm adduser
(发布的包的名字也要注意，有可能会有重名问题，像我这个组件包本来取名为vue-marquee，后面在npm上搜到已经有这个包了，不过他做的是垂直方向的跑马灯。所以我把这个为了区分这个组件包是水平方向的，改名为vue-marquee-ho)
三、基于Vue的文字跑马灯组件
大致了解怎么发组件包以后，我们再来看看需要发布出去的组件包怎么写的。
3.1初始化组件
这里我还是用到vue-cli，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来，初始化该组件
vue init webpack vue-marquee-ho cd vue-marquee-ho cnpm install // 安装依赖包 npm run dev // 启动服务</div>
3.2修改配置文件
首先看package.json
"name": "vue-marquee-ho",
"version": "1.2.1",
"description": "A Vue component to marquee",
"author": "wangjuan",
"private": false,
"license": "MIT",
"main": "dist/vue-marquee.min.js",
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"test": "node build/test.js"
},
"dependencies": {
"vue": "^2.2.6"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wj704/vue-marquee-ho.git"
},
</div>
因为这个组件包是能公用的，所以"private": false,
然后 "main": "dist/vue-marquee.min.js", 这里的配置意思是，别人用这个包 import VueMarquee from 'vue-marquee-ho'; 时，引入的文件。
可以看出，这个vue-marquee-ho最终需要打包出一个js文件，所以我们需要webpack.prod.config.js文件
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
// output: {
// path: config.build.assetsRoot,
// filename: utils.assetsPath('js/[name].[chunkhash].js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
// },
output: {
path: config.bundle.assetsRoot,
publicPath: config.bundle.assetsPublicPath,
filename: 'vue-marquee.min.js',
library: 'VueMarquee',
libraryTarget: 'umd'
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
// filename: utils.assetsPath('css/[name].[contenthash].css')
filename: 'vue-marquee.min.css'
}),
new OptimizeCSSPlugin()
]
})
module.exports = webpackConfig
</div>
可以看到我的output输出配置改了下，然后有很多webpack.prod.config.js之前不需要的代码去掉了，再看下对应的config配置，文件是config/index.js
bundle: {
env: require('./prod.env'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsPublicPath: '/',
assetsSubDirectory: '/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
</div>
至此配置差不多修改好了。接下来我们看看实现关键功能的Marquee组件
3.3 Marquee组件
思路：标签里的文字所占的宽度超过外面的div宽度时，增加一个内容相同的标签。这里span标签设置为display: inline-block;，可以计算其宽度，把span标签外面的父元素设置为font-size: 0;display: inline-block;，父级元素的宽度即为两者宽度之和，也就是一个span标签宽度的两倍，然后将其父级元素通过CSS3动画设置：
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%);}
}
</div>
即可完美实现跑马灯效果。
具体代码：
<template>
<div class="marquee-box">
<div class="marquee-content" ref="out">
<p :class="run?speed:''">
<span class="text1" ref="in" >{{content}}</span>
<span class="text2" v-if="showtwo||run">{{content}}</span>
</p>
</div>
</div>
</template>
</div>
js:
<script>
export default {
name: 'VueMarquee',
data (){
return{
run: false,
pWidth: '',
}
},
props: {
content: {
default: "暂无内容",
type: String
},
speed: {
default: 'middle',
type: String
},
showtwo: {
default: true
}
},
mounted (){
// let out = document.getElementById(this.pid.out).clientWidth;
// let _in = document.getElementById(this.pid.in).clientWidth;
var _this = this;
this.$nextTick(()=>{
let out = _this.$refs.out.clientWidth;
let _in = _this.$refs.in.clientWidth;
_this.run=_in>out?true:false;
});
}
}
</script>
</div>
css:
<style>
.marquee-box {
height: 50px;
line-height: 50px;
color: #000;
font-size: 24px;
background-size: 24px 24px;
}
.marquee-content{
overflow: hidden;
width:100%
}
.marquee-content p{
display: inline-block;
white-space: nowrap;
margin: 0;
font-size: 0;
}
.marquee-content span{
display: inline-block;
white-space: nowrap;
padding-right: 40px;
font-size: 24px;
}
.quick{
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
}
.middle{
-webkit-animation: marquee 8s linear infinite;
animation: marquee 8s linear infinite;
}
.slow{
-webkit-animation: marquee 25s linear infinite;
animation: marquee 25s linear infinite;
}
@-webkit-keyframes marquee {
0% { -webkit-transform: translate3d(0,0,0); }
100% { -webkit-transform: translate3d(-50%,0,0); }
}
@keyframes marquee {
0% { transform: translateX(0);