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

news2024/11/21 0:37:46

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

何时使用

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

案例：步骤条组件

核心代码：

<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.coloradmin.cn/o/1811054.html

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

相关文章

如何从 Mac Studio 恢复丢失的数据？以下是 4 种 Mac Studio 恢复方法

如何从 Mac Studio 恢复丢失的数据？以下是 4 种 Mac Studio 恢复方法

今&#xff0c;意外丢失计算机数据已变得十分常见。无论您是 Mac 用户还是 Windows 计算机&#xff0c;都是如此。 造成这种现象的意外原因有很多。意外点击Mac 的“清空垃圾”命令可能会让您大吃一惊&#xff0c;因为您可能还没有准备好从垃圾中删除这些数据。 您想使用Comm…
阅读更多...
【GD32F303红枫派使用手册】第十二节 ADC-双轴按键摇杆多通道循环采样实验

【GD32F303红枫派使用手册】第十二节 ADC-双轴按键摇杆多通道循环采样实验

12.1 实验内容 本实验是通过ADC规则组多通道循环采样方式实现双轴按键摇杆传感器x和y轴电压值的读取&#xff0c;通过本实验主要学习以下内容&#xff1a; 双轴按键摇杆传感器工作原理 DMA原理 规则组多通道循环采样 12.2 实验原理 12.2.1 双轴按键摇杆传感器工作原理 摇…
阅读更多...
远程咨询的好处都有哪些呢？

远程咨询的好处都有哪些呢？

随着科技的飞速发展&#xff0c;远程咨询正逐渐成为人们获取医疗服务的一种新方式。那么什么是远程咨询呢&#xff1f;其又有哪些好处呢&#xff1f;下面就给大家详细地说说。 远程咨询的概念 远程咨询&#xff0c;顾名思义&#xff0c;是指通过互联网技术&#xff0c;实现患…
阅读更多...
ISO 19115-3:2023 基本概念的 XML模式实现

ISO 19115-3:2023 基本概念的 XML模式实现

前言 ISO（国际标准化组织）是由各国标准化机构（ISO 成员机构）组成的全球性联合会。制定国际标准的工作通常由 ISO 技术委员会完成。对某一技术委员会所关注的主题感兴趣的每个成员机构都有权在该委员会中派代表。与 ISO 联络的国际组织、政府和非政府组织也参与工作。ISO 与…
阅读更多...
算法：11. 盛最多水的容器

算法：11. 盛最多水的容器

11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你…
阅读更多...
哪里有宣传海报制作模板？盘点可以套用的海报软件

哪里有宣传海报制作模板？盘点可以套用的海报软件

不论是精心筹备的盛会、充满爱意的婚礼仪式&#xff0c;还是家庭聚会的温馨时光&#xff0c;一份设计精巧的邀请函都是主人诚挚邀请的最好证明。它不仅传递着邀请&#xff0c;更承载着对宾客的尊重与期待。但你知道在哪里可以找到那些让人眼前一亮的邀请函海报制作模板吗&#…
阅读更多...
【Go语言精进之路】构建高效Go程序：了解map实现原理并高效使用

【Go语言精进之路】构建高效Go程序：了解map实现原理并高效使用

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【Go语言精进之路】 文章目录 引言一、什么是map1.1 map的基本概念与特性1.2 map的初始化与零值问题1.3 map作为引用类型的行为 二、map的基本操作2.1 插入数据2.2 获取数据个数2.3 查找和数据读取…
阅读更多...
Python 使用scrapy框架

Python 使用scrapy框架

1、安装scrapy 2、使用scrapy创建项目,在终端命令行 执行如下命令&#xff0c;会创建一个myproject项目 scrapy startproject myproject 3、创建完成后&#xff0c;目录结构如下 4、cd myproject进入项目 ,执行scrapy genspider weather ******&#xff0c;会在spiders下创建…
阅读更多...
数据库期末设计——图书管理系统

数据库期末设计——图书管理系统

目录 1.前置软件以及开发环境&#xff1a; 2.开发过程讲解 代码环节&#xff1a; 数据库代码 1.BookDao.java 2.BookTypeDao.java 3.UserDao.java 4.Book.java 5.BookType.java 6.User.java 7.DbUtil.java 8.Stringutil.java 9.BookAddInterFrm.java 10.BookMan…
阅读更多...
知识图谱的应用---新零售

知识图谱的应用---新零售

文章目录 新零售知识图谱构建过程典型应用 新零售 新零售&#xff0c;即个人、企业以互联网为依托&#xff0c;通过运用大数据、人工智能等先进技术手段并运用心理学知识&#xff0c;对商品的生产、流通与销售过程进行升级改造&#xff0c;进而重塑业态结构与生态圈&#xff0c…
阅读更多...
LlamaIndex 四 数据连接器

LlamaIndex 四 数据连接器

前言 我们通过各项配置&#xff0c;理解了LlamaIndex在构建知识库和基于知识库的推荐两个阶段&#xff0c;怎么和业务相结合。本文&#xff0c;我们将开始深入理解LlamaIndex的各个模块。首先&#xff0c;LlamaIndex强大的Data Connector 数据连接器上场。 LlamaIndex擅长和各…
阅读更多...
AI绘画Stable Diffusion必看：如何生成人物的全身照实战教程！

AI绘画Stable Diffusion必看：如何生成人物的全身照实战教程！

大家好&#xff0c;我是画画的小强 在小伙伴们私下留言中&#xff0c;关于如何实现人物的全身照一直有人咨询&#xff0c;看来这个问题还是困惑着不少小伙伴&#xff0c;今天我们就这个问题详细讨论一下。 一. 宽高比参数设置 在讨论如何生成图片的全身照之前&#xff0c;我…
阅读更多...
关于用宽带（拨号）连接VPN无法上网，但是wifi或者热点就可以的问题

关于用宽带（拨号）连接VPN无法上网，但是wifi或者热点就可以的问题

参考链接&#xff1a;https://zhuanlan.zhihu.com/p/580929250https://zhuanlan.zhihu.com/p/580929250 https://blog.csdn.net/Yaoyao2024/article/details/132245249文章浏览阅读10w次&#xff0c;点赞161次&#xff0c;收藏515次。很多同学在学习访问学校提供的资源时或者一…
阅读更多...
等保一体机案例 | 黑龙江某事业单位档案管理系统借助捷云过二级等保

等保一体机案例 | 黑龙江某事业单位档案管理系统借助捷云过二级等保

黑龙江某事业单位&#xff0c;聚焦产业发展的应用技术研究&#xff0c;兼顾重大技术应用的基础研究&#xff0c;满足广东省经济社会发展需要。 由于信创要求&#xff0c;也为了满足《关于加强国家电子政务工程建设项目信息安全风险评估工作的通知》&#xff08;发 改高技〔2008…
阅读更多...
[图解]企业应用架构模式2024新译本讲解13-服务层1

[图解]企业应用架构模式2024新译本讲解13-服务层1

1 00:00:00,150 --> 00:00:05,030 接下来我们来看服务层模式 2 00:00:06,070 --> 00:00:11,740 这也是领域逻辑类型的最后一个模式 3 00:00:13,700 --> 00:00:17,110 我们前面实际上已经见过了&#xff0c;事务脚本 4 00:00:17,240 --> 00:00:19,900 的时候&…
阅读更多...
citys

citys

城市边界电子围栏 初始化摄像头、灯光等 let renderer, scene, camera, stats, gui, texture;renderer new THREE.WebGLRenderer({logarithmicDepthBuffer: true,});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeigh…
阅读更多...
如何实现单例模式及不同实现方法分析-设计模式

如何实现单例模式及不同实现方法分析-设计模式

这是 一道面试常考题&#xff1a;&#xff08;经常会在面试中让手写一下&#xff09; 什么是单例模式 【问什么是单例模式时&#xff0c;不要答非所问&#xff0c;给出单例模式有两种类型之类的回答&#xff0c;要围绕单例模式的定义去展开。】 单例模式是指在内存中只会创建…
阅读更多...
一颗万能的PD协议芯片，能芯Type-C PD协议芯片“ECP5705”, 它是如何实现PD直流风扇应用呢？

一颗万能的PD协议芯片，能芯Type-C PD协议芯片“ECP5705”, 它是如何实现PD直流风扇应用呢？

文章目录 文章目录 前言 一、PD风扇方案介绍 二、芯片介绍 三、PD风扇-供电方式 四、能芯科技 PD 协议芯片ECP5705-应用场景 总结 前言 随着USB Type-C接口的普及和PD取电芯片的出现&#xff0c;使得小型家电和电动工具可以通过统一的USB Type-C接口进行充电&#xff0c;极大地…
阅读更多...
台灯学生用哪个牌子最好？学生台灯十大名牌排行榜分享

台灯学生用哪个牌子最好？学生台灯十大名牌排行榜分享

近年来&#xff0c;我们注意到儿童近视的现象呈现出增多且趋于低龄化的趋势。这一变化&#xff0c;部分原因可以归咎于孩子们越来越多地使用电子产品&#xff0c;另一部分则与他们面临的学业压力增加有关。鉴于此&#xff0c;家长们在挑选儿童学习用品时变得格外谨慎&#xff0…
阅读更多...
js实现简单计算器词法解析语法解析解释器，带可视化界面

js实现简单计算器词法解析语法解析解释器，带可视化界面

代码 Lexer是词法解析器 Parser是语法解析器 Interpreter 是ast解释器 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023