项目插件记录

标签：插件 vue 项目 记录 js player Code import

效果类：

无缝滚动 vue-seamless-scroll 安装后局部引入，做列表无缝滚动

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamlessScroll
      }
   }
</script>
<template>
  <vue-seamless-scroll :data="listData" class="warp">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

View Code

拖拽插件 vue-drag-resize 安装后全局引入，实现模块可拖动；

//main.js
import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

<template>
    <VueDragResize :isActive="true" :w="200" :h="200" v-        on:resizing="resize" v-on:dragging="resize">
      <h3>Hello World!</h3>
      <p>{{ top }} х {{ left }} </p>
      <p>{{ width }} х {{ height }}</p>
    </VueDragResize>
</template>

View Code

模拟页面加载进度条 nprogress

全屏展示 screenfull

数据关系导向图 d3.js 

普通统计图表 地图 echarts

2D模拟场景 konva.js

在canvas上展示gif gifler

道路地图交互插件 leaflet.js 

基于leaflet展示canvas标签 leaflet-canvas-marker

基于leaflet做标签聚合 leaflet.markercluster  

工具类：

视频流直播 flv.js

<script>
 if (flvjs.isSupported()) {
            this.$nextTick(() => {
                let video = this.$refs['player' + this.videoID];
                // if (video) {
                this.player = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasVideo: true,
                    // cors: false,
                    url: pubconfig.videoWsbaseurl + "?url=" + encodeURIComponent(this.src)
                });
                this.player.attachMediaElement(video);
                try {
                    this.player.load();
                    this.player.play();
                } catch (error) {
                    console.log(error);
                };
            })
        }
</script>
<template>
<video autoplay="autoplay"
               muted
               style="width: 100%; object-fit: fill; height: 100%"
               :ref="'player'+videoID"
               @dblclick="fullscreenclick()"
               :id="videoID"
               loop
               :style="{background: '#000',width:'100%',height:'100%'}">
            <!-- <source 
                    type="application/x-mpegURL"> -->
        </video>
</template>

View Code

vuex插件数据持久化  vuex-persistedstate

import { createVuexPersistedState } from "vue-persistedstate";

/**
 * @name: createVuexPersistedState
 * @param {key:string}
 * @param {storage}
 * @param {whiteList:Array<string>}
 * @param {blackList:Array<string>}
 * @return {storage}
 */

export default new Vuex.Store({
  plugins: [
    createVuexPersistedState({
      key:'vuex',
      storage:window.localStorage,
      whiteList:[],
      blackList: [],
    }),
  ],
  modules: {},
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

View Code

支持Pinia

import { createPinia } from "pinia";

import { createPiniaPersistedState } from "vue-persistedstate";

const store = createPinia();

store.use(createPiniaPersistedState());
//or
store.use(createPiniaPersistedState({
    key:'You want the cache key',  // Default is pinia- your Module ID
    storage:'The way you want to cache' // The default value is the window. The localStorage
}));

export default store;

View Code

 

标签：插件,vue,项目,记录,js,player,Code,import
From： https://www.cnblogs.com/Merrys/p/17172514.html