这是我参与「第四届青训营」笔记创作活动的第2天

引入

安装组件

npm i --save ant-design-vue

全局引入

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

const app = createApp(App);

app.use(Antd).mount('#app');

这就完成了Antd的全局注册，需要注意的是，样式文件需要单独引入

按需引入

先安装 babel-plugin-import插件按需加载：

  npm install babel-plugin-import --save

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

修改babel.config.js

插件会自动转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

修改babel.config.js

module.exports={
    presets:["@vue/app"],
    plugins:[
        [
            "import",
            {libraryName:'ant-design-vue',
            libraryDirectory:'es',
            style:true}   //style为true会加载less文件
        ]
    ]
}

然后就是需要用什么就引入什么了

import { Button } from 'ant-design-vue';

踩坑:

但是发现进行按需引入找不到对应的文件:

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
    components:{ AButton:Button },
}
</script>

问题在于:需要将less降为2.x版本 !!!!!!

貌似是因为import导入的顺序问题导致的，现在也还没修复好

github.com/ant-design/…

yarn add less-loader@^4.0.5
yarn add less@^2.7.2

没有图标

ant-design-vue中,自带的图标,也要引用进来,不然图标会消失

1 在项目中创建文件icons.ts ，引入并导出你需要的图标
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'
export { default as QuestionCircleTwoTone } from '@ant-design/icons/lib/twotone/QuestionCircleTwoTone'
export { default as ForkOutline } from '@ant-design/icons/lib/outline/ForkOutline'
2 在vue.config.js中配置将从npm包中导入映射从你创建的文件中导入
module.exports = {
 configureWebpack: {
    resolve: {
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/util/icons.ts')
      }
    },
    plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['zh-CN']
      })
    ]
  },
}
3 坑
记得找到组件自身所引入图标，也导入进来

优化强依赖插件moment

去除其他语言包，只保留中文和英文（英文内置，不可去除）
module.exports ={
    plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['zh-CN']
      })
    ]
  },
}

引入图标

在项目中创建文件icons.ts,最好在utils文件夹里面

import { App } from 'vue';
import {
  HeartOutlined,  //想要什么引入什么
  HistoryOutlined,
} from '@ant-design/icons-vue';

export const useIcons = (app: App) => {  //因为app只有一个,但是又想在这个文件里面去注册,那就只好暴露出一个方法,然后让外部(main.js)去调用这个方法了
  app.component(HeartOutlined.displayName, HeartOutlined);
  app.component(DatabaseOutlined.displayName, DatabaseOutlined);
};

export const icons = {
  i1001: require('@/assets/haina/生日.png'),
  i1002: require('@/assets/haina/客户.png'),  //这个是给本地的图标进行的编号
};

然后在main.ts里面:

import { useIcons } from '@/icons';

useIcons(app);

对于自定义icons的使用:

在想要用的组件暴露出icons,然后直接用编号就代表着对应的图片了

<img :src="i1001">

Icon中的component组件的接受的属性如下:

字段	说明	类型	只读值
width	`svg` 元素宽度	string	number	'1em'
height	`svg` 元素高度	string	number	'1em'
fill	`svg` 元素填充的颜色	string	'currentColor'
class	计算后的 `svg` 类名	string	-
style	计算后的 `svg` 元素样式	CSSProperties	这里填入的是css属性,如果想要在这里改变图标的大小用`style="font-size: 1.5rem"`

常用组件

a-card(卡片)

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

参数	说明	类型	默认值
bodyStyle	内容区域自定义样式	object	-
bordered	是否有边框	boolean	true

message使用

js中可以方便地调用message弹窗

a-tabs

<a-tabs
      type="editable-card"  //页签的基本样式,可选line,card,editable-card
      v-bind="$attrs"
      :activeKey="activeKey"   //当前激活面板的key,string类型
      :style="{
        margin: 0,
        width: sideWidth,
      }"
      hide-add   //是否隐藏加号图标,在typeditable-card时有效
      :class="{ 'ant-pro-multi-tab-wrap': true, 'ant-pro-multi-tab-wrap-fixed': fixed }" 
        //fixed是个布尔值,这里class的类型由fixed动态指定
      @change="handleActiveKeyChange"
        //回调,切换面板的回调, 回调的参数:Function(activeKey) {}
      :tabBarStyle="{ background: '#FAFBFD' }"
        //tab bar的样式对象
    >

editable-card类型页签:(有关闭按钮,可以增加),a-tabs是最顶层的标签栏

然后tab里有很多定义好的插槽,方便我们去使用:

参数	说明	类型	默认值
tabBarExtraContent	tab bar 上额外的元素	slot	无
tab	选项卡头显示文字	string & slot	无

a-form(表单)

高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

何时使用

用于创建一个实体或收集信息。
需要对输入的数据类型进行校验时。

排列方式

我们为 form 提供了以下三种排列方式：

水平排列：标签和表单控件水平排列；（默认）
垂直排列：标签和表单控件上下垂直排列；
行内排列：表单项水平行内排列。

表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

API

参数	说明	类型	默认值
layout	表单布局	'horizontal'	'vertical'	'inline'	'horizontal'
labelCol	label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`	object	这个属性是设置填入部分表格的题头的东西的
wrapperCol	需要为输入控件设置布局样式时，使用该属性，用法同 labelCol	object	一个是对标签的设置,一个是对输入控件的设置
model	表单数据对象	object
name	表单名称，会作为表单字段 `id` 前缀使用	string
finish	提交表单且数据验证成功后回调事件	function(values)	-
finishFailed	提交表单且数据验证失败后回调事件	function({ values, errorFields, outOfDate })	-

如果填入行内布局的话,再对应用col,就能实现类似响应式的方式

表单验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可

参数	说明	类型	默认值
rules	表单验证规则	object
required	是否必填，如不设置，则会根据校验规则自动生成	boolean	false
validate	任一表单项被校验后触发	被校验的表单项 name 值，校验是否通过，错误消息（如果存在）
trigger	校验触发的时机	'blur'	'change'	`['change', 'blur']`	-

关于字段的验证

name: [
        { required: true, message: '请输入Banner名称', trigger: 'blur' },
        { min: 1, max: 50, message: '请输入长度在1和50之间的名称', trigger: 'blur' },
      ],

a-upload

文件选择上传和拖拽上传组件

参数	说明	默认值	类型
fileList	已经上传的文件列表（受控）	object[]	无

上传成功时必须执行 data.onSuccess 这样才能让正在上传的图片呈现为上传成功的状态,不然会一直显示在上传中

a-space

设置组件间的间距

何时使用

避免组件紧贴在一起，拉开统一的空间。

适合行内元素的水平间距。
可以设置各种水平对齐方式。

参数	说明	类型	默认值
align	对齐方式	`start` & `end` &`center` &`baseline`	-
direction	间距方向	`vertical` & `horizontal`	`horizontal`
size	间距大小	`small` & `middle` & `large` & `number`	`small`

a-dropdown

下拉菜单

参数	说明	类型	默认值
trigger	触发下拉的行为, 移动端不支持 hover	Array<`click`	`hover`
overlay(v-slot)	菜单	Menu	里面填入的是一个a-menu的组件

a-tabs

例子

<a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
    <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>

可以删除的标签这里tab也可以直接用string的形式

<a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
      {{ pane.content }}
    </a-tab-pane>
  </a-tabs>

只有卡片样式的页签支持新增和关闭选项。使用 :closable="false" 禁止关闭。

Tabs API

参数	说明	类型	默认值
type	页签的基本样式，可选 `line`、`card` `editable-card` 类型	string	'line'
activeKey(v-model)	当前激活 tab 面板的 key	string	无
hideAdd	是否隐藏加号图标，在 `type="editable-card"` 时有效	boolean	false
tabBarStyle	tab bar 的样式对象	object	要填入的是一个对象,例如:{ background: '#FAFBFD' }
tabBarExtraContent	tab bar 上额外的元素	slot	无 (想要用就按照正常的slot去使用即可)

editable-card类型 API

参数	说明	类型	默认值
hideAdd	是否隐藏加号图标，在 `type="editable-card"` 时有效	boolean	false
edit	新增和删除页签的回调，在 `type="editable-card"` 时有效	(targetKey, action): void

Tabs.TabPane API

参数	说明	类型	默认值
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	无
tab	选项卡头显示文字	string	slot(这里可以是slot)	无

AntDesignVue（1） | 青训营笔记

引入

全局引入

按需引入

踩坑:

但是发现进行按需引入找不到对应的文件:

没有图标

引入图标

常用组件

a-card(卡片)

message使用

a-tabs

a-form(表单)

何时使用

排列方式

表单域

API

表单验证

关于字段的验证

a-upload

a-space

何时使用

a-dropdown

a-tabs

例子

Tabs API

editable-card类型 API

Tabs.TabPane API