Python私教张大鹏 Vue3整合AntDesignVue之Steps 步骤条

引导用户按照流程完成任务的导航条。

何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

案例：步骤条组件

核心代码：

<template>
  <a-steps
    :current="1"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
        subTitle: 'Left 00:00:08',
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script lang="ts" setup>
const description = 'This is a description.';
</script>

vue3示例：


<script setup>
const description = '关于步骤的描述文本';
</script>
<template>
  <!--
  :current="1"：当前步骤，是从0开始的
  :items: 具体的步骤，是一个数组，数组元素支持如下属性
    title：标题
    subTitle：副标题
    description：描述
  -->
  <a-steps
      :current="1"
      :items="[
      {
        title: '已完成',
        description,
      },
      {
        title: '进行中',
        description,
        subTitle: '副标题',
      },
      {
        title: '待办事项',
        description,
      },
    ]"
  ></a-steps>
</template>

在这里插入图片描述

案例：小型步骤条

迷你版的步骤条，通过设置 <Steps size="small"> 启用.

核心代码：

<template>
  <a-steps
    :current="1"
    size="small"
    :items="[
      {
        title: 'Finished',
      },
      {
        title: 'In Progress',
      },
      {
        title: 'Waiting',
      },
    ]"
  ></a-steps>
</template>

如何实现：size="small"

vue3示例：

<script setup>
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <a-steps :current="1" :items="items"/>
  <a-divider>小步骤条</a-divider>
  <a-steps :current="1" :items="items" size="small"/>
</template>

在这里插入图片描述

案例：带图标的步骤条

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

核心代码：

<template>
  <a-steps :items="items"></a-steps>
</template>
<script lang="ts" setup>
import { h } from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';
import { StepProps } from 'ant-design-vue';
const items = [
  {
    title: 'Login',
    status: 'finish',
    icon: h(UserOutlined),
  },
  {
    title: 'Verification',
    status: 'finish',
    icon: h(SolutionOutlined),
  },
  {
    title: 'Pay',
    status: 'process',
    icon: h(LoadingOutlined),
  },
  {
    title: 'Done',
    status: 'wait',
    icon: h(SmileOutlined),
  },
] as StepProps[];
</script>

第一步：导入图标

import { h } from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

第二步：渲染图标

{
  title: 'Verification',
  status: 'finish',
  icon: h(SolutionOutlined),
}

vue3示例：

<script setup>
import { h } from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
    icon: h(UserOutlined),
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
    icon: h(SolutionOutlined),
  },
  {
    title: '待办事项',
    description,
    icon: h(LoadingOutlined),
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="1" :items="items"/>
  </div>
</template>

在这里插入图片描述

案例：步骤切换

通常配合内容及按钮使用，表示一个流程的处理进度。

核心代码：

<template>
  <div>
    <a-steps :current="current" :items="items"></a-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
const current = ref<number>(0);
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];
const items = steps.map(item => ({ key: item.title, title: item.title }));
</script>
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>

第一步：绑定当前步骤 :current="current"

<a-steps :current="current" :items="items"></a-steps>

第二步：展示步骤内容

<div class="steps-content">
  {{ steps[current].content }}
</div>

第三步：展示切换内容

<div class="steps-action">
  <a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
  <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="message.success('Processing complete!')"
            >
    Done
  </a-button>
  <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
</div>

第四步：编写切换方法

import { message } from 'ant-design-vue';
const current = ref<number>(0);
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};

vue3示例：

<script setup>
import {h, ref} from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
    icon: h(UserOutlined),
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
    icon: h(SolutionOutlined),
  },
  {
    title: '待办事项',
    description,
    icon: h(LoadingOutlined),
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="current" :items="items"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：垂直步骤条

核心代码：

<template>
  <a-steps
    direction="vertical"
    :current="1"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script lang="ts" setup>
const description = 'This is a description.';
</script>

如何实现：direction="vertical"

vue3示例：

<script setup>
import {h, ref} from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
    icon: h(UserOutlined),
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
    icon: h(SolutionOutlined),
  },
  {
    title: '待办事项',
    description,
    icon: h(LoadingOutlined),
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="current" :items="items" direction="vertical"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

核心代码：

<template>
  <a-steps
    v-model:current="current"
    status="error"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Process',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref<number>(1);
const description = 'This is a description.';
</script>

如何实现：status="error"

vue3示例：

<script setup>
import {h, ref} from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
    icon: h(UserOutlined),
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
    icon: h(SolutionOutlined),
  },
  {
    title: '待办事项',
    description,
    icon: h(LoadingOutlined),
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="current" :items="items" direction="vertical" status="error"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：点状步骤条

包含步骤点的进度条。

核心代码：

<template>
  <div>
    <a-steps
      progress-dot
      :current="1"
      :items="[
        {
          title: 'Finished',
          description: 'This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]"
    ></a-steps>
    <a-divider />
    <a-steps
      progress-dot
      :current="1"
      direction="vertical"
      :items="[
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Finished',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'In Progress',
          description: 'This is a description. This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
        {
          title: 'Waiting',
          description: 'This is a description.',
        },
      ]"
    ></a-steps>
  </div>
</template>

如何实现：progress-dot

vue3示例：

<script setup>
import {h, ref} from 'vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="current" :items="items" direction="vertical" status="error" progress-dot/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：步骤可点击

设置 v-model 后，Steps 变为可点击状态。

核心代码：

<template>
  <div>
    <a-steps
      v-model:current="current"
      :items="[
        {
          title: 'Step 1',
          description,
        },
        {
          title: 'Step 2',
          description,
        },
        {
          title: 'Step 3',
          description,
        },
      ]"
    ></a-steps>
    <a-divider />
    <a-steps
      v-model:current="current"
      direction="vertical"
      :items="[
        {
          title: 'Step 1',
          description,
        },
        {
          title: 'Step 2',
          description,
        },
        {
          title: 'Step 3',
          description,
        },
      ]"
    ></a-steps>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref<number>(0);
const description = 'This is a description.';
</script>

如何实现：v-model:current="current"

vue3示例：

<script setup>
import {h, ref} from 'vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps v-model:current="current" :items="items" status="error" progress-dot/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：导航步骤条

核心代码：

<template>
  <div>
    <a-steps
      v-model:current="current"
      type="navigation"
      size="small"
      :style="stepStyle"
      :items="[
        {
          title: 'Step 1',
          subTitle: '00:00:05',
          status: 'finish',
          description: 'This is a description.',
        },
        {
          title: 'Step 2',
          subTitle: '00:01:02',
          status: 'process',
          description: 'This is a description.',
        },
        {
          title: 'Step 3',
          subTitle: 'waiting for longlong time',
          status: 'wait',
          description: 'This is a description.',
        },
      ]"
    ></a-steps>
    <a-steps
      v-model:current="current"
      type="navigation"
      :style="stepStyle"
      :items="[
        {
          status: 'finish',
          title: 'Step 1',
        },
        {
          status: 'process',
          title: 'Step 2',
        },
        {
          status: 'wait',
          title: 'Step 3',
        },
        {
          status: 'wait',
          title: 'Step 4',
        },
      ]"
    ></a-steps>
    <a-steps
      v-model:current="current"
      type="navigation"
      size="small"
      :style="stepStyle"
      :items="[
        {
          status: 'finish',
          title: 'finish 1',
        },
        {
          status: 'finish',
          title: 'finish 2',
        },
        {
          status: 'process',
          title: 'current process',
        },
        {
          status: 'wait',
          title: 'wait',
          disabled: true,
        },
      ]"
    ></a-steps>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref<number>(0);

const stepStyle = {
  marginBottom: '60px',
  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};
</script>

如何实现：type="navigation"

vue3示例：

<script setup>
import {h, ref} from 'vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps v-model:current="current" :items="items" status="error"
             progress-dot
             type="navigation"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：步骤条进度

核心代码：

<template>
  <a-steps
    v-model:current="current"
    :percent="60"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        subTitle: 'Left 00:00:08',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
  <a-steps
    v-model:current="current"
    :percent="60"
    size="small"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        subTitle: 'Left 00:00:08',
        description,
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const current = ref<number>(1);
const description = 'This is a description.';
</script>

如何实现：:percent="60"

vue3示例：

<script setup>
import {h, ref} from 'vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps v-model:current="current" :items="items"
             :percent="88"
             type="navigation"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：标签位置

核心代码：

<template>
  <div>
    <a-steps :current="1" label-placement="vertical" :items="items" />
    <br />
    <a-steps :current="1" :percent="60" label-placement="vertical" :items="items" />
    <br />
    <a-steps :current="1" size="small" label-placement="vertical" :items="items" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const items = ref([
  {
    title: 'Finished',
    description: 'This is a description.',
  },
  {
    title: 'In Progress',
    description: 'This is a description.',
  },
  {
    title: 'Waiting',
    description: 'This is a description.',
  },
]);
</script>

如何实现：label-placement="vertical"

vue3示例：

<script setup>
import {h, ref} from 'vue';

const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
  {
    title: '已完成',
    description,
  },
  {
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps v-model:current="current" :items="items"
             :percent="88"
             label-placement="vertical"
             type="navigation"/>
    <div class="container bg-red-300 mt-3 min-h-72 p-3">
      {{items[current].title}}
    </div>
    <div class="container bg-red-300 mt-3 p-3">
      <a-button type="primary" @click="current--">上一步</a-button>
      <a-button type="primary" @click="current++">下一步</a-button>
    </div>
  </div>
</template>

在这里插入图片描述

案例：内联步骤条

内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。

核心代码：

<template>
  <a-list :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        >
          <template #title>
            <a href="https://www.antdv.com/">{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </a-list-item-meta>
        <a-steps
          style="margin-top: 8px"
          type="inline"
          :current="item.current"
          :status="item.status"
          :items="items"
        />
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts" setup>
const data = [
  {
    title: 'Ant Design Title 1',
    current: 0,
  },
  {
    title: 'Ant Design Title 2',
    current: 1,
    status: 'error',
  },
  {
    title: 'Ant Design Title 3',
    current: 2,
  },
  {
    title: 'Ant Design Title 4',
    current: 1,
  },
];

const items = [
  {
    title: 'Step 1',
    description: 'This is a Step 1.',
  },
  {
    title: 'Step 2',
    description: 'This is a Step 2.',
  },
  {
    title: 'Step 3',
    description: 'This is a Step 3.',
  },
];
</script>

属性

整体步骤条。

参数说明类型默认值版本
current (v-model)指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态, 1.5.0 后支持 v-modelnumber0
direction指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向stringhorizontal
initial起始序号，从 0 开始记数number0
labelPlacement指定标签放置位置，默认水平放图标右侧，可选vertical放图标下方stringhorizontal
percent当前 process 步骤显示的进度条进度（只对基本类型的 Steps 生效）number-3.0
progressDot点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为verticalBoolean or v-slot:progressDot=“{index, status, title, description, prefixCls, iconDot}”false
responsive当屏幕宽度小于 532px 时自动变为垂直模式booleantrue3.0
size指定大小，目前支持普通（default）和迷你（small）stringdefault
status指定当前步骤的状态，可选 wait process finish errorstringprocess
type步骤条类型，有 default 和 navigation 两种stringdefault1.5.0
items配置选项卡内容StepItem[][]

内嵌属性

type="inline" (4.0+)

参数说明类型默认值版本
current指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0
initial起始序号，从 0 开始记数number0
status指定当前步骤的状态，可选 wait process finish errorstringprocess
items配置选项卡内容，不支持 icon subtitleStepItem[]

事件

事件名称说明回调参数版本
change点击切换步骤时触发(current) => void-1.5.0

步骤属性

步骤条内的每一个步骤。

参数说明类型默认值版本
description步骤的详情描述，可选string | slot-
disabled禁用点击booleanfalse1.5.0
icon步骤图标的类型，可选string | slot-
status指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish errorstringwait
subTitle子标题string | slot-1.5.0
title标题string | slot-

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

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

相关文章

LogicFlow 学习笔记——10. LogicFlow 进阶 边

LogicFlow 学习笔记——10. LogicFlow 进阶 边

我们可以基于 Vue 组件自定义边&#xff0c;可以在边上添加任何想要的 Vue 组件&#xff0c;甚至将原有的边通过样式隐藏&#xff0c;重新绘制。 如 Example3 中所示&#xff1a; 锚点 默认情况下&#xff0c;LogicFlow 只记录节点与节点的信息。但是在一些业务场景下&#…
阅读更多...
Transformer模型探索：Hugging Face库实战篇二——模型与分词器解析

Transformer模型探索：Hugging Face库实战篇二——模型与分词器解析

注&#xff1a;本系列教程仅供学习使用, 由原作者授权, 均转载自小昇的 博客 。 文章目录 前言模型 加载模型 保存模型 分词器 分词策略 加载与保存分词器编码与解码文本 处理多段文本 Padding 操作 Attention masks直接使用分词器编码句子对 前言 在上一篇文章 《开箱即…
阅读更多...
QT(超详细从0开始)

QT(超详细从0开始)

目录 1.2 Qt的优点 2.安装Qt 3.创建项目 4.解读Qt自动生成的代码 ​编辑 5.Qt Designer 6.Qt对象数 7.Qt乱码问题 8.Qt坐标系的认识 9.信号和槽 9.1 connect 9.2 自定义槽函数 9.3 自定义信号 9.4 断开信号链接&#xff08;disconnect&#xff09; 9.5.lambda表…
阅读更多...
【尚庭公寓SpringBoot + Vue 项目实战】租约管理（十四）

【尚庭公寓SpringBoot + Vue 项目实战】租约管理（十四）

【尚庭公寓SpringBoot Vue 项目实战】租约管理&#xff08;十四&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】租约管理&#xff08;十四&#xff09;1、业务介绍2、逻辑介绍3、接口开发3.1、保存或更新租约信息3.2、根据条件分页查询租约列表3.3、根据ID查询租…
阅读更多...
STM32的通用定时器中断编程

STM32的通用定时器中断编程

如果遇到需要单片机产生严格时序的场景&#xff08;比如DAC输出特定模拟信号&#xff0c;GPIO口控制模拟开关&#xff09;&#xff0c;延时函数可能就无法胜任了。最近在工作时公司上级教会了我使用“令牌”思维&#xff08;中断标志位)编写单片机裸机程序&#xff0c;今天写一…
阅读更多...
c++初始化列表(特点),隐式类型转换(示例,explicit关键字)

c++初始化列表(特点),隐式类型转换(示例,explicit关键字)

目录 初始化列表 定义 特点 必须使用初始化列表的成员变量 初始化顺序 隐式类型转换 示例 explicit关键字 初始化列表 Date::Date(const Date& d) {_year d._year;_month d._month;_day d._day; }Date::Date(const Date& d) :_year(d._year),_month(d._mon…
阅读更多...
66aix AI生成系统-中文版安装

66aix AI生成系统-中文版安装

66aix是一款多功能的AI助手工具&#xff0c;可以帮助您生成独特的内容&#xff0c;美化和修改您的文章内容或&#xff0c;以及生成图像&#xff0c;去除图像背景。同时&#xff0c;它还包括完整功能的语音转换文本系统。 系统要求 PHP PHP 8 Extensions cURL, OpenSSL, mbstrin…
阅读更多...
简易版 | 代码生成器(包含插件)

简易版 | 代码生成器(包含插件)

一、代码生成器 先导入依赖 <!-- Mybatis-Plus --> <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.6</version> </dependency><!-- 代码生成器 --…
阅读更多...
css之浮动float

css之浮动float

float 设计初衷 仅仅是为了实现文字环绕 图文混排效果 特性 包裹 收缩 坚挺 隔绝 也就是BFC(Block Formating content) - “块级格式化上下文” 破坏 高度塌陷&#xff08;浮动使高度塌陷不是bug &#xff0c;而是标准&#xff0c;特性使然&#xff09; 清除浮动 clear 作…
阅读更多...
MySQL----事务的隔离级别(附带每一级别实例截图)

MySQL----事务的隔离级别(附带每一级别实例截图)

先来回顾一下事务并发可能存在的三大问题&#xff1a; 脏读&#xff08;Dirty Read&#xff09;–不能接受 一个事务读取了另一个事务未提交的数据。例如当事务A和事务B并发执行时&#xff0c;当事务A更新后&#xff0c;事务B查询读取到A尚未提交的数据&#xff0c;此时事务A…
阅读更多...
矩阵乘法的直觉

矩阵乘法的直觉

矩阵乘法是什么意思&#xff1f; 一种常见的观点是矩阵乘法缩放/旋转/倾斜几何平面&#xff1a; NSDT工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜…
阅读更多...
Django REST framework序列化器详解：普通序列化器与模型序列化器的选择与运用

Django REST framework序列化器详解：普通序列化器与模型序列化器的选择与运用

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…
阅读更多...
实用技巧：跳过TCODE权限检查ALINK_CALL_TRANSACTION

实用技巧：跳过TCODE权限检查ALINK_CALL_TRANSACTION

RFC&#xff1a;ALINK_CALL_TRANSACTION 遇到tcode 提示没有权限打开&#xff0c;可以通过这个RFC,debug 修改检查值&#xff0c;打开TCODE。 适用于紧急情况 断点打在20行&#xff0c;SY-SUBRC 的值改成 1
阅读更多...
碳化硅陶瓷膜出色的耐腐蚀性能

碳化硅陶瓷膜出色的耐腐蚀性能

在科技日新月异的今天&#xff0c;材料科学的发展为各个领域带来了革命性的变革。碳化硅陶瓷膜&#xff0c;作为一种高性能的先进陶瓷材料&#xff0c;凭借其独特的物理和化学特性&#xff0c;正在逐步成为现代工业不可或缺的一部分。 碳化硅陶瓷膜&#xff0c;顾名思义&#x…
阅读更多...
TensorRT的循环样例代码

TensorRT的循环样例代码

官方文档地址 https://docs.nvidia.com/deeplearning/tensorrt/developer-guide/index.html#define-loops 非顺序结构，其内容确实有点乱，而且没有完整可运行的样例。 可以有多个IIteratorLayer, IRecurrenceLayer, and ILoopOutputLayer 层，最多有2个ITripLimitLayers层。 …
阅读更多...
有人说考个PMP证两个星期搞定？

有人说考个PMP证两个星期搞定？

PMP考试的时间并不需要太久&#xff0c;如果高效用心备考的话在对考试需要准备的时间上也只需要2-3个月的业余时间。而一次考试的时间也只需要半天&#xff0c;一门科目&#xff0c;就是《PMBOK》的知识。所以如果想学习项目管理考PMP认证的朋友&#xff0c;大可放心参加考试。…
阅读更多...
【递归、搜索与回溯】综合练习三

【递归、搜索与回溯】综合练习三

综合练习三 1.优美的排列3.N 皇后3.有效的数独4.解数独 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.优美的排列 题目链接&#xff1a;5…
阅读更多...
用寄存器读取文件的数据的时候，寄存器怎么读取，寄存器的高位和低位分别是什么

用寄存器读取文件的数据的时候，寄存器怎么读取，寄存器的高位和低位分别是什么

如图所示 寄存器读取数据的时候&#xff0c;数据自身是什么样的&#xff0c;寄存器读的时候就原样存储在寄存器里&#xff0c;高位就是第一个数据&#xff0c;低位就是最后一个数据 寄存器读取数据原理是&#xff0c;将给定的二进制数反转&#xff0c;我理解成调转一下车头&…
阅读更多...
驾驭未来：智能网关如何革新车联网体验

驾驭未来：智能网关如何革新车联网体验

车联网&#xff08;Internet of Vehicles&#xff09;是一个跨领域的技术综合体&#xff0c;它基于物联网&#xff0c;利用先进的信息通信技术实现车与车、车与路、车与人、车与服务平台等的全方位网络连接。 龙兴物联智能网关是集成了多协议、多接口&#xff0c;具有综合数据采…
阅读更多...
Three.js动效（第15辑）：让前端手撕UI，拳打后端的效果。

Three.js动效（第15辑）：让前端手撕UI，拳打后端的效果。

three.js的设计效果非常复杂&#xff0c;后端提供的数据接口问题百出&#xff0c;这很容易让前端手撕UI、拳打后端&#xff0c;这种请详细该如何办呢&#xff1f; 前端 VS UI&#xff1a; 1. 沟通协调&#xff1a;UI和前端应该加强沟通&#xff0c;理解对方的工作难点和需求&…
阅读更多...
最新文章

Copyright @ 2022~2023