认识 AntDesignVue3

Data: 2020-07-06 04:51:38Form: JournalClick: 9

# 认识 AntDesignVue3

# 一、介绍

官网：https://ant.design/index-cnopen in new window
官网：https://next.antdv.com/docs/vue/introduce-cnopen in new window

# 二、安装

# 1、npm安装
npm i --save ant-design-vue@next

# 2、yarn安装
yarn add ant-design-vue@next

# 三、引入ant-design-vue

# 1、main.js 文件
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);
// productionTip 设置为 false ，可以阻止 vue 在启动时生成生产提示。开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱
app.config.productionTip = false;
app.use(Antd).mount("#app");

defineComponent 函数，只是对 setup 函数进行封装，返回 options 的对象。
defineComponent 最重要的是：在 TypeScript 下，给予了组件正确的参数类型推断。

# 四、通用组件

# 1、`Button` 按钮

<a-button></a-button>

参数	描述	类型	默认值
type	按钮类型	primary、ghost、dashed、link、text、default	default
shape	按钮形状	circle、round
size	按钮大小	large、middle、small
loading	按钮载入状态	boolean、{ delay: number }	false
disabled	禁用按钮	boolean	false
danger	危险按钮	boolean	false
ghost	镂空(幽灵)属性，使按钮背景透明	boolean	false
block	最大化按钮	boolean	false
click	点击按钮事件

<template>
    <div>
        # 1、type 按钮类型
        <a-button type="default">默认按钮</a-button>
        <a-button type="primary">主按钮</a-button>
        <a-button type="dashed">虚线按钮</a-button>
        <a-button type="text">文本按钮</a-button>
        <a-button type="link">链接按钮</a-button>
        <a-button type="ghost">未知</a-button>
        <hr />

        # 2、shape 按钮形状
        <a-button type="primary" shape="circle">圆形按钮</a-button>
        <a-button type="primary" shape="round">四角圆形按钮</a-button>
        <hr />

        # 3、size 按钮大小
        <a-button type="primary" size="large">大按钮</a-button>
        <a-button type="primary" size="middle">默认按钮</a-button>
        <a-button type="primary" size="small">小按钮</a-button>
        <hr />

        # 4、4种按钮状态
        <a-button type="primary" loading>loading 加载按钮</a-button>
        <a-button type="primary" disabled>禁用按钮</a-button>
        <a-button type="primary" danger>危险按钮</a-button>
        <a-button type="primary" ghost>镂空(幽灵)</a-button>

        # 5、最大化
        <a-button type="primary" block>最大化按钮</a-button>
        <hr />
        
        // 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled

        # 6、点击跳转，跟a标签一样
        <a-button type="primary" href="https://www.php.cn">跳转到php中文网</a-button>
        <a-button type="primary" href="https://www.php.cn" target="_blank">跳转到php中文网</a-button>
        <hr />

        # 7、按钮click事件
        <a-button type="primary" @click="add()">添加</a-button>
    </div>
</template>
<script>
export default {
    setup() {
        function add() {
            console.log("按钮事件");
        }
        return {
            add
        };
    }
};
</script>

# 2、`Icon` 图标

参数	描述	类型	默认值
style	设置图标的样式	CSSProperties
spin	旋转动画	boolean	false
rotate	图标旋转角度	number
twoToneColor	设置双色图标的主要颜色	string (十六进制颜色)

# 1、安装
npm install --save @ant-design/icons-vue 或 yarn add @ant-design/icons-vue

# 2、使用icon
<template>
    <div style="margin: 50px">
        // 2.2、使用图标标签
        <HomeOutlined />
        <SettingFilled />
    </div>
</template>
<script>
// 2.1、引入@ant-design/icons-vue，每个图标都要使用
import {
    HomeOutlined,
    SettingFilled
} from "@ant-design/icons-vue";
export default ({
    components: {
        HomeOutlined,
        SettingFilled
    }
});
</script>

# 3、style 图标样式，fontSize和color，数据类型：对象
<HomeOutlined :style="{fontSize:'24px',color:'red'}" />

# 4、spin 旋转，数据类型：布尔值
<HomeOutlined :style="{fontSize:'24px',color:'red'}" spin />

# 5、rotate 旋转角度，数据类型：数字
<HomeOutlined :style="{fontSize:'24px',color:'red'}" spin rotate="180" />

# 6、twoToneColor 设置双色图标的主要颜色，找个双色图标来操作
<CheckCircleTwoTone two-tone-color="#eb2f96" />

# 3、文字排版

文本 Text：<a-typography-text></a-typography-text>

参数	描述	类型	默认值
type	文本类型	secondary、success、warnin、danger
disabled	禁用文本	boolean	false
mark	添加标记样式	boolean	false
code	添加代码样式	boolean	false
keyboard	添加键盘样式	boolean	false
underline	添加下划线样式	boolean	false
delete	删除线样式	boolean	false
strong	是否加粗	boolean	false
copyable	是否可拷贝，为对象时可进行各种自定义	boolean \| copyable	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean \| copyable	false
ellipsis	自动溢出省略	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string

<template>
    # a-space 间距
    <a-space direction="vertical">
        # 1、a-typography-text 普通文本
        <a-typography-text>文本</a-typography-text>
        # 2、type 文本类型：secondary(次要的文本)、success(成功)、warning(警告)、danger(危险)
        <a-typography-text type="secondary">灰色，次要的文本</a-typography-text>
        <a-typography-text type="success">绿色文本</a-typography-text>
        <a-typography-text type="warning">橙色文本</a-typography-text>
        <a-typography-text type="danger">红色文本</a-typography-text>
        # 3、多样文本
        <a-typography-text disabled>禁用文本</a-typography-text>
        <a-typography-text mark>标记文本</a-typography-text>
        <a-typography-text code>代码样式</a-typography-text>
        <a-typography-text keyboard>键盘样式：ctrl + c</a-typography-text>
        <a-typography-text underline>下划线文本</a-typography-text>
        <a-typography-text delete>删除线文本</a-typography-text>
        <a-typography-text strong>加粗文本</a-typography-text>
        # 4、copyable 快捷拷贝文本
        <a-typography-text copyable>快捷拷贝文本</a-typography-text>
        # 4.1、参数为对象：有三个配置项
        <a-typography-text :copyable="{
            text: '需要拷贝的文本',
            tooltip: false,
            onCopy: copySuccess
        }">快捷拷贝文本</a-typography-text>
        
        # 5、ellipsis 自动溢出省略，需要使用 content作为内容，还要设置宽度
        <a-typography-text ellipsis content="溢出的文本，用...省略" style="width: 100px"></a-typography-text>
        
        # 6、editable 文本可编辑，需要使用 content作为内容
        <a-typography-text editable v-model:content="text"></a-typography-text>
    </a-space>
</template>
<script>
import { ref } from "vue";
export default {
    setup() {
        const copySuccess = () => {
            console.log("拷贝成功");
        };
        return {
            copySuccess,
            text: ref("可编辑的文本"),
        };
    }
};
</script>

标题 Titile：<a-typography-title></a-typography-title>

参数	描述	类型	默认值
level	等级：1、2、3、4、5，对应h1、h2、h3、h4、h5	number: 1, 2, 3, 4, 5	1
type	颜色：secondary、success、warning、danger	secondary 、success、warning、danger
disabled	禁用文本	boolean	false
underline	下划线	boolean	false
delete	删除线	boolean	false
code	代码样式	boolean	false
copyable	是否可拷贝，为对象时可进行各种自定义	boolean、copyable	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean、copyable	false
ellipsis	自动溢出省略	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string

<template>
    <div>
        # 1、a-typography-title 组件标签，标题：默认h1
        <a-typography-title>h1标题</a-typography-title>
        <a-typography-title :level="2">h2标题</a-typography-title>
        <a-typography-title :level="3">h3标题</a-typography-title>
        <a-typography-title :level="4">h4标题</a-typography-title>
        <a-typography-title :level="5">h5标题</a-typography-title>
          
        # 2、type 文本类型：secondary(灰色) success(绿色) warning(黄色) danger(红色)
        <a-typography-title type="secondary">h1标题</a-typography-title>
        <a-typography-title type="success">h1标题</a-typography-title>
        <a-typography-title type="warning">h1标题</a-typography-title>
        <a-typography-title type="danger">h1标题</a-typography-title>
        
        # 3、disabled 禁用文本，不能复制
        <a-typography-title disabled>h1标题 禁用文本</a-typography-title>
        # 4、underline 添加下划线样式
        <a-typography-title underline>h1标题 下划线文本</a-typography-title>
        # 5、delete 添加删除线样式
        <a-typography-title delete>h1标题 删除线文本</a-typography-title>
        # 6、code 代码样式
        <a-typography-title code>h1标题 代码样式</a-typography-title>
        
        # 7、copyable 允许复制
        <a-typography-title copyable>h1标题 快捷拷贝文本</a-typography-title>
        # 7.1、参数为对象：有三个配置项
        <a-typography-title :copyable="{
            text: '需要拷贝的文本',
            tooltip: false,
            onCopy: copySuccess
        }">h1标题 快捷拷贝文本</a-typography-title>
          
        # 8、ellipsis 自动溢出省略，需要使用 content 作为内容，还要设置宽度
        <a-typography-title ellipsis content="溢出的文本，用...省略" style="width: 200px"></a-typography-title>
        
        # 9、editable 文本可编辑，需要使用 content作为内容
        <a-typography-title editable v-model:content="text"></a-typography-title>
        
    </div>
</template>

段落 Paragraph：<a-typography-paragraph></a-typography-paragraph>

参数	描述	类型	默认值
type	颜色：secondary、success、warning、danger	secondary 、success、warning、danger
disabled	禁用文本	boolean	false
underline	下划线	boolean	false
delete	删除线	boolean	false
code	代码样式	boolean	false
copyable	是否可拷贝，为对象时可进行各种自定义	boolean、copyable	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean、copyable	false
ellipsis	自动溢出省略	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string

<template>
    <div>          
        # 2、type 文本类型：secondary(灰色) success(绿色) warning(黄色) danger(红色)
        <a-typography-paragraph type="secondary">灰色</a-typography-paragraph>
        <a-typography-paragraph type="success">绿色</a-typography-paragraph>
        <a-typography-paragraph type="warning">黄色</a-typography-paragraph>
        <a-typography-paragraph type="danger">红色</a-typography-paragraph>
        
        # 3、disabled 禁用文本，不能复制
        <a-typography-paragraph disabled>禁用文本</a-typography-paragraph>
        # 4、underline 添加下划线样式
        <a-typography-paragraph underline>下划线文本</a-typography-paragraph>
        # 5、delete 添加删除线样式
        <a-typography-paragraph delete>删除线文本</a-typography-paragraph>
        # 6、code 代码样式
        <a-typography-paragraph code>代码样式</a-typography-paragraph>
        
        # 7、copyable 允许复制
        <a-typography-paragraph copyable>快捷拷贝文本</a-typography-paragraph>
        # 7.1、参数为对象：有三个配置项
        <a-typography-paragraph :copyable="{
            text: '需要拷贝的文本',
            tooltip: false,
            onCopy: copySuccess
        }">快捷拷贝文本</a-typography-paragraph>
          
        # 8、ellipsis 自动溢出省略，需要使用 content 作为内容，还要设置宽度
        <a-typography-paragraph ellipsis content="溢出的文本，用...省略" style="width: 200px"></a-typography-paragraph>
        
        # 9、editable 文本可编辑，需要使用 content作为内容
        <a-typography-paragraph editable v-model:content="text"></a-typography-paragraph>
    </div>
</template>

我是 PHP 程序员

认识 AntDesignVue3

# 认识 AntDesignVue3

# 一、介绍

# 二、安装

# 三、引入ant-design-vue

# 四、通用组件

# 1、Button 按钮

# 2、Icon 图标

# 3、文字排版

# 1、`Button` 按钮

# 2、`Icon` 图标