基于Vue的文字跑馬燈組件(npm 組件包)

2019-11-19 16:30:06

字體：大中小

來源：轉載

供稿：網友

一、前言

總結下最近工作上在移動端實現的一個跑馬燈效果，最終效果如下：

印象中好像HTML標簽的‘marquee'的直接可以實現這個效果，不過 HTML標準中已經廢棄了‘
既然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-hocd vue-marquee-hocnpm install // 安裝依賴包npm run dev // 啟動服務

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" },

因為這個組件包是能公用的，所以"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

可以看到我的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 },

至此配置差不多修改好了。接下來我們看看實現關鍵功能的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%);}}

即可完美實現跑馬燈效果。

具體代碼：

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

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>

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); } 100% { transform: translateX(-50%);} }</style>

我們知道 webpack.base.conf.js 中入口文件默認指定為：

entry: { app: './src/main.js' },

所以，我們只需要將main.js引入Marquee.vue組件就可以。有兩種方式引入：

import VueMarquee from './Marquee.vue'export default VueMarquee;// var VueMarquee = require('./Marquee.vue');// module.exports = VueMarquee

注意import 和module.exports不要一起用，github看到其他人提交的組件是這兩個一起用的，這樣在windows下會報錯，好像mac不會有問題。

3.4 打包生成dist/vue-marquee.min.js

通過npm run build 即可看到目錄下生成了dist文件，dist文件里有四個文件，分別是：

vue-marquee.min.jsvue-marquee.min.js.mapvue-marquee.min.cssvue-marquee.min.css.map

我們知道有一個這樣的文件.gitignore，里面包含npm install時，不會安裝的東西，因為這里要用到dist文件，于是我把.gitignore 里的dist/去掉了。

.DS_Storenode_modules/npm-debug.log*yarn-debug.log*yarn-error.log*

打包好了后，通過npm publish 提交到npm上

需要多次提交時注意修改package.json中的"version": "1.2.1", 我這里已經提交了21次了（捂臉哭(┬＿┬)）

四、使用組件

通過npm install vue-marquee-ho -s 安裝到相應的項目下，安裝成功如下圖所示：

到項目中的node_modules/目錄下將可以看到：

需要用到該組件時可以這樣引入（注意引入樣式）

import VueMarquee from 'vue-marquee-ho';import Css from 'vue-marquee-ho/dist/vue-marquee.min.css'export default { name: 'app', components:{  "vue-marquee": VueMarquee },}

看一個demo:

<template> <div id="app"> <div class="marquee-wrap" style="width: 100px;"><vue-marquee content="33333" class="two" :showtwo="false"></vue-marquee></div> <div class="marquee-wrap" style="width: 100px;"><vue-marquee content="22222" class="two" :showtwo="false"></vue-marquee></div> <div class="marquee-wrap" style="width: 100px;"><vue-marquee content="1" class="two" :showtwo="false"></vue-marquee></div> <router-view></router-view> </div></template><script>import VueMarquee from 'vue-marquee-ho';import Css from 'vue-marquee-ho/dist/vue-marquee.min.css'export default { name: 'app', components:{  "vue-marquee": VueMarquee },}</script>

效果：