@linking/vue-common-plugin

一个开箱即用的 Vue 常用插件，兼容 Vue 2.7+ 与 Vue 3。

Features

• 全局工具 API（$lc）
  • copyText
  • debounce
  • throttle
  • formatDate
  • storage（local/session）
  • hasPermission / setPermissions / getPermissions
• 常用指令
  • v-lc-focus 自动聚焦
  • v-lc-lazy 图片/背景图懒加载
  • v-lc-permission 权限显隐
• 支持 Vue2 / Vue3（基于 vue-demi）

Install

npm i @linking/vue-common-plugin

Vue 2 项目如果 vue-demi 未自动切换成功，可执行：

npx vue-demi-switch 2

Usage

Vue 3

import { createApp } from 'vue';
import App from './App.vue';
import LinCommonPlugin from '@linking/vue-common-plugin';

const app = createApp(App);
app.use(LinCommonPlugin);
app.mount('#app');

Vue 2

import Vue from 'vue';
import App from './App.vue';
import LinCommonPlugin from '@linking/vue-common-plugin';

Vue.use(LinCommonPlugin);

new Vue({
  render: (h) => h(App)
}).$mount('#app');

API

安装后可通过 this.$lc 使用：

this.$lc.copyText('hello world');
this.$lc.formatDate(Date.now(), 'YYYY-MM-DD');
this.$lc.hasPermission(['admin', 'ops']);

在 setup 里可用：

import { useLinCommon } from '@linking/vue-common-plugin';

const lc = useLinCommon();

Directives

v-lc-focus

<input v-lc-focus />
<input v-lc-focus="{ preventScroll: true }" />

v-lc-lazy

<img
  v-lc-lazy="{
    src: detail.cover,
    loading: '/images/loading.svg',
    error: '/images/error.png'
  }"
/>

v-lc-permission

<button v-lc-permission="'admin'">仅管理员可见</button>
<button v-lc-permission="['admin', 'editor']">管理员和编辑可见</button>

Custom Options

import { createLinCommonPlugin } from '@linking/vue-common-plugin';

app.use(
  createLinCommonPlugin({
    namespace: '$toolkit',
    directivePrefix: 'lin',
    permissions: ['admin', 'editor'],
    permissionMode: 'hide', // hide | remove
    permissionMatchMode: 'all', // all | any
    allowWhenNoPermissionData: false,
    lazy: {
      rootMargin: '0px 0px 120px 0px',
      threshold: 0.1,
      loading: '/loading.svg',
      error: '/error.png',
      once: true
    }
  })
);

Build

npm run typecheck
npm run test
npm run build