拖拽 插件 vuedraggable

      <Drager
          @change="onChangeDrager"
          v-model="theTabs"
          item-key="screeningId"
          class="screen-tabs-drager scroll-ele"
          id="scroll-ele"
        >
          <template #item="{ element }">
            <a-card style="margin-bottom: 10px" :bordered="false" theme="gray">
              {{ element }}
            </a-card>
          </template>
        </Drager>

import Drager from 'vuedraggable';

const theTabs = ref([1, 2, 3, 4, 5, 6]);
const onChangeDrager = (e: any) => {
	console.log('change', e);
};

vConsole 手机上调试代码

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole

基本用法

import VConsole from 'vconsole'

const vConsole = new VConsole()
console.log('Hello world')

Animate.css css3 动画库

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

npm install animate.css

基本用法

import 'animate.css';

<h1 class="animate__animated animate__bounce">An animated element</h1>

mescroll.js 下拉刷新和上拉加载

一款精致的、在 H5 端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。

npm install mescroll.js

基本用法（vue 组件）

<template>
  <div>
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--内容...-->
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  components: {
    MescrollVue
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置
      mescrollUp: {
        // 上拉加载的配置
        callback: this.upCallback
      },
      dataList: [] // 列表数据
    }
  },
  methods: {
    // 初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 发送请求
      axios
        .get('xxxxxx', {
          params: {
            num: page.num, // 当前页码
            size: page.size // 每页长度
          }
        })
        .then(response => {
          // 请求的列表数据
          let arr = response.data
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = []
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr)
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length)
          })
        })
        .catch(e => {
          // 请求失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr()
        })
    }
  }
}
</script>

<style scoped>
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>

Chart.js JavaScript 图表库

一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库

npm install chart.js

基本用法

;<canvas id="myChart" width="400" height="400"></canvas>

import Chart from 'chart.js/auto'

// 页面渲染完成后执行
const ctx = document.getElementById('myChart')
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
        borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
})

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有 2KB。

npm install dayjs

基本用法

import dayjs from 'dayjs'

dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06

qs url 参数转换

一个轻量的 url 参数转换的 JavaScript 库

npm install qs

基本用法

import qs from 'qs'

qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: 'tom', age: '22' }) // => user=tom&age=22

js-cookie

一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie

基本用法

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7 })
Cookies.get('name') // => 'value'