• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

认识 AntDesignVue3

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

# 认识 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、defaultdefault
shape按钮形状circle、round
size按钮大小large、middle、small
loading按钮载入状态boolean、{ delay: number }false
disabled禁用按钮booleanfalse
danger危险按钮booleanfalse
ghost镂空(幽灵)属性，使按钮背景透明booleanfalse
block最大化按钮booleanfalse
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旋转动画booleanfalse
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禁用文本booleanfalse
mark添加标记样式booleanfalse
code添加代码样式booleanfalse
keyboard添加键盘样式booleanfalse
underline添加下划线样式booleanfalse
delete删除线样式booleanfalse
strong是否加粗booleanfalse
copyable是否可拷贝，为对象时可进行各种自定义boolean | copyablefalse
editable是否可编辑，为对象时可对编辑进行控制boolean | copyablefalse
ellipsis自动溢出省略booleanfalse
content(v-model)当使用 ellipsis 或 editable 时，使用 content 代替 childrenstring
<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、h5number: 1, 2, 3, 4, 51
type颜色：secondary、success、warning、dangersecondary 、success、warning、danger
disabled禁用文本booleanfalse
underline下划线booleanfalse
delete删除线booleanfalse
code代码样式booleanfalse
copyable是否可拷贝，为对象时可进行各种自定义boolean、copyablefalse
editable是否可编辑，为对象时可对编辑进行控制boolean、copyablefalse
ellipsis自动溢出省略booleanfalse
content(v-model)当使用 ellipsis 或 editable 时，使用 content 代替 childrenstring
<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、dangersecondary 、success、warning、danger
disabled禁用文本booleanfalse
underline下划线booleanfalse
delete删除线booleanfalse
code代码样式booleanfalse
copyable是否可拷贝，为对象时可进行各种自定义boolean、copyablefalse
editable是否可编辑，为对象时可对编辑进行控制boolean、copyablefalse
ellipsis自动溢出省略booleanfalse
content(v-model)当使用 ellipsis 或 editable 时，使用 content 代替 childrenstring
<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>
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>