ant design vue 实现

ant design vue 实现

ant-design-vue 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件和设计规范。以下是实现 ant-design-vue 的基本步骤。

安装 ant-design-vue

通过 npm 或 yarn 安装 ant-design-vue：

npm install ant-design-vue@next

或

yarn add ant-design-vue@next

引入 ant-design-vue

在项目中引入 ant-design-vue，可以选择全局引入或按需引入。

全局引入：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';

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

按需引入：

import { Button, message } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/css';
import 'ant-design-vue/es/message/style/css';

const app = createApp(App);
app.use(Button);
app.config.globalProperties.$message = message;
app.mount('#app');

使用组件

在 Vue 组件中直接使用 ant-design-vue 提供的组件：

<template>
  <a-button type="primary" @click="showMessage">Click Me</a-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message.success('Success message');
    }
  }
};
</script>

自定义主题

通过修改 less 变量来自定义主题。首先安装 less 和 less-loader：

npm install less less-loader --save-dev

在项目根目录下创建 vue.config.js 文件，配置 less 变量：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    }
  }
};

国际化支持

ant-design-vue 支持国际化，可以通过 LocaleProvider 设置语言：

import { ConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';

const app = createApp(App);
app.use(ConfigProvider, { locale: zhCN });
app.mount('#app');

表单验证

ant-design-vue 的表单组件支持验证规则：

<template>
  <a-form :model="form" :rules="rules" ref="formRef">
    <a-form-item label="Username" name="username">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('Form submitted');
        }
      });
    }
  }
};
</script>

表格组件

使用表格组件展示数据：

<template>
  <a-table :columns="columns" :data-source="data" />
</template>

<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  }
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42
  }
];

export default {
  data() {
    return {
      columns,
      data
    };
  }
};
</script>

模态框

使用模态框进行交互：

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    }
  }
};
</script>

通过以上方法，可以快速实现 ant-design-vue 的基本功能。