插件链接

1、flv文件播放

flv格式文件

//html
<video
  :id="question.questionId"     // 循环时动态绑定id
   controls="true"
   height="230px"
   width="auto">
     对不起,您的浏览器不支持动画文件播放
   </video>

import flvjs from 'flv.js/dist/flv.min.js'

//js
getVideo() {
      let arrTemp = []
      this.dataList.forEach(item => {
        if (item.questionType == '70') {
          arrTemp.push(item)
        }
      })
      arrTemp.forEach(item => {
        let videoId = item.questionId
        if (flvjs.isSupported()) {
          let videoElement = document.getElementById(videoId);
          let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: item.questionAnswerList[0].questionAnswerUrl
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          // flvPlayer.play();
        }
      })
    },

//调用
 this.$nextTick(() => {
     this.getVideo()
      })

2、VDistpicker组件

网站地址
GitHub

npm install v-distpicker --save

注册组件
注册全局组件
 
import VDistpicker from 'v-distpicker'
 
Vue.component('v-distpicker', VDistpicker);
注册组件
 
import VDistpicker from 'v-distpicker'
 
export default {
  components: { VDistpicker }
}

简单使用
基础
 
<v-distpicker></v-distpicker>
默认值
 
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
移动端
 
<v-distpicker type="mobile"></v-distpicker>

3、富文本框

github地址

npm install vue-quill-editor --save

全局

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

//局部

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

<template>
    <div>
        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:600px;"></quill-editor>
    </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor';

export default {
    data(){
        return{
            content: '',
            editorOption: {
               placeholder: '编辑文章内容'
             },
        }
    },
    components: {
        quillEditor
    },
    methods:{
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
    }
}
</script>

4、amr（微信聊天语音格式）格式文件播放

amr播放插件

npm install benz-amr-recorder

import React from 'react'
var BenzAMRRecorder = require('benz-amr-recorder');

function AmrFileprops(props){
  var amr = new BenzAMRRecorder();

  const playAmr = () => {
    amr.initWithUrl(props.src).then(function () {
      amr.play();
    });
  }

  return <>
    <div className='amr_play'>
      <div className='amr_play_name'>{props.filename}</div>
      <div className='amr_status'><span onClick={playAmr}><a>播放</a></span> </div>
    </div>
  </>
}
export default AmrFile

5、表情包

表情包插件

npm install --save emoji-mart

import { Picker } from 'emoji-mart'
import 'emoji-mart/css/emoji-mart.css'

{
          showEmojiModal && <Picker set='apple'
              backgroundImageFn={((set, sheetSize) => `${emoji}`)}
              emoji=''
              showPreview={false}
              style={{ position: 'absolute', zIndex: '10', top: '20px' }}
              onClick={e => { getInputData(e.native); setshowEmojiModal(false) }} />
}

6、WebSocket断线重连

ReconnectingWebSocket

npm install --save reconnecting-websocket

import ReconnectingWebSocket from 'reconnecting-websocket';
 
const rws = new ReconnectingWebSocket('ws://my.site.com');
 
rws.addEventListener('open', () => {
    rws.send('hello!');
});

7、文件预览

文件预览
可预览的文件格式：

Images: png, jpeg, gif, bmp, including 360-degree images
pdf
csv
xslx
docx
Video: mp4, webm
Audio: mp3

npm i react-file-viewer

// MyApp.js
import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png'
const type = 'png'

class MyComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }
//errorComponent,onError 可选

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}

8、插件vue-clipboard2

npm i vue-clipboard2 -s

main.js引入

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

使用方法

<input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">点击复制</button>

new Vue({
  data: function () {
    return {
      message: '链接／邀请码'
    }
  },
  methods: {
    onCopy (e) {
      this.$message.success('成功复制: ' + e.text)
    },
    onError (e) {
     this.$message.error('复制失败')
    }
  }
})

9、日历组件

日历组件地址

<div class="cal">
            <vue-cal
              ref="coursePlan"
              locale="zh-cn"
              :disable-views="['years', 'year', 'week']"
              :time-from="7 * 60"    //日历从开始时间
              :time-to="22 * 60"   //日历结束时间
              :time-step="timeStep"
              :timeCellHeight="80"     //每个格子高度
              :events="events"      //日历对应的事件，数组，可将数据push进去
              hideViewSelector
              hideTitleBar
              @cell-click="cellClick($event)"
              :on-event-click="onEventClick"
              :active-view.sync="activeView"
              click-to-navigate
              :selected-date="selectedDate"
            >
              <template v-slot:events-count="{ events }">
                <span v-if="customEventsCount(events)">
                  {{ customEventsCount(events) }}
                </span>
              </template>
              <template v-slot:event="{ event }">
                <a-popover
                  title="课程信息"
                  trigger="hover"
                >
                  <template slot="content">
                    <div class="content">
                      <small class="vuecal__event-time">
                        <span>{{ event.start.formatTime() }}</span>~
                        <span>{{ event.end.formatTime() }}</span>
                      </small>
                      <div
                        class="vuecal__event-title"
                        v-html="event.title"
                      />
                    </div>
                  </template>
                  <div class="divClass">
                    <div class="content">
                      <small class="vuecal__event-time">
                        <span>{{ event.start.formatTime() }}</span>~
                        <span>{{ event.end.formatTime() }}</span>
                      </small>
                      <div
                        class="vuecal__event-title"
                        v-html="event.title"
                      />
                    </div>
                  </div>
                </a-popover>
              </template>
            </vue-cal>
          </div>

10、移动端调试vConsole

//按需引入
useEffect(()=>{
        if(isdebug){
          const vConsole = document.createElement('script')
          vConsole.src = 'https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js'
          document.head.appendChild(vConsole)
          vConsole.onload= function(){
            var vConsole = new VConsole()
          }
        }
  },[isdebug])