ant组件库总结

ant,用于PC端或者移动端的组件开发，提高开发效率。

https://www.antdv.com/docs/vue/introduce-cn/

但在移动端开发的时候：

注意点：

1.要使用flex布局，不要使用绝对布局，会导致布局错位。

2.要使用rem或者vw、vh这种可以自适应的单位，配合一些插件一起使用，最好不要

使用px这种绝对单位。

3.转换插件，px2vw和px2rem,分别用来转换vw和rem。

ant的使用

下载

npm install ant-design-vue --save

main.js里引入

是Antd不是其他的名字，使用其他名字也有可能会报错

这种是全局引入的方式，也有局部引入的方式，可以在官网上看看

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

这时就可以开始使用ant组件库了

ant,上面是例子，下面是使用说明

基本用法：上面是HTML模板，下面是JS逻辑部分

我们从Tab标签页来看，

组件形式都是

<a-tabs></a-tabs>

使用说明中的API怎么使用呢？

一般这些API都是加在标签上面的

1.比如属性，下面这个例子就用了两个属性，模式为属性=" ",但这也要看类型,hideAdd是boolean类型所以没有跟，在这里为true。

<a-tabs hideAdd type="editable-card"></a-tabs>

2.比如参数和事件

<a-tabs defaultActiveKey="1" @change="callback"></a-tabs>

 defaultActiveKey="1"是Tabs的参数

@change="callback"，前面的change是组件库帮我们定义好的事件名(我们加上@，点击)，callback是我们自己定义的函数，

方法写在methods中

3.Tabs.TabPane中就是一些标签的说明

4.如果要加入图标或者自定义事件，这时要使用到slot插槽，如下

tab是自己写的，里面内容是自定义的

<span slot="tab">
        <a-icon type="apple" />
        Tab 1
</span>

5.数据如果是写在data中，就要写上v-bind:(:),不然是直接写属性=" ";

<template>
  <div>
    <a-tabs defaultActiveKey="2" :size="size">
    </a-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        size: 'small',
      };
    },
  };
</script>