前端开发常用插件

javascript工具

js-cookie

简化对cookie的操作

• 安装

npm install js-cookie

• 导入

import Cookies from 'js-cookie'

• 基本用法

// 设置cookie, Cookies.set('name', 'value')
Cookies.set('token', 'iguyuogiugsdiougiuy')
Cookies.set('token', 'zvbjbdhvjuhvzjd', {
    domain: location.hostname,	// 设置域
    path: '/',					// 设置路径
    expires: 1/24				// 过期时间为1个小时
  })

// 获取cookie, Cookies.get('name', 'value')
Cookies.get('token')
Cookies.get()	// 获取当前domain下的所有cookie,以对象键值对的方式返回

// 删除cookie, Cookies.remove('name')
Cookies.remove('token')

nprogress

进度条插件

• 安装

npm install --save nprogress

• 导入

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

• 基本用法

NProgress.start()	// 开启
NProgress.done()	// 关闭

• 一些额外配置项

NProgress.configure({
	minimum: 0.8,	// 更改启动时使用的最小百分比。（默认值0.08：）
	easing: 'ease',	// 动画方式
	speed: 500,		// 动画速度
	trickleSpeed: 200,	// 调整涓流/增量的频率（以毫秒为单位）
	parent: '#container'	// 指定此项来更改父容器。（默认值body：）
})

Vue工具

vue-clipboard2

在vue中实现文本复制功能的插件

• 安装

npm install --save vue-clipboard2

• 导入

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

• 基本用法

<template>
	<input value="value" />
	<button
		v-clipboard:copy="value"
    	v-clipboard:success="copySuccess"
    	v-clipboard:error="copyError"
	>复制input的文本</button>
</template>

<script>
export default {
  data() {
	return {
	  value: ''
	}
  },
  methods: {
	copySuccess() {
	  console.log('复制成功的回调')
	}
	copyError() {
	  console.log('复制失败的回调')
	}
  }
}
</script>