Python私教张大鹏 Vue3整合AntDesignVue之Flex布局组件

2024-06-07 16:04
文章标签 javascript python 组件 布局 vue vue3 整合 frontend flex antdesignvue 大鹏 私教张

本文主要是介绍Python私教张大鹏 Vue3整合AntDesignVue之Flex布局组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Divider 分割线

案例：分割线

核心代码：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<a-divider />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi istaprobare, quae sunt a te dicta? Refert tamen, quo modo.
</p>

vue3示例：

<script setup="">
</script>
<template><a-typography><a-typography-title>新闻纵深｜蔚县石头如何织出月背中国红</a-typography-title><a-typography-paragraph>6月4日，嫦娥六号完成月背“挖土”，携带的由玄武岩纤维制成的“石头版”五星红旗，在月球背面成功展开。阳光照射下，五星红旗光彩夺目，闪耀着鲜艳的中国红。</a-typography-paragraph><a-divider/><a-typography-paragraph>令很多人没想到的是，织成这面国旗的原材料玄武岩，竟然来自河北蔚县。</a-typography-paragraph></a-typography>
</template>
<style scoped></style>

在这里插入图片描述

案例：带文本的分割线

核心代码：

<a-divider>With Text</a-divider>

vue3示例：

<script setup="">
</script>
<template><div class="flex items-center justify-center p-8 bg-indigo-50"><div class="container bg-purple-200 min-h-96"><a-typography><a-typography-title>新闻纵深｜蔚县石头如何织出月背中国红</a-typography-title><a-typography-paragraph>6月4日，嫦娥六号完成月背“挖土”，携带的由玄武岩纤维制成的“石头版”五星红旗，在月球背面成功展开。阳光照射下，五星红旗光彩夺目，闪耀着鲜艳的中国红。</a-typography-paragraph><a-divider>带文本的分割线</a-divider><a-typography-paragraph>令很多人没想到的是，织成这面国旗的原材料玄武岩，竟然来自河北蔚县。</a-typography-paragraph></a-typography></div></div>
</template>
<style scoped></style>

在这里插入图片描述

案例：虚线分割线

核心代码：

<a-divider dashed />

vue3示例：

<script setup="">
</script>
<template>
<div class="flex bg-indigo-50 p-8"><a-typography><a-typography-paragraph>段落1</a-typography-paragraph><a-divider dashed class="border-red-500"/><a-typography-paragraph>段落2</a-typography-paragraph></a-typography>
</div>
</template>
<style scoped></style>

在这里插入图片描述

案例：垂直分割线

核心代码：

<div>Text<a-divider type="vertical" /><a href="#">Link</a><a-divider type="vertical" /><a href="#">Link</a>
</div>

vue3示例：

<script setup="">
</script>
<template><a-button type="link" href="#">百度</a-button><a-divider type="vertical" class="border-red-500"/><a-button type="link" href="#">搜狗</a-button><a-divider type="vertical" class="border-red-500"/><a-button type="link" href="#">火狐</a-button>
</template>
<style scoped></style>

在这里插入图片描述

Flex 弹性布局

何时使用

  • 适合设置元素之间的间距。
  • 适合设置各种水平、垂直对齐方式。

与 Space 组件的区别

  • Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
  • Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。

案例：flex 水平方向

核心代码：

<a-flex :vertical="value === 'vertical'"><divv-for="(item, index) in new Array(4)":key="item":style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"/>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex><div class="h-12 bg-red-300 flex-1"></div><div class="h-12 bg-red-300 flex-1 mx-12"></div><div class="h-12 bg-red-300 flex-1"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：flex 垂直方向

核心代码：

<a-flex :vertical="value === 'vertical'"><divv-for="(item, index) in new Array(4)":key="item":style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"/>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex vertical><div class="h-12 bg-red-300 min-w-36"></div><div class="h-12 bg-red-300 min-w-36 my-12"></div><div class="h-12 bg-red-300 min-w-36"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

综合案例：动态切换 flex 方向

核心代码：

<template><a-flex gap="middle" vertical><a-radio-group v-model:value="value"><a-radio value="horizontal">horizontal</a-radio><a-radio value="vertical">vertical</a-radio></a-radio-group><a-flex :vertical="value === 'vertical'"><divv-for="(item, index) in new Array(4)":key="item":style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"/></a-flex></a-flex>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { CSSProperties } from 'vue';
const value = ref('horizontal');
const baseStyle: CSSProperties = {width: '25%',height: '54px',
};
</script>

vue3示例：

<script setup="">
import {ref} from "vue";// flex 的方向：vertical表示垂直，horizontal表示水平
const flexDirection = ref("vertical")
</script>
<template><div class="w-screen p-8 bg-indigo-50"><!--gap：small，middle，large--><a-flex gap="middle" vertical><!--  展示按钮组 --><a-radio-group v-model:value="flexDirection"><a-radio value="horizontal">水平</a-radio><a-radio value="vertical">垂直</a-radio></a-radio-group><!-- 布局容器 --><a-flex :vertical="flexDirection === 'vertical'" gap="middle"><divv-for="(item,index) in new Array(4)":key="index"class="w-1/4 h-32 bg-teal-300"></div></a-flex></a-flex></div>
</template>
<style scoped></style>

在这里插入图片描述

综合案例：动态样式

核心代码：

const baseStyle: CSSProperties = {width: '25%',height: '54px',
};
:style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"

vue3示例：

<script setup="">
import {ref} from "vue";const flexDirection = ref("horizontal")
const baseStyle = {width:"25%",height:"54px",
}
</script>
<template><div class="w-screen p-8 bg-indigo-50"><a-flex gap="middle" vertical><a-radio-group v-model:value="flexDirection"><a-radio value="horizontal">水平</a-radio><a-radio value="vertical">垂直</a-radio></a-radio-group><a-flex gap="middle" :vertical="flexDirection === 'vertical'"><divv-for="i in 4":key="i":style="{...baseStyle, background: `${i % 2 ? '#111222' : '#abcabc'}`}"></div></a-flex></a-flex></div>
</template>
<style scoped></style>

在这里插入图片描述

案例：水平左对齐

核心代码：

const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="p-8 bg-indigo-50 min-h-72" gap="middle" justify="flex-start"><div v-for="i in 4" :key="i" class="h-12 w-32 bg-teal-300"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：水平右对齐

核心代码：

const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="bg-indigo-50 h-72 p-8" gap="middle" justify="flex-end"><div v-for="i in 4" :key="i" class="h-12 w-32 bg-teal-300"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：水平居中对齐

核心代码：

const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="bg-indigo-50 p-8 h-72" justify="center" gap="middle"><divv-for="i in 4":key="i"class="w-32 h-12 bg-teal-300"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：水平空格填充

核心代码：

const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="h-72 bg-indigo-50 p-8" justify="space-between" gap="middle"><divv-for="i in 6":key="i"class="w-32 h-12 bg-red-500"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：水平空格环绕

核心代码：

const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template><a-flex class="h-32 bg-indigo-50" justify="space-between" gap="middle"><divv-for="i in 6":key="i"class="w-32 h-12 bg-red-500"></div></a-flex><a-divider/><a-flex class="h-32 bg-indigo-50" justify="space-around" gap="middle"><divv-for="i in 6":key="i"class="w-32 h-12 bg-red-500"></div></a-flex><a-divider/><a-flex class="h-32 bg-indigo-50" justify="space-evenly" gap="middle"><divv-for="i in 6":key="i"class="w-32 h-12 bg-red-500"></div></a-flex></template>
<style scoped></style>

在这里插入图片描述

案例：垂直上对齐

核心代码：

const alignOptions = reactive<FlexProps['align'][]>(['flex-start', 'center', 'flex-end']);<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="bg-indigo-50 p-8 space-y-3 h-96" vertical align="flex-start"><divv-for="i in 3":key="i"class="w-72 h-16 bg-red-700">{{i}}</div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：垂直中对齐

核心代码：

const alignOptions = reactive<FlexProps['align'][]>(['flex-start', 'center', 'flex-end']);<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template>
<a-flex class="bg-indigo-50 p-8 h-96" gap="middle" justify="center" align="center" vertical><divv-for="i in 3":key="i"class="w-72 h-12 bg-indigo-500"></div>
</a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：垂直下对齐

核心代码：

const alignOptions = reactive<FlexProps['align'][]>(['flex-start', 'center', 'flex-end']);<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button>
</a-flex>

vue3示例：

<script setup="">
</script>
<template><a-flex class="bg-indigo-50 p-8 h-48" gap="middle" justify="flex-end" align="flex-end" vertical><divv-for="i in 3":key="i"class="w-72 h-12 bg-indigo-500"></div></a-flex><a-divider/><a-flex class="bg-indigo-50 p-8 h-48" gap="middle" align="flex-end"><divv-for="i in 3":key="i"class="w-72 h-12 bg-indigo-500"></div></a-flex>
</template>
<style scoped></style>

在这里插入图片描述

综合案例：动态切换对齐方式

核心代码：

<template><a-flex gap="middle" align="start" vertical><p>Select justify :</p><a-segmented v-model:value="justify" :options="justifyOptions" /><p>Select align :</p><a-segmented v-model:value="alignItems" :options="alignOptions" /><a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems"><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button><a-button type="primary">Primary</a-button></a-flex></a-flex>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { CSSProperties } from 'vue';
import type { FlexProps } from 'ant-design-vue';
const justifyOptions = reactive<FlexProps['justify'][]>(['flex-start','center','flex-end','space-between','space-around','space-evenly',
]);const alignOptions = reactive<FlexProps['align'][]>(['flex-start', 'center', 'flex-end']);
const justify = ref(justifyOptions[0]);
const alignItems = ref(alignOptions[0]);
const boxStyle: CSSProperties = {width: '100%',height: '120px',borderRadius: '6px',border: '1px solid #40a9ff',
};
</script>

vue3示例：

<script setup="">
import {ref} from "vue";const justifyOptions = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"]
const justify = ref(justifyOptions[0])const alignOptions = ["flex-start", "center", "flex-end"]
const align = ref(alignOptions[0])</script>
<template><a-flex gap="middle" align="start" vertical><p>选择水平对齐方式</p><a-segmented v-model:value="justify" :options="justifyOptions"/><p>选择垂直对齐方式</p><a-segmented v-model:value="align" :options="alignOptions"/><a-divider>渲染效果</a-divider><a-flex class="w-screen h-48 bg-indigo-50 p-8" gap="middle" :justify="justify" :align="align"><divv-for="i in 3":key="i"class="w-72 h-12 bg-indigo-500"></div></a-flex></a-flex>
</template>
<style scoped></style>

在这里插入图片描述

综合案例：动态设置间隙

使用 gap 设置元素之间的间距，预设了 small、middle、large 三种尺寸，也可以自定义间距。

核心代码：

<template><a-flex gap="middle" vertical><a-radio-group v-model:value="gapSize"><a-radio value="small">small</a-radio><a-radio value="middle">middle</a-radio><a-radio value="large">large</a-radio><a-radio value="customize">customize</a-radio></a-radio-group><template v-if="gapSize === 'customize'"><a-slider v-model:value="customGapSize" /></template><a-flex :gap="gapSize !== 'customize' ? gapSize : customGapSize"><a-button type="primary">Primary</a-button><a-button>Default</a-button><a-button type="dashed">Dashed</a-button><a-button type="link">Link</a-button></a-flex></a-flex>
</template>
<script setup lang="ts">
import { ref } from 'vue';type SizeType = 'small' | 'middle' | 'large' | undefined;const gapSize = ref<SizeType | 'customize'>('small');const customGapSize = ref<number>(0);
</script>

vue3示例：

<script setup="">import {ref} from "vue";const gapOptions = ["small", "middle", "large", "33"]
const gap = ref(gapOptions[0])</script>
<template><p>请选择间隙</p><a-segmented v-model:value="gap" :options="gapOptions"/><a-divider>渲染效果</a-divider><a-flex class="bg-indigo-50 p-8 h-48" :gap="gap"><divv-for="i in 3":key="i"class="w-72 h-12 bg-indigo-500"></div></a-flex>
</template>
<style scoped></style>

在这里插入图片描述

案例：自动换行

核心代码：

<template><a-flex wrap="wrap" gap="small"><a-button v-for="item in new Array(24)" :key="item" type="primary">Button</a-button></a-flex>
</template>

vue3示例：

<script setup="">
</script>
<template><a-flex class="bg-indigo-50 p-8" wrap="wrap" gap="middle" justify="space-between"><divv-for="i in 60"class="h-12 w-32 bg-indigo-500"></div></a-flex>
</template>
<style scoped></style>

在这里插入图片描述

这篇关于Python私教张大鹏 Vue3整合AntDesignVue之Flex布局组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1039642。

相关文章

Python使用自带的base64库进行base64编码和解码

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
Python如何使用__slots__实现节省内存和性能优化

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景：内存吃得满满的类__slots__：你的内存管理小助手举个大概的例子：看看效果如何？1.
阅读更多...
Python+PyQt5实现多屏幕协同播放功能

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述：突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专
阅读更多...
Python中随机休眠技术原理与应用详解

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2
阅读更多...
Python实现无痛修改第三方库源码的方法详解

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很
阅读更多...
一文详解如何从零构建Spring Boot Starter并实现整合

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,：本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化（
阅读更多...
python+opencv处理颜色之将目标颜色转换实例代码

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,：本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV： 关于颜色总是要转HSV的掩膜再标注总结 目标：将红色的部分滤
阅读更多...
Python 中的异步与同步深度解析(实践记录)

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步：深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步
阅读更多...
Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2