Vue好用的插件总结

一、emo插件（表情插件）

npm i emoji-vue --save

<template>
  <div class="far_box">
    <p>
      <a href="https://github.com/shershen08/emoji-vue">引入github的表情项目包</a>
    </p>
    <div>显示内容：{{ myText }}</div>
    
    <VueEmoji ref="emoji" :value="myText" @input="onInput" />
    <button @click="clearTextarea">clear</button>
    
  </div>
</template>

<script>
import VueEmoji from 'emoji-vue'
export default {
  components: {
    VueEmoji
  },
  data () {
    return {
      myText: '微信表情'
    }
  },
  methods: {
    onInput (event) {
      console.log(event)
      this.myText = event.data
      // event.data contains the value of the textarea
    },
    clearTextarea () {
      this.$refs.emoji.clear()
      this.myText = ''
    }
  }
}
</script>

<style lang="less" scope>
.far_box {
  height: 100vh; //扩大盒子高度--这样在点击表情外的地方时候 触发失焦 关闭表情盒子
  text-align: left;
}
</style>

二、直播点赞插件支持nvue

https://ext.dcloud.net.cn/plugin?id=1851
https://github.com/lnice/like-button

三、js-cookie的使用

//安装
npm install --save js-cookie

//然后在main.js或者需要使用的页面引入
 
import Cookies from 'js-cookie'

// 创建一个名称为name，对应值为value的Cookie，由于没有设置失效时间，
// 默认失效时间为该网站关闭时
Cookies.set('name', 'value')
 
// 创建一个有效时间为7天的Cookie
Cookies.set('name', 'value', { expires: 7 })
 
// 创建一个带有路径的Cookie
Cookies.set('name', 'value', { expires: 7, path: '' })
 
// 创建一个value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)

// 获取指定名称的Cookie
Cookies.get(name) // value
 
// 获取value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))
 
// 获取所有Cookie
Cookies.get()

// 删除指定名称的Cookie
Cookies.remove('name')
 
// 删除带有路径的Cookie
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') //直接删，会报错！
Cookies.remove('name', { path: '' }) // success!
 
// more
// 当你删除一个cookie时，你不依赖于默认属性，
// 你必须传递与用来设置cookie完全相同的路径和域属性：
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

四、js-table2excel将数据导出Excel表格

一般情况下信息导出只需要导出字符串类型，但是现在的导出内容包含了图片，于是百度看到了js-table2excel可以导出图片，下面记录一下怎么在vue项目中使用js-table2excel导出带有文字、图片类型的excel表格。

1.安装js-table2excel

npm install js-table2excel

2.在需要用到的地方引入插件

import table2excel from 'js-table2excel' 

table2excel(column, datas, excelName)    //生成Excel表格，自动下载

五、relation-graph支持Vue2、Vue3、React, 是一个构建图谱数据插件

relation-graph:一个vue关系图谱组件