基于Vue的文字跑马灯组件(npm 组件包)


Posted in Javascript onMay 24, 2017

一、前言

总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下:

基于Vue的文字跑马灯组件(npm 组件包)

印象中好像HTML标签的‘marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了‘marquee'标签
既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅!

二、用npm发布一个包

有点惭愧,之前通过npm install ...安装package包时,我是不知道package包存在哪里,在github上?折腾一番才知道是在npm上发布的。

2.1 npm发布包流程

进入官网,注册帐号

基于Vue的文字跑马灯组件(npm 组件包)

进入已经写好的组件, 登录npm帐号

基于Vue的文字跑马灯组件(npm 组件包)

执行npm publish,最先遇到问题好像是这个

基于Vue的文字跑马灯组件(npm 组件包)

这里注意的是因为国内网络问题,许多小伙伴把npm的镜像代理到淘宝或者别的地方了,这里要设置回原来的镜像。npm config set registry=http://registry.npmjs.org

后面又遇到

基于Vue的文字跑马灯组件(npm 组件包)

这里我还特意查了下ENEEDAUTH错误,可是却没看后面的提示:You need to authorize this machine using 'npm adduser'

所以这里需要npm adduser

基于Vue的文字跑马灯组件(npm 组件包)

(发布的包的名字也要注意,有可能会有重名问题,像我这个组件包本来取名为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 // 启动服务

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.js
vue-marquee.min.js.map
vue-marquee.min.css
vue-marquee.min.css.map

我们知道有一个这样的文件.gitignore,里面包含npm install时,不会安装的东西,因为这里要用到dist文件,于是我把.gitignore 里的dist/去掉了。

.DS_Store
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

打包好了后,通过npm publish 提交到npm上

基于Vue的文字跑马灯组件(npm 组件包)

需要多次提交时注意修改package.json中的"version": "1.2.1", 我这里已经提交了21次了(捂脸哭(┬_┬))

四、使用组件

通过npm install vue-marquee-ho -s 安装到相应的项目下,安装成功如下图所示:

基于Vue的文字跑马灯组件(npm 组件包)

到项目中的node_modules/目录下将可以看到:

基于Vue的文字跑马灯组件(npm 组件包)

需要用到该组件时可以这样引入(注意引入样式)

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>

效果:

基于Vue的文字跑马灯组件(npm 组件包)

五、总结

总算发布出去,能正常使用了!花了挺多时间的,虽然这个组件思路比较简单,但是说不定别人能用上呢。这个组件的雏形代码比现在多,不过之前在项目中直接引用也能正常使用。但是把他打包发布出去再使用的过程,出了很多问题,反复修改代码,精简代码,最终终于成功了!21次的提交记录,不容易呀,源代码地址:

vue-marquee-ho

以上所述是小编给大家介绍的基于Vue的文字跑马灯组件(npm 组件包),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
Vue实现手机计算器
Aug 17 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
React简单介绍
May 24 #Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 #Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 #Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 #Javascript
jquery Form轻松实现文件上传
May 24 #jQuery
微信小程序封装http访问网络库实例代码
May 24 #Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 #Javascript
You might like
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
浅析python继承与多重继承
2018/09/13 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python用SSH连接到网络设备
2021/02/18 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
上海方立数码笔试题
2013/10/18 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
考博专家推荐信模板
2013/12/02 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
纪检监察建议书
2014/05/19 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
发布会邀请函
2015/01/31 职场文书
高老头读书笔记
2015/06/30 职场文书
导游词之镜泊湖
2019/12/09 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript