基于Vue的文字跑馬燈組件(npm 組件包)
一、前言
總結(jié)下最近工作上在移動端實(shí)現(xiàn)的一個(gè)跑馬燈效果，最終效果如下：
印象中好像HTML標(biāo)簽的‘marquee'的直接可以實(shí)現(xiàn)這個(gè)效果，不過 HTML標(biāo)準(zhǔn)中已經(jīng)廢棄了‘
既然HTML標(biāo)準(zhǔn)已經(jīng)廢棄了這個(gè)標(biāo)簽，現(xiàn)在工作上用的是Vue，所以想著能不能自己也發(fā)布一個(gè)基于Vue的文字跑馬燈組件包，這樣別人可以通過npm install ...就可以用，想想還有點(diǎn)激動，于是開始我的第一個(gè)npm組件之旅！
二、用npm發(fā)布一個(gè)包
有點(diǎn)慚愧，之前通過npm install ...安裝package包時(shí)，我是不知道package包存在哪里，在github上？折騰一番才知道是在npm上發(fā)布的。
2.1 npm發(fā)布包流程
進(jìn)入官網(wǎng)，注冊帳號
進(jìn)入已經(jīng)寫好的組件, 登錄npm帳號
執(zhí)行npm publish，最先遇到問題好像是這個(gè)
這里注意的是因?yàn)閲鴥?nèi)網(wǎng)絡(luò)問題，許多小伙伴把npm的鏡像代理到淘寶或者別的地方了，這里要設(shè)置回原來的鏡像。npm config set registry=http://registry.npmjs.org
后面又遇到
這里我還特意查了下ENEEDAUTH錯(cuò)誤，可是卻沒看后面的提示：You need to authorize this machine using 'npm adduser'
所以這里需要npm adduser
(發(fā)布的包的名字也要注意，有可能會有重名問題，像我這個(gè)組件包本來取名為vue-marquee，后面在npm上搜到已經(jīng)有這個(gè)包了，不過他做的是垂直方向的跑馬燈。所以我把這個(gè)為了區(qū)分這個(gè)組件包是水平方向的，改名為vue-marquee-ho)
三、基于Vue的文字跑馬燈組件
大致了解怎么發(fā)組件包以后，我們再來看看需要發(fā)布出去的組件包怎么寫的。
3.1初始化組件
這里我還是用到vue-cli，雖然有很多東西不需要，因?yàn)閷@個(gè)比較熟悉，所以還是按照這個(gè)步驟來，初始化該組件
vue init webpack vue-marquee-ho cd vue-marquee-ho cnpm install // 安裝依賴包 npm run dev // 啟動服務(wù)
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"
},
因?yàn)檫@個(gè)組件包是能公用的，所以"private": false,
然后 "main": "dist/vue-marquee.min.js", 這里的配置意思是，別人用這個(gè)包 import VueMarquee from 'vue-marquee-ho'; 時(shí)，引入的文件。
可以看出，這個(gè)vue-marquee-ho最終需要打包出一個(gè)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之前不需要的代碼去掉了，再看下對應(yīng)的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
},
至此配置差不多修改好了。接下來我們看看實(shí)現(xiàn)關(guān)鍵功能的Marquee組件
3.3 Marquee組件
思路：標(biāo)簽里的文字所占的寬度超過外面的div寬度時(shí)，增加一個(gè)內(nèi)容相同的標(biāo)簽。這里span標(biāo)簽設(shè)置為display: inline-block;，可以計(jì)算其寬度，把span標(biāo)簽外面的父元素設(shè)置為font-size: 0;display: inline-block;，父級元素的寬度即為兩者寬度之和，也就是一個(gè)span標(biāo)簽寬度的兩倍，然后將其父級元素通過CSS3動畫設(shè)置：
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%);}
}
即可完美實(shí)現(xiàn)跑馬燈效果。
具體代碼：
<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: "暫無內(nèi)容",
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 中入口文件默認(rèn)指定為：
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看到其他人提交的組件是這兩個(gè)一起用的，這樣在windows下會報(bào)錯(cuò)，好像mac不會有問題。
3.4 打包生成dist/vue-marquee.min.js
通過npm run build 即可看到目錄下生成了dist文件，dist文件里有四個(gè)文件，分別是：
vue-marquee.min.js vue-marquee.min.js.map vue-marquee.min.css vue-marquee.min.css.map
我們知道有一個(gè)這樣的文件.gitignore，里面包含npm install時(shí)，不會安裝的東西，因?yàn)檫@里要用到dist文件，于是我把.gitignore 里的dist/去掉了。
.DS_Store node_modules/ npm-debug.log* yarn-debug.log* yarn-error.log*
打包好了后，通過npm publish 提交到npm上
需要多次提交時(shí)注意修改package.json中的"version": "1.2.1", 我這里已經(jīng)提交了21次了（捂臉哭(┬＿┬)）
四、使用組件
通過npm install vue-marquee-ho -s 安裝到相應(yīng)的項(xiàng)目下，安裝成功如下圖所示：
到項(xiàng)目中的node_modules/目錄下將可以看到：
需要用到該組件時(shí)可以這樣引入（注意引入樣式）
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
},
}
看一個(gè)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>
效果：
五、總結(jié)
總算發(fā)布出去，能正常使用了！花了挺多時(shí)間的，雖然這個(gè)組件思路比較簡單，但是說不定別人能用上呢。這個(gè)組件的雛形代碼比現(xiàn)在多，不過之前在項(xiàng)目中直接引用也能正常使用。但是把他打包發(fā)布出去再使用的過程，出了很多問題，反復(fù)修改代碼，精簡代碼，最終終于成功了！21次的提交記錄，不容易呀，源代碼地址：
以上所述是小編給大家介紹的基于Vue的文字跑馬燈組件(npm 組件包)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題，具有很好的價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 中引用gojs繪制E-R圖的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問題
這篇文章主要介紹了vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過程
這篇文章主要介紹了vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單錄入小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
詳解mpvue scroll-view自動回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會自動回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
基于vue-element組件實(shí)現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue中使用require動態(tài)獲取圖片地址方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題
這篇文章主要介紹了解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04