Python私教张大鹏 Vue3整合AntDesignVue之Dropdown 下拉菜单

news2024/11/27 3:49:15

基本用法

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";
</script>
<template>
  <a-dropdown>
    <a href="" @click.prevent>
      下拉菜单
      <DownOutlined/>
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

右键菜单

默认是移入触发菜单，可以点击鼠标右键触发。

核心代码：

<template>
  <a-dropdown :trigger="['contextmenu']">
    <div
      :style="{
        textAlign: 'center',
        background: '#f7f7f7',
        height: '200px',
        lineHeight: '200px',
        color: '#777',
      }"
    >
      Right Click on here
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";
</script>
<template>
  <a-dropdown  :trigger="['contextmenu']">
    <div class="w-72 h-32 bg-indigo-500"></div>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

案例：分割线和不可用菜单项

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item key="0">
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
            1st menu item
          </a>
        </a-menu-item>
        <a-menu-item key="1">
          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
            2nd menu item
          </a>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3" disabled>3rd menu item（disabled）</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

如何实现分割线：

<a-menu-divider />

如何实现禁用菜单：

<a-menu-item key="3" disabled>

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";
</script>
<template>
  <a-dropdown>
    <a href="#" @click.prevent>
      下拉菜单
      <DownOutlined/>
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-divider/>
        <a-menu-item disabled>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

案例：触发事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me, Click menu item
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu @click="onClick">
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';

const onClick: MenuProps['onClick'] = ({ key }) => {
  console.log(`Click on item ${key}`);
};
</script>

如何实现下拉菜单点击事件？

  • 1、给menu-item加上key：<a-menu-item key="1">
  • 2、给menu加上点击事件：<a-menu @click="onClick">
  • 3、实现点击事件：const onClick: MenuProps['onClick'] = ({ key }) => {

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";

const onClick = ({key}) => {
  alert(key)
}
</script>
<template>
  <a-dropdown>
    <a href="#" @click.prevent>
      下拉菜单
      <DownOutlined/>
    </a>
    <template #overlay>
      <a-menu @click="onClick">
        <a-menu-item key="k1">
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item key="k2">
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-divider/>
        <a-menu-item disabled>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

案例：菜单弹出位置

核心代码：

<template>
  <div id="components-dropdown-demo-placement">
    <template v-for="(placement, index) in placements" :key="placement">
      <a-dropdown :placement="placement">
        <a-button>{{ placement }}</a-button>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                1st menu item
              </a>
            </a-menu-item>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                2nd menu item
              </a>
            </a-menu-item>
            <a-menu-item>
              <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                3rd menu item
              </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <br v-if="index === 2" />
    </template>
  </div>
</template>
<script lang="ts" setup>
import type { DropdownProps } from 'ant-design-vue';
const placements = [
  'bottomLeft',
  'bottom',
  'bottomRight',
  'topLeft',
  'top',
  'topRight',
] as DropdownProps['placement'][];
</script>
<style scoped>
#components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

如何控制下拉菜单弹出位置？

<a-dropdown :placement="placement">

都支持哪些位置？

const placements = [
  'bottomLeft',
  'bottom',
  'bottomRight',
  'topLeft',
  'top',
  'topRight',
] as DropdownProps['placement'][];

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";

const onClick = ({key}) => {
  alert(key)
}
</script>
<template>
<div class="bg-indigo-50 h-72 w-32 flex items-center justify-center">
  <a-dropdown placement="top">
    <a href="#" @click.prevent>
      下拉菜单
      <DownOutlined/>
    </a>
    <template #overlay>
      <a-menu @click="onClick">
        <a-menu-item key="k1">
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item key="k2">
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-divider/>
        <a-menu-item disabled>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</div>
</template>

在这里插入图片描述

案例：多级菜单

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Cascading menu
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>1st menu item</a-menu-item>
        <a-menu-item>2nd menu item</a-menu-item>
        <a-sub-menu key="sub1" title="sub menu">
          <a-menu-item>3rd menu item</a-menu-item>
          <a-menu-item>4th menu item</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" title="disabled sub menu" disabled>
          <a-menu-item>5d menu item</a-menu-item>
          <a-menu-item>6th menu item</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

如何实现多级菜单：

  • 一级菜单：<a-menu-item>1st menu item</a-menu-item>
  • 二级菜单父类：<a-sub-menu key="sub1" title="sub menu">
    • 二级菜单子类：<a-menu-item>3rd menu item</a-menu-item>

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";

const onClick = ({key}) => {
  alert(key)
}
</script>
<template>
  <div class="bg-indigo-50 h-72 w-32 flex items-center justify-center">
    <a-dropdown placement="top">
      <a href="#" @click.prevent>
        下拉菜单
        <DownOutlined/>
      </a>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item key="k1">
            <a href="#">选项1</a>
          </a-menu-item>
          <a-sub-menu key="k2" title="选项2">
            <a-menu-item key="k21">
              <a href="#">选项2-1</a>
            </a-menu-item>
            <a-menu-item key="k22">
              <a href="#">选项2-2</a>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-divider/>
          <a-menu-item disabled>
            <a href="#">选项3</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

在这里插入图片描述

案例：加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

核心代码：

<template>
  <a-space direction="vertical">
    <a-dropdown-button type="primary" loading>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button type="primary" size="small" loading>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button type="primary" :loading="loading1" @click="enterLoading1">
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      Submit
    </a-dropdown-button>
    <a-dropdown-button :loading="loading2" @click="enterLoading2">
      Submit
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">Submit and continue</a-menu-item>
        </a-menu>
      </template>
      <template #icon><DownOutlined /></template>
    </a-dropdown-button>
  </a-space>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
const loading1 = ref(false);
const loading2 = ref(false);
const enterLoading = (loading: Ref<boolean>) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 6000);
};
function enterLoading1() {
  enterLoading(loading1);
}
function enterLoading2() {
  enterLoading(loading2);
}
</script>

如何实现加载中状态：<a-dropdown-button type="primary" loading>

如何通过事件实现加载中状态：<a-dropdown-button :loading="loading2" @click="enterLoading2">

const enterLoading = (loading: Ref<boolean>) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 6000);
};

function enterLoading2() {
  enterLoading(loading2);
}

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";

const onClick = ({key}) => {
  alert(key)
}
</script>
<template>
  <div class="bg-indigo-50 h-72 w-72 flex items-center justify-center">
    <a-dropdown-button placement="top" loading>
      <a href="#" @click.prevent>
        下拉菜单
        <DownOutlined/>
      </a>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item key="k1">
            <a href="#">选项1</a>
          </a-menu-item>
          <a-sub-menu key="k2" title="选项2">
            <a-menu-item key="k21">
              <a href="#">选项2-1</a>
            </a-menu-item>
            <a-menu-item key="k22">
              <a href="#">选项2-2</a>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-divider/>
          <a-menu-item disabled>
            <a href="#">选项3</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>
  </div>
</template>

在这里插入图片描述

案例：控制加载中状态

如何通过事件实现加载中状态：<a-dropdown-button :loading="loading2" @click="enterLoading2">

const enterLoading = (loading: Ref<boolean>) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 6000);
};

function enterLoading2() {
  enterLoading(loading2);
}

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";
import {ref} from "vue";

const loading = ref(false)
const onClick = ({key}) => {
  alert(key)
}
const enterLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>
<template>
  <div class="bg-indigo-50 h-72 w-72 flex items-center justify-center">
    <a-dropdown-button placement="top" :loading="loading" @click="enterLoading">
      <a href="#" @click.prevent>
        下拉菜单
        <DownOutlined/>
      </a>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item key="k1">
            <a href="#">选项1</a>
          </a-menu-item>
          <a-sub-menu key="k2" title="选项2">
            <a-menu-item key="k21">
              <a href="#">选项2-1</a>
            </a-menu-item>
            <a-menu-item key="k22">
              <a href="#">选项2-2</a>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-divider/>
          <a-menu-item disabled>
            <a href="#">选项3</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>
  </div>
</template>

在这里插入图片描述

属性

参数说明类型默认值
align该值将合并到 placement 的配置中，设置参考 dom-alignObject-
arrow下拉框箭头是否显示boolean | { pointAtCenter: boolean }false3.3.0
destroyPopupOnHide关闭后是否销毁 Dropdownbooleanfalse3.0
disabled菜单是否禁用boolean-
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。Function(triggerNode)() => document.body
overlay(v-slot)菜单Menu-
overlayClassName下拉根元素的类名称string-
overlayStyle下拉根元素的样式object-
placement菜单弹出位置bottomLeftbottombottomRight
trigger触发下拉的行为, 移动端不支持 hoverArray<clickhovercontextmenu>
open(v-model)菜单是否显示boolean-

事件

事件名称说明回调参数版本
openChange菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发function(open)4.0

dropdown-button 属性

参数说明类型默认值版本
disabled菜单是否禁用boolean-
icon右侧的 iconVNode | slot-1.5.0
loading设置按钮载入状态boolean | { delay: number }false3.0
overlay(v-slot)菜单Menu-
placement菜单弹出位置bottomLeftbottombottomRight
size按钮大小，和 Button 一致string‘default’
trigger触发下拉的行为Array<clickhovercontextmenu>
type按钮类型，和 Button 一致string‘default’
open(v-model)菜单是否显示boolean-

dropdown-button 事件

事件名称说明回调参数版本
click点击左侧按钮的回调，和 Button 一致Function
openChange菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发function(open)4.0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1808596.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

IIR滤波器的结构比较（Direct I and Direct II Form）

IIR滤波器的结构比较（Direct I and Direct II Form）

在 IIR 滤波器的设计和实现中&#xff0c;直接 I 型和直接 II 型结构的主要区别在于计算顺序和存储延迟项的方式。 直接I型结构 特点&#xff1a; 级联形式&#xff1a;直接I型结构的传递函数可以表示为两个级联部分&#xff1a;一个由分子系数组成的部分和一个由分母系数组…
阅读更多...
Kaggle -- Titanic - Machine Learning from Disaster

Kaggle -- Titanic - Machine Learning from Disaster

新手kaggle之旅&#xff1a;1 . 泰坦尼克号 使用一个简单的决策树进行模型构建&#xff0c;达到75.8%的准确率&#xff08;有点低&#xff0c;但是刚开始&#xff09; 完整代码如下&#xff1a; import pandas as pd import numpy as npdf pd.read_csv("train.csv&quo…
阅读更多...
队列和栈的实现

队列和栈的实现

文章目录 队列队列的定义队列常见的基本操作队列的顺序存储结构实现 栈栈的定义栈的常见基本操作栈的顺序存储实现 栈的链式存储实现 队列 队列的定义 队列&#xff08;queue&#xff09;是只允许在一端进行插入操作&#xff0c;而在另一端进行删除操作的线性表。队列是一种先…
阅读更多...
翻译《The Old New Thing》- Why do messages posted by PostThreadMessage disappear?

翻译《The Old New Thing》- Why do messages posted by PostThreadMessage disappear?

Why do messages posted by PostThreadMessage disappear? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20090930-00/?p16553 Raymond Chen 2008年09月30日 为什么 PostThreadMessage 发布的信息会消失&#xff1f; 在显示用户界面的线…
阅读更多...
【上下界分析 差分数组】798得分最高的最小轮调

【上下界分析 差分数组】798得分最高的最小轮调

本文涉及知识点 差分数组 本题同解 C算法前缀和的应用&#xff1a;798得分最高的最小轮调 LeetCode798得分最高的最小轮调 给你一个数组 nums&#xff0c;我们可以将它按一个非负整数 k 进行轮调&#xff0c;这样可以使数组变为 [nums[k], nums[k 1], … nums[nums.lengt…
阅读更多...
NetSuite精益实施 之 系统切换作业标准化

NetSuite精益实施 之 系统切换作业标准化

这个题目为近日所思&#xff0c;一直没有落笔。今天是端午假日&#xff0c;得空卸货。 标准化是精益实施的三个基础之一&#xff0c;在我们的项目实践中没有须臾忘记。在此我们不再赘述标准化为啥这么重要&#xff0c;更多来分享如何标准化。 在项目实施的各阶段中&#xff0…
阅读更多...
【漏洞复现】宏景eHR pos_dept_post SQL注入漏洞

【漏洞复现】宏景eHR pos_dept_post SQL注入漏洞

0x01 产品简介 宏景eHR人力资源管理软件是一款人力资源管理与数字化应用相融合&#xff0c;满足动态化、协同化、流程化、战略化需求的软件。 0x02 漏洞概述 宏景eHR pos_dept_post 接囗处存在SQL注入漏洞,未经过身份认证的远程攻击者利用此漏洞执行任意SQL指令&#xff0c;…
阅读更多...
每日一题——Python实现PAT乙级1019 数字黑洞（举一反三+思想解读+逐步优化）

每日一题——Python实现PAT乙级1019 数字黑洞（举一反三+思想解读+逐步优化）

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 点评代码的优缺点&#xff1a; 时间复杂度&#xff1a; 空间复杂度&#…
阅读更多...
数据结构：插入排序和希尔排序

数据结构：插入排序和希尔排序

插入排序 逆序的情况下&#xff1a; 时间复杂度&#xff1a;O(N^2) 空间复杂度&#xff1a;O(1) 顺序的情况下&#xff1a; 时间复杂度&#xff1a;O(N) 空间复杂度…
阅读更多...
【Linux系统化学习】传输层——TCP协议

【Linux系统化学习】传输层——TCP协议

目录 预备知识 全双工协议 协议缓冲区 TCP协议 TCP协议格式 六个标志位 两个问题 确认应答机制 流量控制 超时重传机制 连接管理机制 CLOSE_WAIT状态 TIME_WAIT状态 滑动窗口 拥塞控制 延迟应答 捎带应答 粘包问题 TCP的异常情况 TCP小结 TCP/UDP协议对比…
阅读更多...
首届IEEE RAS峰会，为什么大厂阿里、字节、腾讯都参加了？

首届IEEE RAS峰会，为什么大厂阿里、字节、腾讯都参加了？

"RAS in Data Centers 2024" 首届IEEE RAS&#xff08;Reliability, Availability, and Serviceability&#xff0c;即可靠性、可用性和可维护性&#xff09;在数据中心峰会在2024年6月11日至12日举行&#xff0c;地点设在美国加利福尼亚州圣克拉拉市的圣克拉拉万豪酒…
阅读更多...
LangChain开发【NL2SQL】应用（few-shot优化）

LangChain开发【NL2SQL】应用（few-shot优化）

前言 之前发布的博客LangGraph开发Agent智能体应用【NL2SQL】-CSDN博客&#xff0c;留了一个问题&#xff0c;对于相对复杂的sql&#xff08;leetcode中等难度的sql题&#xff09;&#xff0c;gpt4o就力不从心了。这篇文章来讲一下优化 什么是few-shot 使用这些少量的、调整…
阅读更多...
公安视频图像信息数据库及GA/T 1400视图库视频监控系统的使用场景

公安视频图像信息数据库及GA/T 1400视图库视频监控系统的使用场景

随着科技的快速发展&#xff0c;大数据、人工智能等新技术不断融入各行各业&#xff0c;为各行各业带来了前所未有的变革。在公安领域&#xff0c;GA/T 1400协议公安视频图像信息数据库的应用为视频监控场景提供了强有力的支持&#xff0c;极大地提升了公安工作的效率和准确性。…
阅读更多...
排序-快排算法对数组进行排序

排序-快排算法对数组进行排序

目录 一、问题描述 二、解题思路 1.初始化 2.将右侧小于基准元素移到左边 3.将左侧大于基准元素移到右边 4.重复执行上面的操作 5.对分好的左、右分区再次执行分区操作 6.最终排序结果 三、代码实现 四、刷题链接 一、问题描述 二、解题思路 快排算法实现数组排序&am…
阅读更多...
算法金 | A - Z，115 个数据科学 机器学习 江湖黑话（全面）

算法金 | A - Z，115 个数据科学 机器学习 江湖黑话（全面）

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 机器学习本质上和数据科学一样都是依赖概率统计&#xff0c;今天整整那些听起来让人头大的机器学习江湖黑话 A - C A/B Testing (A/B …
阅读更多...
保姆级讲解 Linux下FTP服务器的搭建、配置与管理

保姆级讲解 Linux下FTP服务器的搭建、配置与管理

本来目录很长的 因为感觉不太美观 所以小标题都删掉了 本文介绍了 本地用户的FTP服务器搭建实例匿名用户的FTP服务器搭建实例虚拟用户的FTP服务器搭建实例企业常见类型搭建实验 配置与管理FTP服务器 配置与管理FTP服务器一、FTP相关知识二、项目设计与准备三、项目实施四、认识…
阅读更多...
存内计算与扩散模型：下一代视觉AIGC能力提升的关键

存内计算与扩散模型：下一代视觉AIGC能力提升的关键

目录 前言 视觉AIGC的ChatGPT4.0时代 扩散模型的算力“饥渴症” 存内计算解救算力“饥渴症” 结语 前言 ​ 在这个AI技术日新月异的时代&#xff0c;我们正见证着前所未有的创新与变革。尤其是在视觉内容生成领域&#xff08;AIGC&#xff0c;Artificial Intelligence Generate…
阅读更多...
python导入非当前目录(如：父目录)下的内容

python导入非当前目录(如：父目录)下的内容

在开发python项目时&#xff0c;通常会划分不同的目录&#xff0c;甚至不同层级的目录&#xff0c;这时如果直接导入不在当前目录下的内容时&#xff0c;会报如下的错误&#xff1a;ModuleNotFoundError: No module named miniai其实这里跟操作系统的环境变量很类似的&#xff…
阅读更多...
less学习笔记

less学习笔记

一、什么是less&#xff1f; Less是CSS预处理语言&#xff0c;可以使用变量、嵌套、运算等&#xff0c;便于维护项目CSS样式代码。 二、less安装 使用npm包管理工具&#xff0c;全局安装less包 npm install -g lessless安装好的同时&#xff0c;lessc也安装好了 通过 lessc -…
阅读更多...
【图解IO与Netty系列】Netty核心组件解析

【图解IO与Netty系列】Netty核心组件解析

Netty核心组件解析 Bootstrap & ServerBootstrapEventLoop & EventLoopGroupChannelChannelHandler & ChannelPipeline & ChannelHandlerContextChannelHandlerChannelPipelineChannelHandlerContext ChannelFuture Bootstrap & ServerBootstrap Bootstra…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023