开始

TIP

该组件库使用 Vue 2.x 开发

介绍

@vensst/vue-widget (opens new window) 是个人封装的vue组件库

安装

使用npm

npm install @vensst/vue-widget -S

全部引入

import Vue from "vue";
import VueWidget from "@vensst/vue-widget";
// import error from "./assets/images/error.jpg";
// import loading from "./assets/images/loading.gif";
Vue.use(VueWidget);

// 配置方式
// Vue.use(VueWidget, {
//   lazy: { // 配置与 vue-lazyload 配置一样
//     preLoad: 1.3,
//     error: error,
//     loading: loading,
//     attempt: 1,
//   },
//   table: {
//     components: ["Button"], // 按需引入vxe-table里组件
//     // components:'all', // 为 all 则会全部引入
//     options: {}, // 表格配置项 参考 https://vxetable.cn/v3/#/table/start/global
//   }
// });

按需引入

import Vue from "vue";
import VueWidget from "@vensst/vue-widget";
import error from "./assets/images/error.jpg";
import loading from "./assets/images/loading.gif";

// 按需引入组件
Vue.use(VueWidget.Captcha);
Vue.use(VueWidget.Drag);
Vue.use(VueWidget.Signature);
Vue.use(VueWidget.VueLazyload, { // 配置与 vue-lazyload 配置一样
  preLoad: 1.3,
  error: error,
  loading: loading,
  attempt: 1,
});
Vue.use(VueWidget.Table, {
  components: ["Button"], // 按需引入vxe-table里组件
  // components:'all', // 为 all 则会全部引入
  options: {}, // 表格配置项 参考 https://vxetable.cn/v3/#/table/start/global
});

// 按需引入指令
import {drag} from "@vensst/vue-widget/src/directives/index.js";

Vue.directive("drag", drag);

自定义table主题

与官网一致，你可以通过修改scss变量来自定义主题，具体参考vxe-table主题 (opens new window)

   // 修改scss变量
      $vxe-font-size: 14px;
      $vxe-font-color: #666;
      $vxe-primary-color: #409eff;
      $vxe-table-font-color: $vxe-font-color;
      $vxe-table-border-color: #e8eaec;
      $vxe-table-border-radius: 4px;
      // ...

      @import '@vensst/vue-widget/src/styles/table.scss';