Vue.js(九) 第三方常用插件

栏目: 编程工具 · 发布时间: 5年前

内容简介:src/main.js 导入import并使用use插件在vue中集成echarts可以通过两种方式集成:

1. Vue.js devtools

用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。

Vue.js(九) 第三方常用插件

2. vue-lazyload 图片懒加载

2.1 安装 和 使用插件

cnpm install vue-lazyload --save

src/main.js 导入import并使用use插件

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)


// 也可以配置一些选项, 建议使用这种配置方式,配置一些参数
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
key description default options
preLoad proportion of pre-loading height(预加载高度比例) 1.3 Number
error src of the image upon load fail(图片路径错误时加载图片) 'data-src' String
loading src of the image while loading(预加载图片) 'data-src' String
attempt attempts count(尝试加载图片数量) 3 Number
listenEvents

events that you want vue listen for

(想要监听的vue事件)

默认['scroll']可以省略,

当插件跟页面中的动画或过渡等事件有冲突是,

可以尝试其他选项

['scroll'(默认),

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']

Desired Listen Events
adapter

dynamically modify the attribute of element

(动态修改元素属性)

{ } Element Adapter
filter the image's listener filter(动态修改图片地址路径) { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver

2.2 需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<template>
  <div>
  	<!-- <img v-bind:src="img"> -->
    <img v-lazy="img">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      img: 'https://avatar.csdn.net/0/F/7/3_vbirdbest.jpg'
    }
  }
}
</script>

Vue.js(九) 第三方常用插件

3. echarts

在vue中集成echarts可以通过两种方式集成:

  • echarts
  • vue-echarts
    注意:echarts和vue-echarts 不要同时使用。

官方示例: https://echarts.baidu.com/examples/

1 安装echarts依赖

cnpm install echarts -S
  1. HelloWorld.vue
<template>
  <div ref="chartOne" :style="{width: '300px', height: '300px'}"></div>
</template>

<script>
// 引入Echarts主模块
let echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入圆饼图
require('echarts/lib/chart/pie')
// 引入所需组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')

export default {
  name: 'Foo',
  // 创建图表一
  methods: {
    createChartOne () {
      let chartOne = echarts.init(this.$refs.chartOne)

      chartOne.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['iOS', 'Vue', 'Java', 'GO']
        },
        yAxis: {},
        series: [{
          name: '热度',
          type: 'bar',
          data: [5, 6, 9, 6]
        }]
      })
    }
  },
  mounted () {
    this.createChartOne()
  }
}
</script>

Vue.js(九) 第三方常用插件

4. vue-amap 高德地图

vue-amap是一套基于Vue 2.0和高德地图的地图组件。

官方文档 https://elemefe.github.io/vue-amap ,具体使用方法可以参考node_modules/vue-amap/README.md 文档中有详细使用方法。

相关文章 https://www.jianshu.com/p/bde9526ad756

5. moment.js

moment.js 日期处理类库。中文网站: http://momentjs.cn/

  1. 安装
cnpm install moment --save
  1. 在使用的组件中导入
<template>
  <div>
    {{ new Date() | dateFrm}}
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'HelloWorld',
  filters: {
    dateFrm: function (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

Vue.js(九) 第三方常用插件 注意:moment.js中的日期格式化与其它语言如(Java)中的格式不太一样。

格式代码 说明 返回值例子
M 数字表示的月份,没有前导零 1到12
MM 数字表示的月份,有前导零 01到12
MMM 三个字母缩写表示的月份 Jan到Dec
MMMM 月份,完整的文本格式 January到December
Q 季度 1到4
D 月份中的第几天,没有前导零 1到31
DD 月份中的第几天,有前导零 01到31
d 星期中的第几天,数字表示 0到6,0表示周日,6表示周六
ddd 三个字母表示星期中的第几天 Sun到Sat
dddd 星期几,完整的星期文本 从Sunday到Saturday
w 年份中的第几周 如42:表示第42周
YYYY 四位数字完整表示的年份 如:2014 或 2000
YY 两位数字表示的年份 如:14 或 98
A 大写的AM PM AM PM
a 小写的am pm am pm
HH 小时,24小时制,有前导零 00到23
H 小时,24小时制,无前导零 0到23
hh 小时,12小时制,有前导零 00到12
h 小时,12小时制,无前导零 0到12
m 没有前导零的分钟数 0到59
mm 有前导零的分钟数 00到59
s 没有前导零的秒数 1到59
ss 有前导零的描述 01到59
X Unix时间戳 1411572969

6. utility

GitHub地址: https://github.com/node-modules/utility

utility是一套实用 工具 类,使用非常简单直接看GitHub地址或者npm安装之后看该插件下的README.md文件,主要包括以下工具方法:

  • 加密
    • md5
    • sha1
    • sha256
    • hmac
  • 编码解码
    • base64encode
    • base64decode
    • escape : html特殊字符转义
    • unescape
    • encodeURIComponent
    • decodeURIComponent
  • Date
    • accessLogDate
    • logDate
    • YYYYMMDDHHmmssSSS
    • YYYYMMDDHHmmss
    • YYYYMMDD
    • timestamp
  • Number
    • isSafeNumberString
    • toSafeNumber
    • random
  • map
    • map
    • log
  • String
    • split
    • replace
  • JSON
    • strictJSONparse
    • readJSONSync

7. 工具类 util

一个小工具类。

http://nodejs.org/api/util.html

安装

cnpm install util

使用

import util from 'util'
util.format('%s:%s', 'foo', 'bar')

对于项目中常用的工具方法最好自己整理出来,统一使用自己写的工具类,要不然工具类有很多会引入很多,而且每个开发者都不一定都知道每个第三方工具类都包含什么方法,如果不知道很可能自己会再写一份实现,容易重复造轮子,如果自己将常用的工具方法都收集好统一使用自己的工具类,编码风格比较统一,没有就往自己工具类中添加,有就使用。

实用工具方法:

// 生产环境下禁止输出日志
debugLog (str) {
  if (process.env.NODE_ENV !== 'production') {
    console.log(str)
  }
}

8. nprogress 页面顶部进度条

当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。

一般情况下切换到目标路由时,在目标路由中的生命周期中可能会做一些处理(如请求接口等),这些操作会有一定的耗时,所以使用进度条来表示路由切换的进度。

CSDN在切换路由时就有这种效果。只不过CSDN的进度条是红色的,右上角没有loading。

GitHub: https://github.com/rstacruz/nprogress

1. 安装

cnpm install --save nprogress

2. 在main.js中导入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


// 配置NProgress选项
// NProgress.configure({ })

// 在路由页面跳转使用
router.beforeEach((to, from, next) => {
  // 开始进度条
  NProgress.start()
  // 继续路由
  next()
})

router.afterEach(transition => {
  // 结束进度条
  NProgress.done()
})

3. HelloWorld.vue

<template>
  <div>
    <router-link to="/foo">Go to Foo</router-link>
  </div>
</template>

Foo.vue

<template>
  <div>
    Foo Vue
  </div>
</template>

Vue.js(九) 第三方常用插件


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

分布式服务架构:原理、设计与实战

分布式服务架构:原理、设计与实战

李艳鹏、杨彪 / 电子工业出版社 / 2017-8 / 89.00

《分布式服务架构:原理、设计与实战》全面介绍了分布式服务架构的原理与设计,并结合作者在实施微服务架构过程中的实践经验,总结了保障线上服务健康、可靠的最佳方案,是一本架构级、实战型的重量级著作。 《分布式服务架构:原理、设计与实战》以分布式服务架构的设计与实现为主线,由浅入深地介绍了分布式服务架构的方方面面,主要包括理论和实践两部分。理论上,首先介绍了服务架构的背景,以及从服务化架构到微服务架......一起来看看 《分布式服务架构:原理、设计与实战》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具