Ininin-ui NPM | npm.io

自定义组件 TODO

富文本组件 Tinymce，作者：李志允
大图预览组件 ImagePreview，作者：李志允
单图上传组件 UploadSinglePicture UploadSingleImage，作者：李志允
多图上传组件 UploadMultiImage，作者：李志允
地址选择器组件 AddressSelector，作者：叶利明
图标组件 SvgIcon，作者：叶利明

element-ui 二次封装扩充组件：

按钮 ElButton：扩充了 download，upload，search 类型，作者：叶利明
分页组件 Pagination：重新封装分页组件，作者：郭瑞
模态框组件 DragDialog：拖拽模态框组件，作者：叶利明
表格组件 InTable，作者：黄少光
缩略按钮组组件 EllipsisButtonGroup，作者：黄少光

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

// .babelrc | babel.config.js文件
module.exports = {
  plugins: [
    [
      "component",
      {
        libraryName: "ininin-ui",
        camel2Dash: false
      }
    ]
  ]
};

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { DragDialog } from 'ininin-ui';
import App from './App.vue';

Vue.component(DragDialog.name, DragDialog);

new Vue({
  el: '#app',
  render: h => h(App)
});