当前位置：首页 > VUE

antd vue 实现

2026-01-07 08:29:28VUE

使用 Ant Design Vue 实现功能

Ant Design Vue 是基于 Vue.js 的 UI 组件库，提供了丰富的组件和设计规范。以下是一些常见功能的实现方法。

安装 Ant Design Vue

通过 npm 或 yarn 安装 Ant Design Vue：

npm install ant-design-vue --save

或

yarn add ant-design-vue

引入 Ant Design Vue

在 main.js 中全局引入 Ant Design Vue：

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

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

使用按钮组件

Ant Design Vue 提供了多种按钮样式：

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>

表单实现

使用 a-form 组件创建表单：

<template>
  <a-form :model="formState" @finish="onFinish">
    <a-form-item label="Username" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item label="Password" name="password">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const formState = reactive({
      username: '',
      password: '',
    });

    const onFinish = values => {
      console.log('Success:', values);
    };

    return {
      formState,
      onFinish,
    };
  },
};
</script>

表格实现

使用 a-table 组件展示数据：

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

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

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

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

模态框实现

使用 a-modal 组件创建对话框：

<template>
  <div>
    <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>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };

    return {
      visible,
      showModal,
      handleOk,
    };
  },
};
</script>

主题定制

通过修改 less 变量自定义主题：

安装 less 和 less-loader：

npm install less less-loader --save-dev

在 vue.config.js 中配置：

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

国际化支持

Ant Design Vue 支持多语言：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.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(Antd, {
  locale: enUS, // 设置为英文
});
app.mount('#app');

以上示例展示了 Ant Design Vue 的基本用法，包括组件引入、表单、表格、模态框等常见功能的实现。

antd vue 实现