手记

ant-design-vue入门：新手快速上手指南

缥缈止盈
2024-10-17 13:09:50浏览 293
概述

本文详细介绍了如何安装和使用ant-design-vue入门，包括组件的快速引入和注册，基本组件如按钮、输入框和布局的使用方法，以及如何进行样式定制。此外，本文还提供了表格组件、表单组件的使用示例，以及一些高级功能的探索实例。

引入ant-design-vue

在项目中引入和使用 Ant Design Vue 需要按照以下步骤进行：

  1. 安装 ant-design-vue

    安装步骤如下：

    npm install ant-design-vue --save

    如果你使用的是 Vue CLI，你可以直接使用 vue add ant-design-vue 命令来安装插件：

    vue add ant-design-vue

    或者，如果你已经在项目中，可以直接通过 npm 安装：

    npm install ant-design-vue --save

  2. 快速引入组件

    安装完成后，你需要在你的项目入口文件中引入并注册 Ant Design Vue 组件。例如，如果你使用的是 main.js：

    import Vue from 'vue';
import App from './App.vue';
import { Button, Input, Layout } from 'ant-design-vue';

Vue.config.productionTip = false;

// 通过 Vue.use() 方法引入 Button、Input 和 Layout 组件
Vue.use(Button);
Vue.use(Input);
Vue.use(Layout);

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

    以上代码中，我们通过 Vue.use() 方法引入了 Button、Input 和 Layout 组件。你也可以选择全局引入所有组件，使用下面的代码：

    import Vue from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

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

    以上代码导入了 Antd，并通过 Vue.use(Antd) 实现全局注册，这样在组件中可以直接使用 Ant Design Vue 提供的组件。

基本组件使用

Button按钮组件

按钮组件是 Ant Design Vue 中最基础的组件之一，用于实现各种功能按钮。以下是按钮组件的基本使用方法：

  1. 基本使用

    <template>
 <a-button type="primary">主要按钮</a-button>
 <a-button>默认按钮</a-button>
 <a-button type="dashed">虚线按钮</a-button>
 <a-button type="danger">危险按钮</a-button>
</template>

    例如，以下代码展示了不同类型的按钮：

    <template>
 <div>
   <a-button type="primary">主要按钮</a-button>
   <a-button>默认按钮</a-button>
   <a-button type="dashed">虚线按钮</a-button>
   <a-button type="danger">危险按钮</a-button>
 </div>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

    通过设置 type 属性，可以改变按钮的样式。

  2. 按钮加载

    当按钮正在加载时，可以通过 loading 属性来表示：

    <template>
 <a-button type="primary" loading>Loading...</a-button>
</template>

    例如，以下代码展示了加载状态的按钮：

    <template>
 <a-button type="primary" :loading="loading">加载中...</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
 data() {
   return {
     loading: true,
   };
 },
};
</script>

    当 loading 为 true 时，按钮会显示加载状态。

  3. 按钮禁用

    你可以通过 disabled 属性来禁用按钮：

    <template>
 <a-button type="primary" disabled>已禁用</a-button>
</template>

    例如，以下代码展示了禁用状态的按钮：

    <template>
 <a-button type="primary" :disabled="true">已禁用</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

Input输入框组件

输入框组件用于收集用户输入数据，是表单中的常见组件。以下是输入框组件的基本使用方法：

  1. 基本使用

    <template>
 <a-input placeholder="请输入" />
</template>

    例如，以下代码展示了基本输入框的使用：

    <template>
 <div>
   <a-input placeholder="请输入" />
 </div>
</template>

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
};
</script>

  2. 受控组件

    输入框组件可以作为受控组件使用，通过绑定 v-model 来管理输入值：

    <template>
 <a-input v-model="value" placeholder="请输入" />
</template>

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
 data() {
   return {
     value: '',
   };
 },
};
</script>

  3. 密码输入框

    使用 type="password" 属性来创建密码输入框：

    <template>
 <a-input type="password" placeholder="请输入密码" />
</template>

    例如，以下代码展示了密码输入框的使用：

    <template>
 <div>
   <a-input type="password" placeholder="请输入密码" />
 </div>
</template>

<script>
import { Input } from 'ant-design-vue';
export default {
 components: {
   'a-input': Input,
 },
};
</script>

Layout布局组件

布局组件用于创建页面布局，帮助快速搭建页面结构。以下是布局组件的基本使用方法：

  1. 基本使用

    <template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout-content>Content</a-layout-content>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

    例如，以下代码展示了基本布局的使用：

    <template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout-content>Content</a-layout-content>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-header': Layout.Header,
   'a-layout-footer': Layout.Footer,
   'a-layout-content': Layout.Content,
 },
};
</script>

  2. 侧边栏布局

    使用 a-layout-sider 组件来创建侧边栏布局：

    <template>
 <a-layout>
   <a-layout-sider>Sider</a-layout-sider>
   <a-layout-content>Content</a-layout-content>
 </a-layout>
</template>

    例如，以下代码展示了侧边栏布局的使用：

    <template>
 <a-layout>
   <a-layout-sider>Sider</a-layout-sider>
   <a-layout-content>Content</a-layout-content>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-sider': Layout.Sider,
   'a-layout-content': Layout.Content,
 },
};
</script>

  3. 嵌套布局

    布局组件支持嵌套，可以创建复杂的页面结构：

    <template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout>
     <a-layout-sider>Sider</a-layout-sider>
     <a-layout-content>Content</a-layout-content>
   </a-layout>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

    例如，以下代码展示了嵌套布局的使用：

    <template>
 <a-layout>
   <a-layout-header>Header</a-layout-header>
   <a-layout>
     <a-layout-sider>Sider</a-layout-sider>
     <a-layout-content>Content</a-layout-content>
   </a-layout>
   <a-layout-footer>Footer</a-layout-footer>
 </a-layout>
</template>

<script>
import { Layout } from 'ant-design-vue';
export default {
 components: {
   'a-layout': Layout,
   'a-layout-header': Layout.Header,
   'a-layout-sider': Layout.Sider,
   'a-layout-content': Layout.Content,
   'a-layout-footer': Layout.Footer,
 },
};
</script>

样式定制

主题定制

Ant Design Vue 提供了多种主题，可以轻松地改变组件样式。以下是主题定制的方法：

  1. 使用 CSS 变量

    通过修改 CSS 变量来定制主题，例如：

    :root {
 --primary-color: #1890ff;
}

    例如，以下代码展示了如何通过 CSS 变量来定制主题：

    :root {
 --primary-color: #1890ff;
}

  2. 自定义样式文件

    可以通过覆盖默认样式来定制主题，例如：

    .ant-btn-primary {
 background-color: #1890ff;
}

    例如，以下代码展示了如何通过自定义样式文件来定制主题：

    .ant-btn-primary {
 background-color: #1890ff;
}

样式覆盖

你也可以通过 CSS 选择器来覆盖 Ant Design Vue 组件的默认样式：

  1. 覆盖组件样式

    例如，以下代码展示了如何覆盖按钮组件的样式：

    .ant-btn {
 border-radius: 10px;
}

    通过覆盖 .ant-btn 类，可以修改按钮的边框圆角。

  2. 覆盖组件属性

    你也可以通过修改组件属性来覆盖样式，例如：

    <a-button >按钮</a-button>

    例如，以下代码展示了如何通过 style 属性来覆盖按钮样式：

    <a-button >按钮</a-button>

<template>
 <a-button >按钮</a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

表格组件使用

Table表格基本使用

表格组件用于展示数据列表，是 Ant Design Vue 中的一个重要组件。

  1. 基本使用

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

    例如，以下代码展示了基本表格的使用：

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

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { name: '张三', age: 20 },
       { name: '李四', age: 22 },
     ],
   };
 },
};
</script>

  2. 列排序

    可以通过 sortable 属性来启用列排序：

    <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />

    例如，以下代码展示了启用列排序的表格：

    <template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name', sorter: true },
       { title: '年龄', dataIndex: 'age', sorter: true },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
   };
 },
};
</script>

  3. 列筛选

    可以通过 filteredValue 属性来启用列筛选：

    <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />

    例如，以下代码展示了启用列筛选的表格：

    <template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name', filters: [
         { text: '张三', value: '张三' },
         { text: '李四', value: '李四' },
       ] },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
   };
 },
};
</script>

数据加载和分页

  1. 数据加载

    通过 @load 事件来处理数据加载：

    <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" @load="loadData" />

    例如，以下代码展示了如何处理数据加载：

    <template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" @load="loadData" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [],
   };
 },
 methods: {
   async loadData() {
     const response = await fetch('http://example.com/data');
     const data = await response.json();
     this.data = data;
   },
 },
};
</script>

  2. 分页

    使用 pagination 属性来启用分页：

    <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" :pagination="pagination" />

    例如，以下代码展示了如何启用分页：

    <template>
 <a-table :columns="columns" :data-source="data" :row-key="(record) => record.id" :pagination="pagination" />
</template>

<script>
import { Table } from 'ant-design-vue';
export default {
 components: {
   'a-table': Table,
 },
 data() {
   return {
     columns: [
       { title: '姓名', dataIndex: 'name' },
       { title: '年龄', dataIndex: 'age' },
     ],
     data: [
       { id: 1, name: '张三', age: 20 },
       { id: 2, name: '李四', age: 22 },
     ],
     pagination: {
       pageSize: 10,
       total: 100,
     },
   };
 },
};
</script>

表单组件使用

Form表单组件

表单组件用于创建交互式表单，是 Ant Design Vue 中的一个核心组件。

  1. 基本使用

    <a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

    例如，以下代码展示了基本表单的使用：

    <template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

  2. 表单验证

    通过 v-decorator 来设置表单验证规则：

    <a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

    例如，以下代码展示了表单验证的使用：

    <template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

表单验证

表单验证是表单组件的重要功能，可以确保用户输入的数据符合要求。

  1. 验证规则

    通过 v-decorator 设置验证规则：

    <a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
 </a-form-item>
</a-form>

    例如，以下代码展示了表单验证规则的使用：

    <template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [{ required: true, message: '请输入' }] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
 },
};
</script>

  2. 自定义验证

    你也可以通过自定义验证函数来实现复杂的验证逻辑：

    <a-form :form="form" @submit="handleSubmit">
 <a-form-item>
   <a-input placeholder="请输入" v-decorator="['input', { rules: [
     { required: true, message: '请输入' },
     { validator: this.validateInput },
   ] }]" />
 </a-form-item>
</a-form>

    例如，以下代码展示了自定义验证的使用：

    <template>
 <a-form :form="form" @submit="handleSubmit">
   <a-form-item>
     <a-input placeholder="请输入" v-decorator="['input', { rules: [
       { required: true, message: '请输入' },
       { validator: this.validateInput },
     ] }]" />
   </a-form-item>
 </a-form>
</template>

<script>
import { Form, Input } from 'ant-design-vue';
export default {
 components: {
   'a-form': Form,
   'a-form-item': Form.Item,
   'a-input': Input,
 },
 data() {
   return {
     form: this.$form.createForm(this, { name: 'input' }),
   };
 },
 methods: {
   handleSubmit(e) {
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
       }
     });
   },
   validateInput(rule, value, callback) {
     if (!value) {
       callback(new Error('请输入'));
     } else {
       callback();
     }
   },
 },
};
</script>

高级功能探索

动态组件

动态组件允许你在运行时根据条件选择渲染不同的组件：

  1. 基本使用

    <a-button @click="changeComponent">切换组件</a-button>
<component :is="currentComponent"></component>

    例如，以下代码展示了如何使用动态组件：

    <template>
 <a-button @click="changeComponent">切换组件</a-button>
 <component :is="currentComponent"></component>
</template>

<script>
import Button from 'ant-design-vue/es/button';
import Input from 'ant-design-vue/es/input';

export default {
 components: {
   'a-button': Button,
   'a-input': Input,
 },
 data() {
   return {
     currentComponent: 'a-button',
   };
 },
 methods: {
   changeComponent() {
     if (this.currentComponent === 'a-button') {
       this.currentComponent = 'a-input';
     } else {
       this.currentComponent = 'a-button';
     }
   },
 },
};
</script>

  2. 动态组件示例

    可以根据用户操作来动态切换组件：

    <a-button @click="changeComponent">切换组件</a-button>
<component :is="currentComponent"></component>

    例如，以下代码展示了根据用户操作动态切换组件：

    <template>
 <a-button @click="changeComponent">切换组件</a-button>
 <component :is="currentComponent"></component>
</template>

<script>
import Button from 'ant-design-vue/es/button';
import Input from 'ant-design-vue/es/input';

export default {
 components: {
   'a-button': Button,
   'a-input': Input,
 },
 data() {
   return {
     currentComponent: 'a-button',
   };
 },
 methods: {
   changeComponent() {
     if (this.currentComponent === 'a-button') {
       this.currentComponent = 'a-input';
     } else {
       this.currentComponent = 'a-button';
     }
   },
 },
};
</script>

插槽使用

插槽是 Vue 中用于自定义组件内容的机制，Ant Design Vue 中的组件也广泛使用插槽。

  1. 基本使用

    <a-button>
 <template #default>
   自定义按钮
 </template>
</a-button>

    例如，以下代码展示了如何使用插槽：

    <template>
 <a-button>
   <template #default>
     自定义按钮
   </template>
 </a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

  2. 插槽示例

    你可以通过插槽来自定义按钮内容：

    <a-button>
 <template #default>
   自定义按钮
 </template>
</a-button>

    例如，以下代码展示了如何通过插槽自定义按钮内容：

    <template>
 <a-button>
   <template #default>
     自定义按钮
   </template>
 </a-button>
</template>

<script>
import { Button } from 'ant-design-vue';
export default {
 components: {
   'a-button': Button,
 },
};
</script>

通过本文的详细介绍，你可以了解到如何安装和使用 Ant Design Vue 组件库，以及如何使用基本组件、进行样式定制，以及如何使用表格组件、表单组件和高级功能。希望这些内容对你有所帮助。如果你需要更详细的文档或示例，可以参考 Ant Design Vue 的官方文档。

相关标签
前端工具
Vue.js
设计基础
0人推荐
随时随地看视频
慕课网APP