第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例：深度解析响应式布局支持

传奇开心果系列

  • 系列博文目录
    • Vant开发移动应用示例系列
  • 博文目录
    • 前言
    • 一、Vant响应式布局介绍
    • 二、媒体查询实现响应式布局示例代码
    • 三、短点设置实现响应式布局示例代码
    • 四、响应式工具类实现响应式布局示例代码
    • 五、栅格系统实现响应式布局示例代码
    • 六、响应式组件实现响应式布局示例代码
    • 七、内置的媒体查询工具类来设置样式实现响应式布局示例代码
    • 八、自定义断点设置实现响应式布局示例代码
    • 九、Flex实现响应式布局示例代码
    • 十、归纳总结

系列博文目录

Vant开发移动应用示例系列

博文目录

前言

在这里插入图片描述Vant提供了响应式布局的支持，可以根据不同的手机屏幕尺寸自动适配布局，使得组件在不同的终端上都能够呈现良好的展示效果。

一、Vant响应式布局介绍

在这里插入图片描述以下是Vant响应式布局的具体介绍：

  1. 媒体查询：Vant使用CSS媒体查询来实现响应式布局。通过设置不同的媒体查询规则，可以根据屏幕宽度、高度或方向等条件，为不同的设备提供不同的样式和布局。

  2. 断点设置：Vant定义了一组断点，用于根据不同的屏幕宽度进行响应式布局。这些断点定义了不同屏幕尺寸下的布局规则，开发者可以根据需求自定义断点设置。

  3. 响应式工具类：Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。开发者可以通过在元素上添加相应的CSS类，实现响应式的样式调整。

  4. 栅格系统：Vant还提供了栅格系统，用于实现灵活的响应式布局。开发者可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。

  5. 响应式组件：Vant提供了一些特定的响应式组件，如van-row和van-col`。这些组件可以配合栅格系统使用，以便更好地控制组件在不同屏幕尺寸下的布局。

  6. 媒体查询工具类：除了使用媒体查询来自定义样式外，Vant还提供了一些内置的媒体查询工具类，方便开发者根据不同的屏幕尺寸设置样式。例如，可以使用.van-xs、.van-sm、.van-md、.van-lg、.van-xl等类名来针对不同的屏幕尺寸设置样式。

  7. 自定义断点：Vant提供了默认的断点设置，但也支持开发者根据项目需求自定义断点。通过配置断点，可以更精细地控制组件在不同屏幕尺寸下的布局和样式。

  8. Flex布局：Vant在设计和布局上广泛使用Flexbox弹性布局模型，这使得组件在不同屏幕尺寸下能够更好地自适应和排列。

通过结合以上的特性和工具，开发者可以实现灵活的响应式布局。Vant的响应式布局能够使组件在不同的手机屏幕尺寸下呈现出最佳的显示效果，并提供良好的用户体验。

二、媒体查询实现响应式布局示例代码

在这里插入图片描述Vant通过媒体查询实现响应式布局的示例代码如下：

<template>
  <div class="container">
    <van-button class="responsive-button">Responsive Button</van-button>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .responsive-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media screen and (min-width: 769px) {
  .responsive-button {
    font-size: 18px;
    padding: 15px 30px;
  }
}
</style>

在这个示例中，我们使用了Vant的Button组件，并通过媒体查询来设置按钮在不同屏幕尺寸下的样式。

首先，我们定义了一个容器.container，使用display: flex和justify-content: center将按钮水平居中显示。

然后，在@media规则内，我们设置了两个媒体查询。第一个媒体查询针对最大宽度为768px的屏幕，设置了较小的字体大小和内边距。第二个媒体查询针对最小宽度为769px的屏幕，设置了较大的字体大小和内边距。

这样，根据不同的屏幕尺寸，按钮的样式会自动适应并改变。

通过使用媒体查询，我们可以根据不同的屏幕尺寸设置组件的样式，从而实现响应式布局。这使得组件能够在不同的设备上以最佳的方式呈现，并提供更好的用户体验。

在这里插入图片描述下面是一个更全面的示例代码，展示如何使用Vant的媒体查询和响应式工具类来实现更复杂的响应式布局：

<template>
  <div class="container">
    <van-row :gutter="20">
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 1</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 2</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 3</div>
      </van-col>
    </van-row>
  </div>
</template>

<style>
.container {
  padding: 20px;
}

.box {
  background-color: #f2f2f2;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .box {
    font-size: 18px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .box {
    font-size: 20px;
  }
}
</style>

在这个示例中，我们使用了Vant的Row和Col组件来创建一个响应式的布局。其中，Row表示行，Col表示列，可以根据不同的屏幕尺寸设置列的宽度。

在Col组件上，我们使用了:lg、:md和:sm属性来设置不同屏幕尺寸下的列宽。对于大屏幕(lg)，每列占据8份；对于中等屏幕(md)，每列占据12份；对于小屏幕(sm)，每列占据24份，即一整行。

在样式部分，我们定义了一个.box类，表示每个盒子的样式。通过媒体查询，我们根据不同的屏幕尺寸设置了不同的字体大小。

当屏幕宽度小于等于768px时，字体大小为18px；当屏幕宽度在769px到1024px之间时，字体大小为20px。

这样，无论是在大屏幕、中等屏幕还是小屏幕下，盒子的列宽和字体大小都会自动调整，实现了响应式布局。

通过这个示例，您可以更好地理解如何使用Vant的媒体查询和响应式工具类来实现灵活的响应式布局。您可以根据具体的需求，调整和扩展代码，以满足您的项目要求。

三、短点设置实现响应式布局示例代码

在这里插入图片描述Vant提供了一组预定义的断点，用于根据不同屏幕宽度进行响应式布局。您可以根据自己的需求自定义这些断点设置。以下是一个示例代码，演示了如何使用Vant的断点设置：

import { createApp } from 'vue';
import { createBreakpoint } from 'vant';

// 自定义断点设置
const customBreakpoints = {
  xs: 320,    // 小屏幕设备（手机）上的断点
  sm: 576,    // 中等屏幕设备（平板电脑）上的断点
  md: 768,    // 中大屏幕设备上的断点
  lg: 992,    // 大屏幕设备（电脑）上的断点
  xl: 1200    // 超大屏幕设备上的断点
};

// 创建断点实例
const breakpoint = createBreakpoint(customBreakpoints);

// 注册断点实例到Vant
createApp(App).use(breakpoint).mount('#app');

在这个示例代码中，我们首先通过createBreakpoint函数创建了一个断点实例，并传入了自定义的断点设置对象customBreakpoints。然后，将断点实例注册到Vant的Vue应用中。

通过自定义断点设置，您可以根据需要定义不同屏幕尺寸下的断点值。例如，xs表示小屏幕设备（手机）上的断点，sm表示中等屏幕设备（平板电脑）上的断点，以此类推。您可以根据实际需求调整断点的数值。

四、响应式工具类实现响应式布局示例代码

在这里插入图片描述Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。您可以通过在元素上添加相应的CSS类，实现响应式的样式调整。以下是一些常用的响应式工具类示例代码：

  1. 隐藏和显示类：
<!-- 在手机设备上隐藏该元素 -->
<div class="van-xs-hide">内容</div>

<!-- 在平板电脑设备上显示该元素 -->
<div class="van-sm-show">内容</div>
  1. 布局类：
<!-- 在小屏幕设备上设置元素宽度为100% -->
<div class="van-xs-24">内容</div>

<!-- 在中等屏幕设备上设置元素宽度为50% -->
<div class="van-md-12">内容</div>

<!-- 在大屏幕设备上设置元素宽度为33.33% -->
<div class="van-lg-8">内容</div>
  1. 偏移类：
<!-- 在小屏幕设备上设置元素左侧偏移为20px -->
<div class="van-xs-offset-20">内容</div>

<!-- 在中等屏幕设备上设置元素右侧偏移为10px -->
<div class="van-md-offset-right-10">内容</div>
  1. 对齐类：
<!-- 在小屏幕设备上设置元素居中对齐 -->
<div class="van-xs-text-center">内容</div>

<!-- 在中等屏幕设备上设置元素右对齐 -->
<div class="van-md-text-right">内容</div>

这些是一些常用的响应式工具类示例代码，您可以根据实际需求选择合适的类应用于元素上，以实现在不同屏幕尺寸下的样式调整。

五、栅格系统实现响应式布局示例代码

在这里插入图片描述Vant提供了栅格系统，用于实现灵活的响应式布局。您可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。以下是一个示例代码，演示了如何使用Vant的栅格系统：

<van-row :gutter="20">
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第一列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第二列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第三列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第四列内容 -->
  </van-col>
</van-row>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。van-row表示一行，包含多个列。van-col表示每一列，可以设置不同的列宽。

通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

六、响应式组件实现响应式布局示例代码

在这里插入图片描述Vant的栅格系统是通过van-row和van-col组件来实现的，这两个组件用于创建栅格布局。可以根据不同屏幕尺寸设置每列的宽度，从而实现响应式布局。以下是一个示例代码：

<template>
  <van-row :gutter="20">
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第一列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第二列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第三列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第四列内容 -->
    </van-col>
  </van-row>
</template>

<script>
export default {
  // 组件逻辑代码
}
</script>

<style scoped>
/* 样式代码 */
</style>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

七、内置的媒体查询工具类来设置样式实现响应式布局示例代码

在这里插入图片描述以下是使用Vant内置的媒体查询工具类来设置样式的示例代码：

<template>
  <div>
    <div class="van-xs">Extra Small Screen</div>
    <div class="van-sm">Small Screen</div>
    <div class="van-md">Medium Screen</div>
    <div class="van-lg">Large Screen</div>
    <div class="van-xl">Extra Large Screen</div>
  </div>
</template>

<style>
.van-xs {
  /* 样式针对 extra small 屏幕尺寸 */
}

.van-sm {
  /* 样式针对 small 屏幕尺寸 */
}

.van-md {
  /* 样式针对 medium 屏幕尺寸 */
}

.van-lg {
  /* 样式针对 large 屏幕尺寸 */
}

.van-xl {
  /* 样式针对 extra large 屏幕尺寸 */
}
</style>

在上面的示例中，我们使用了.van-xs、.van-sm、.van-md、.van-lg、.van-xl这些类名来分别针对不同的屏幕尺寸设置样式。你可以根据需要在对应的类名下编写样式规则，以实现在不同屏幕尺寸下的样式适配。

八、自定义断点设置实现响应式布局示例代码

在这里插入图片描述要自定义断点并配置Vant的断点设置，可以按照以下示例代码进行操作：

// 在项目的入口文件中引入 Vant
import { createApp } from 'vue';
import { vant } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(vant);
app.mount('#app');

// 创建一个自定义的 Vant 断点配置文件（例如 breakpoints.js）
export default {
  xs: 480, // extra small
  sm: 576, // small
  md: 768, // medium
  lg: 992, // large
  xl: 1200, // extra large
};

// 在项目中的需要的地方引入自定义的断点配置文件
import breakpoints from './breakpoints';

// 在使用 Vant 之前，修改 Vant 的默认断点配置
import { use } from 'vant';

use({
  install(app) {
    app.config.globalProperties.$vant = {
      ...app.config.globalProperties.$vant,
      ...breakpoints,
    };
  },
});

通过上述代码，我们在项目中引入了 Vant，并创建了一个自定义的断点配置文件 breakpoints.js。在该文件中，我们定义了自己的断点尺寸，例如 xs、sm、md、lg、xl。

然后，在项目中需要使用 Vant 的地方，我们引入了自定义的断点配置文件，并通过 Vant 的 use 方法修改了默认断点配置。这样，Vant 将使用我们自定义的断点配置来进行布局和样式的适配。

请注意，以上示例中的代码是基于 Vue 3.x 和 Vant 3.x 的。如果你使用的是其他版本的 Vue 或 Vant，请根据相应的版本文档进行适配。

九、Flex实现响应式布局示例代码

在这里插入图片描述Vant广泛使用Flexbox弹性布局模型来设计和布局组件，以实现在不同屏幕尺寸下的自适应和排列。以下是一个使用Vant Flex布局的示例代码：

<template>
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
  </div>
</template>

<style>
.container {
  width: 100%;
  height: 300px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 0 33.33%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

在上面的示例中，我们创建了一个容器 .container，并在其中使用了Flex布局。.flex-container 是一个Flex容器，它的子元素 .flex-item 会根据剩余空间自动排列。

通过设置 .flex-item 的 flex 属性，我们指定了子元素的弹性，其中 flex: 1 0 33.33% 表示子元素的弹性比例为1，不允许缩小，初始宽度为33.33%。这样，无论容器的宽度如何变化，子元素都会平均占据一行的三分之一空间。

你可以根据需要在Flex容器和子元素上应用不同的样式，并根据项目要求进行调整。这样，Vant的Flex布局能够帮助你实现在不同屏幕尺寸下的自适应和排列效果。
在这里插入图片描述下面是一个更复杂的示例代码，展示了如何在Vant中使用Flex布局，并结合其他组件进行更丰富的布局和排列：

<template>
  <div class="container">
    <van-row>
      <van-col span="12">
        <div class="box">Box 1</div>
      </van-col>
      <van-col span="12">
        <div class="box">Box 2</div>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="8">
        <div class="box">Box 3</div>
      </van-col>
      <van-col span="8">
        <div class="box">Box 4</div>
      </van-col>
      <van-col span="8">
        <div class="box">Box 5</div>
      </van-col>
    </van-row>
  </div>
</template>

<style>
.container {
  width: 100%;
  height: 300px;
}

.box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用了Vant的 van-row 和 van-col 组件来实现更灵活的布局。通过在 van-row 中使用 van-col，我们可以将内容划分为多个列，并根据需要进行自适应排列。

每个 van-col 组件都可以设置 span 属性来指定所占的列数。在示例中，我们在第一行中有两个 van-col，每个占据了12列（即占据了一半的宽度），而在第二行中有三个 van-col，每个占据了8列（即占据了三分之一的宽度）。

在每个 van-col 的内部，我们放置了一个具有 .box 类的 div 元素，用于展示灵活的内容。通过设置 .box 的样式，我们使其垂直居中并水平居中，同时给它一个背景颜色和边框，以便更好地展示布局效果。

你可以根据自己的需求和设计来修改和扩展这个示例，利用Vant的Flex布局和其他组件，实现更丰富的自适应布局和排列效果。

十、归纳总结

在这里插入图片描述当涉及到Vant的响应式布局，以下是一些重要的知识点：

  1. 使用Flexbox弹性布局：Vant广泛使用Flexbox弹性布局模型来实现组件的自适应和排列。通过设置容器和子元素的display: flex，可以创建一个Flex容器，并使用flex属性来控制子元素的弹性。

  2. 使用van-row和van-col组件：Vant提供了van-row和van-col组件，用于更灵活地实现响应式布局。van-row表示一行，可以在其中放置多个van-col组件，每个van-col组件代表一个列，并可以根据需要设置所占的列数。

  3. 使用span属性控制列数：在van-col组件中，可以使用span属性来控制所占的列数。例如，span="12"表示占据12列（即占据一半的宽度），span="8"表示占据8列（即占据三分之一的宽度），以此类推。

  4. 自定义样式：可以根据需要在Flex容器和子元素上应用自定义的样式，例如设置宽度、高度、对齐方式等。通过调整样式，可以实现不同屏幕尺寸下的自适应布局和排列效果。

在这里插入图片描述这些知识点可以帮助你在Vant中实现响应式布局。根据具体的项目需求，你可以灵活运用这些知识来创建适应不同屏幕尺寸的布局。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu彻底卸载cuda 重新安装cuda

ubuntu彻底卸载cuda 重新安装cuda

sudo apt-get --purge remove "*cublas*" "*cufft*" "*curand*" \"*cusolver*" "*cusparse*" "*npp*" "*nvjpeg*" "cuda*" "nsight*" cuda10以上 cd /usr/local/cuda-xx.x/bin/ s…
阅读更多...
python 基础知识点（蓝桥杯python科目个人复习计划38）

python 基础知识点（蓝桥杯python科目个人复习计划38）

今日复习内容&#xff1a;DFS的剪枝 我理解的剪枝&#xff0c;和《运筹学》里面“分支定界法”的剪枝操作一样&#xff0c;不停按照题目所给条件分割&#xff0c;当所得目标函数的值已偏离最优解时&#xff0c;就将其减去。 例题1&#xff1a;数字王国之军训排队 题目描述&a…
阅读更多...
MySQL篇----第二十一篇

MySQL篇----第二十一篇

系列文章目录 文章目录 系列文章目录前言一、什么是乐观锁二、什么是悲观锁三、什么是时间戳四、什么是行级锁前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。 一、…
阅读更多...
C#系列-Entity Framework 架构（18）

C#系列-Entity Framework 架构（18）

下图展示了EF的整体架构。现在让我们逐个地看看架构的各个组件&#xff1a; EF组件图 EDM&#xff08;Entity Data Mode 实体数据模型&#xff09;:EDM 由三个主要部分组成&#xff1a;概念模型&#xff0c;映射和存储模型。 Conceptual Model&#xff08;概念模型&#xff0…
阅读更多...
【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目

【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目

作者推荐 视频算法专题 本博文涉及知识点 深度优先搜索 树 图论 分类讨论 LeetCode2973. 树中每个节点放置的金币数目 给你一棵 n 个节点的 无向 树&#xff0c;节点编号为 0 到 n - 1 &#xff0c;树的根节点在节点 0 处。同时给你一个长度为 n - 1 的二维整数数组 edges…
阅读更多...
【Linux技术宝典】Linux入门：揭开Linux的神秘面纱

【Linux技术宝典】Linux入门：揭开Linux的神秘面纱

文章目录 官网Linux 环境的搭建方式一、什么是Linux&#xff1f;二、Linux的起源与发展三、Linux的核心组件四、Linux企业应用现状五、Linux的发行版本六、为什么选择Linux&#xff1f;七、总结 Linux&#xff0c;一个在全球范围内广泛应用的开源操作系统&#xff0c;近年来越来…
阅读更多...
深入学习《大学计算机》系列之第1章 1.7节——图灵机的一个例子

深入学习《大学计算机》系列之第1章 1.7节——图灵机的一个例子

一.欢迎来到我的酒馆 第1章 1.7节&#xff0c;图灵机的一个例子。 目录 一.欢迎来到我的酒馆二.图灵机2.1 艾伦-图灵简介2.2 图灵机简介 三.图灵机工作原理3.1 使用图灵机打印二进制数3.2 图灵机工作原理总结 四.总结 二.图灵机 本节内容主要介绍计算机科学之父——艾伦-图灵、…
阅读更多...
【CC++】内存管理2：new + delete

【CC++】内存管理2：new + delete

前言 今天继续来学new和delete operator new 与operator delete函数 new和delete是用户进行动态内存申请和释放的操作符&#xff0c;operator new 和operator delete是系统提供的全局函数&#xff0c;new在底层调用operator new全局函数来申请空间&#xff0c;delete在底层通…
阅读更多...
OpenCV入门：图像处理的基石

OpenCV入门：图像处理的基石

在数字图像处理领域&#xff0c;OpenCV&#xff08;开源计算机视觉库&#xff09;是一个不可或缺的工具。它包含了一系列强大的算法和函数&#xff0c;使得开发者可以轻松地处理图像和视频数据。本文将带你走进OpenCV的世界&#xff0c;了解其基本概念和常见应用。 1. OpenCV简…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的公司货物订单管理系统

【开源】基于JAVA+Vue+SpringBoot的公司货物订单管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 客户管理模块2.2 商品维护模块2.3 供应商管理模块2.4 订单管理模块 三、系统展示四、核心代码4.1 查询供应商信息4.2 新增商品信息4.3 查询客户信息4.4 新增订单信息4.5 添加跟进子订单 五、免责说明 一、摘要 1.1 项目…
阅读更多...
锐捷（十九）锐捷设备的接入安全

锐捷（十九）锐捷设备的接入安全

1、PC1的IP地址和mac地址做全局静态ARP绑定; 全局下&#xff1a;address-bind 192.168.1.1 mac&#xff08;pc1&#xff09; G0/2:ip verify source port-securityarp-check 2、PC2的IP地址和MAC地址做全局IPMAC绑定&#xff1a; Address-bind 192.168.1.2 0050.7966.6807Ad…
阅读更多...
Hugging Face 刚刚推出了一款开源的 AI 助手制造工具，直接向 OpenAI 的定制 GPT 挑战

Hugging Face 刚刚推出了一款开源的 AI 助手制造工具，直接向 OpenAI 的定制 GPT 挑战

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
MMKV：轻巧高效的跨平台键值存储解决方案

MMKV：轻巧高效的跨平台键值存储解决方案

MMKV&#xff1a;轻巧高效的跨平台键值存储解决方案 引言 在移动应用的开发中&#xff0c;数据存储是一个至关重要的环节。随着移动应用的普及和功能的增多&#xff0c;应用需要存储和管理各种类型的数据&#xff0c;包括用户配置信息、缓存数据、临时状态等。传统的数据存储…
阅读更多...
Ubuntu Desktop 删除文件

Ubuntu Desktop 删除文件

Ubuntu Desktop 删除文件 1. right mouse click on the file -> Move to Trash2. right mouse click on the file -> DeleteReferences 1. right mouse click on the file -> Move to Trash ​ 2. right mouse click on the file -> Delete ​​​ References …
阅读更多...
Unity Meta Quest MR 开发（四）：使用 Scene API 和 Depth API 实现深度识别和环境遮挡

Unity Meta Quest MR 开发（四）：使用 Scene API 和 Depth API 实现深度识别和环境遮挡

文章目录 &#x1f4d5;教程说明&#x1f4d5;Scene API 实现遮挡&#x1f4d5;Scene API 实现遮挡的缺点&#x1f4d5;Depth API 实现遮挡⭐导入 Depth API⭐修改环境配置⭐添加 EnvironmentDepthOcclusion 预制体⭐给物体替换遮挡 Shader⭐取消现实手部的遮挡效果 此教程相关…
阅读更多...
C++ //练习 5.6 改写上一题的程序，使用条件运算符（参见4.7节，第134页）代替if else语句。

C++ //练习 5.6 改写上一题的程序，使用条件运算符（参见4.7节，第134页）代替if else语句。

C Primer&#xff08;第5版&#xff09; 练习 5.6 练习 5.6 改写上一题的程序&#xff0c;使用条件运算符&#xff08;参见4.7节&#xff0c;第134页&#xff09;代替if else语句。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码…
阅读更多...
blender怎么保存窗口布局，怎么设置默认输出文件夹

blender怎么保存窗口布局，怎么设置默认输出文件夹

进行窗口布局大家都会&#xff0c;按照自己喜好来就行了&#xff0c;设置输出文件夹如图 这些其实都简单。关键问题在于&#xff0c;自己调好了窗口布局&#xff0c;或者设置好了输出文件夹之后&#xff0c;怎么能让blender下次启动的时候呈现出自己设置好的窗口布局&#xff…
阅读更多...
《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）

《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）

文章目录 10.1 CSS 的新特性和趋势10.1.1 基础知识10.1.2 重点案例&#xff1a;使用 CSS Grid 创建响应式图库10.1.3 拓展案例 1&#xff1a;利用 CSS 变量实现主题切换10.1.4 拓展案例 2&#xff1a;使用 lab() 颜色和 layer 规则优化样式 10.2 CSS Houdini&#xff1a;魔法般…
阅读更多...
Day46 300最长递增子序列 674最长连续递增子序列 718最长重复子数组 1143最长公共子序列

Day46 300最长递增子序列 674最长连续递增子序列 718最长重复子数组 1143最长公共子序列

300 最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序…
阅读更多...
Kafka 入门笔记

Kafka 入门笔记

课程地址 概述 定义 Kafka 是一个分布式的基于发布/订阅模式的消息队列&#xff08;MQ&#xff09; 发布/订阅&#xff1a;消息的发布者不会将消息直接发送给特定的订阅者&#xff0c;而是将发布的消息分为不同的类别&#xff0c;订阅者只接受感兴趣的消息 消息队列 消息队…
阅读更多...
最新文章

Copyright @ 2022~2023