基于 Vue2 和 Ant Design Vue 二次封装常用的业务组件、工具类集合。

---

特性

• 常用业务组件
• 内置 css 样式
• 常用的工具方法
• 自定义指令
• vuex

安装

yarn add doui-vue
# OR
npm install doui-vue --save

使用

import Vue from 'vue';
import App from './App';
import Doui, { Vuex } from 'doui-vue';
import 'doui-vue/dist/index.css';

Vue.use(Doui);

const store = new Vuex();

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

快速上手

以下内容已注入，无需通过import引入，可直接使用

---

1. ant-design-vue:

// 组件
<a-button type="primary">主要按钮</a-button>;

// api
this.$message.success('提示文案');

...

2. vuex:

import { Vuex, vuex } from 'doui-vue';

// 配置
const store = new Vuex({
  saveKeys: ['vuex_common'],
  state: {
    vuex_common: {
      language: 'zh-CN'
    }
  }
});

// 读取
this.vuex_common.language;
vuex('vuex_common.language'); // 'zh-CN'

// 修改
this.$vuex('vuex_common.language', 'zh-CN');
vuex('vuex_common.language', 'en-US');

3. utils:

// local-storage
this.$ls();

// dayjs
this.$dayjs();

// event
this.$event.$on();
this.$event.$emit();

// lodash
this.$d.map();
this.$d.find();
this.$d.cloneDeep();

...

4. 内置样式:

.d-rela
.d-abso
.d-flex
.d-flex-1
.d-text-left
.d-font-10
.d-m-10
.d-p-10

...

5. 自定义 directive:

<component v-click-outside="onClickOutside"></component>

<button v-clipboard:copy="message" v-clipboard:success="onCopy">Copy</button>