分享vue2+ant-design简单封装示例

"vue": "^2.6.11",

"ant-design-vue": "^1.7.8",

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// import Antd from 'ant-design-vue';
// import "ant-design-vue/dist/antd.css";
// Vue.use(Antd);

// 按需引入Ant Design
import "ant-design-vue/dist/antd.css";
import {
  Tooltip,
  Modal,
  Tree,
  ConfigProvider,
  Icon,
  Select,
  DatePicker,
  TimePicker,
  Input,
  InputNumber,
  Row,
  Col,
  Checkbox,
  Button,
  message,
  Popconfirm,
  Form,
  Radio,
  Upload,
  Pagination,
  Cascader,
  Badge,
  Spin,
  Drawer,
  Tabs,
} from "ant-design-vue";

Vue.use(Tooltip);
Vue.use(Modal);
Vue.use(Tree);
Vue.use(ConfigProvider);
Vue.use(Icon);
Vue.use(Select);
Vue.use(DatePicker);
Vue.use(TimePicker);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Row);
Vue.use(Col);
Vue.use(Checkbox);
Vue.use(Button);
Vue.use(Popconfirm);
Vue.use(Form);
Vue.use(Radio);
Vue.use(Upload);
Vue.use(Pagination);
Vue.use(Cascader);
Vue.use(Badge);
Vue.use(Spin);
Vue.use(Drawer);
Vue.use(Tabs);

// 使用mockjs模拟数据登录系统
import "./mock/index.js";

router.beforeEach(async (to, from, next) => {
  // 在路由拦截处获取配置 如果有责跳过 没有责调用接口获取
  if (store.state.Config || to.name === 'Home') {
    next();
  } else {
    await getConfig();
    next();
  }
});

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

<template>
  <div :id="id">
    <a-select
      :allowClear="!allowClear"
      style="width: 100%"
      :disabled="disabled"
      :mode="multiple ? 'multiple' : 'default'"
      v-model="modelValue"
      :getPopupContainer="getPopupContainer"
      :dropdownStyle="dropdownStyle"
      @change="selectChange"
      :placeholder="placeholder"
    >
      <a-select-option
        v-for="item in dictData"
        :value="item.itemValue"
        :key="item.itemValue"
        >{
  { item.itemText }}</a-select-option
      >
    </a-select>
  </div>
</template>

<script>
import { post } from "@/request/http.js";

export default {
  mode: {
    prop: "value",
    event: "change",
  },
  props: {
    // 是否清楚按钮
    allowClear: {
      default: true,
    },
    // 字典编码
    dictCode: {
      type: String,
    },
    value: {
      type: [String, Number, Array, Object],
    },
    placeholder: {
      type: [String, Number],
      default: "请选择",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: "affirmModal" + Math.random(),
      dictData: [],
      modelValue: undefined,
      dropdownStyle: {
        background: "#173761",
        borderRadius: "0",
      },
    };
  },
  watch: {
    value: {
      handler(newVal) {
        this.modelValue = newVal;
      },
      deep: true,
      immediate: true,
    },
    dictCode: {
      handler(newVal) {
        this.getDictData();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    selectChange(data) {
      this.$emit("change", data);
    },
    getPopupContainer() {
      return document.getElementById(this.id);
    },
    getDictData() {
      post({ url: `/dict/${this.dictCode}` }).then((res) => {
        const { data, code } = res;

        if (code === 200 && data && data.length) {
          this.dictData = data;
        } else {
          this.dictData = [];
        }
      });
    },
  },
};
</script>

<style lang="scss"