Element-plus安装及其基础组件使用

news2024/9/27 8:11:27

简而言之，在main.js中导出以下库,仅此，搞多了出错难排查

import ElementPlus from 'element-plus' //导入ElementPlus 模块

import 'element-plus/dist/index.css' //引入样式

 app.use(ElementPlus) //注册库就能使用了

Element Plus 是一个基于 Vue 3 的组件库，提供了一系列 UI 组件（如按钮、表格、对话框等），可以帮助快速构建用户界面。那么提供了该组件跟我平常直接在<template></template>标签中直接写<button></button>标签来创建按钮有什么区别？

Element Plus 组件实际上是对原生 HTML 和 CSS 的封装，它提供了一系列预定义的样式和功能，使得开发者可以更轻松地构建一致且美观的用户界面

  1. 封装：Element Plus 组件将原生 HTML 元素（如按钮、表格等）进行了封装，增加了丰富的样式和功能选项。

  2. 样式与一致性：组件自带的样式确保了在不同设备和浏览器上的一致性，减少了样式调整的复杂性。

  3. 事件处理：尽管组件库提供了许多内置功能，事件处理仍然需要使用 JavaScript 进行定义和处理。这与原生 HTML 是一样的。

  4. 使用方便：通过使用组件，开发者可以更快地实现复杂的功能，而不必从头开始设计和实现所有的样式和行为。

 一.安装

使用包管理器：

# NPM

 npm install element-plus --save

# Yarn

 yarn add element-plus

# pnpm 

pnpm install element-plus


如果网络环境不好，建议使用中国npm镜像:

设置清华大学镜像并安装element-plus：

npm config set registry https://mirrors.tuna.tsinghua.edu.cn/npm/
npm install element-plus
 

中国科学技术大学(USTC)镜像：

npm config set registry https://mirrors.ustc.edu.cn/npm/
npm install element-plus
 

淘宝镜像：
npm config set registry https://registry.npm.taobao.org
npm install element-plus
 

使用cnpm 作为npm 的替代工具，自动使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install element-plus
 

如果想要切换回npm官方源

npm config set registry https://registry.npmjs.org
 

浏览器直接引入：

unpkg:

 <head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

jsDelivr:

 <head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

二.在项目中使用Element Plus

引入：
（volar适用于ts,而对于js，使用vetur)

完整引入（对打包后的文件大小不在乎，使用完整导入更方便）

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //从element-plus库中导入ElementPlus对象，该对象主要是库的主要功能或组件集合，可在vue应用中使用
import 'element-plus/dist/index.css' //引入样式
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus) //注册库，所有Element Plus组件都可以在应用中使用，在所有组件中都能使用
app.mount('#app')

按需导入：
安装额外插件来导入要使用的组件

安装 unplugin-vue-components 和 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import 

 将下面代码插入vite配置文件vite.config.js中

// vite.config.js

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  
  plugins: [
    vue(), //添加vue插件，千万不要把它忘记了，报一堆错，浏览器一片红
    
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

作用：
 

 自动导入：使用 unplugin-auto-import，可以在代码中直接使用 Element Plus 的 API，而无需手动导入，这样可以简化代码并提高开发效率。

自动注册组件：通过 unplugin-vue-components 和 ElementPlusResolver，可以自动注册所有使用的 Element Plus 组件，避免在每个文件中重复注册，简化组件管理。

提升开发体验：减少样板代码，提高代码整洁性和可维护性，使开发者能更专注于业务逻辑。

Element Plus 的 API 包括组件、属性、事件和方法等。以下是一些常见的 Element Plus API：


常见组件


1.基础组件：
 

  • Button：按钮组件，支持多种样式和尺寸。
  • Input：输入框组件，支持文本输入和验证。
  • Select：下拉选择框组件，支持多选和搜索。

2.布局组件：
 

  • Container：用于布局的容器组件，可以设置顶部、底部、侧边栏等。
  • Row/Col：栅格布局组件，用于快速创建响应式布局。

3.表单组件：

  • Form：表单组件，支持表单验证。
  • Checkbox、Radio、Switch：用于选择的各种组件。


4.反馈组件：

  • Message：全局消息提示组件。
  • Notification：通知提示组件。

5.数据展示组件：

  • Table：表格组件，支持排序、筛选和分页。
  • Pagination：分页组件，用于数据分页展示。


组件的属性和方法：

  • 属性：每个组件都有一系列可配置的属性，例如：

    • type、size：用于设置按钮的类型和尺寸。
    • placeholder：用于设置输入框的占位符文本。

  • 事件：组件通常会提供事件监听，例如：

    • click：按钮的点击事件。
    • change：输入框内容变化时触发的事件。

  • 方法：某些组件提供的方法，可以在实例中调用，例如：

    • show()：显示模态框。
    • hide()：隐藏模态框。

全局配置

在引入ElementPlus时，可以传入一个包含size和zIndex属性的全局配置对象。size用于设置表单组建的默认尺寸，zIndex用于设置弹出组件的层级，zIndex的默认值为2000

完整引入（上边注册库仅仅是app.use(ElementPlus))

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入：

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

 

 三.组件

基础组件：
button按钮：

button属性：


button插槽：


button方法：





 

  • <el-button>：单个按钮，用于执行一个特定的操作。
  • <el-button-group>：包含多个按钮，通常用于一组相关的操作，比如多种选择或工具栏。
  • 使用 button-group 时，按钮之间的间距和样式会自动调整，视觉上更整齐
     

示例：

<template>
  <el-button-group>
    <el-button type="primary">按钮1</el-button>
    <el-button>按钮2</el-button>
    <el-button type="success">按钮3</el-button>
  </el-button-group>
</template>

三个按钮被包裹在 button-group 中，形成了一个统一的操作区域。

Border边框：

边框样式：（实线和虚线）

border-top:1px solid var(--el-border-color)

<script setup>
</script>

  <template>
  <table class="demo-border">
    <tbody>
      <tr>
        <td class="text">Name</td>
        <td class="text">Thickness</td>
        <td class="line">Demo</td>
      </tr>
      <tr>
        <td class="text">Solid</td>
        <td class="text">1px</td>
        <td class="line">
          <!-- <div /> -->
           <div></div>
        </td>
      </tr>
      <tr>
        <td class="text">Dashed</td>
        <td class="text">2px</td>
        <td class="line">
          <div class="dashed" ></div>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped>
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);  /*上边框，--el-border-color是element-plus中定义的一个css变量，是个默认颜色值*/
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>




圆角样式：(el-border-radius)

<script setup>
</script>

<template>
  <!-- el-row创建行，gutter属性设置外边距，即列与列之间的间距 。: 前缀表示这是一个动态绑定，意味着 gutter 的值来自 Vue 的数据或计算属性-->
  <el-row :gutter="12" class="demo-radius"> 
    <el-col
      v-for="(radius, i) in radiusGroup"
      :key="i"
      :span="6"
      :xs="{ span: 12 }"
    >
      <div class="title">{{ radius.name }}</div>
      <div class="value">
        <code>
          border-radius:
          {{
            radius.type
              ? useCssVar(`--el-border-radius-${radius.type}`)
              : '"0px"'
          }}
        </code>
      </div>
      <div
        class="radius"
        :style="{
          borderRadius: radius.type
            ? `var(--el-border-radius-${radius.type})`  <!----el-border-radius-->
            : '',
        }"
      />
    </el-col>
  </el-row>
 
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'

const radiusGroup = ref([
  {
    name: 'No Radius',
    type: '',
  },
  {
    name: 'Small Radius',
    type: 'small',
  },
  {
    name: 'Large Radius',
    type: 'base',
  },
  {
    name: 'Round Radius',
    type: 'round',
  },
])
</script>
<style scoped>
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>


阴影：（el-box-shadow)

<template>
  <div class="flex justify-between items-center flex-wrap">
    <div
      v-for="(shadow, i) in shadowGroup"
      :key="i"
      class="flex flex-col justify-center items-center"
      m="auto"
      w="46"
    >
      <div
        class="inline-flex"
        h="30"
        w="30"
        m="2"
        :style="{
          boxShadow: `var(${getCssVarName(shadow.type)})`,
        }"
      />
      <span p="y-4" class="demo-shadow-text" text="sm">
        {{ shadow.name }}
      </span>
      <code text="xs">
        {{ getCssVarName(shadow.type) }}
      </code>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const shadowGroup = ref([
  {
    name: 'Basic Shadow',
    type: '',
  },
  {
    name: 'Light Shadow',
    type: 'light',
  },
  {
    name: 'Lighter Shadow',
    type: 'lighter',
  },
  {
    name: 'Dark Shadow',
    type: 'dark',
  },
])

const getCssVarName = (type: string) => {     
  return `--el-box-shadow${type ? '-' : ''}${type}`    //el-box-shadow
}
</script>


color色彩：Element Plus为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为搭建的产品提供一致的外观视觉感受

主色
 




中性色
中性色用于文本、背景和边框颜色。 通过运用不同的中性色，来表现层次结构

Container布局容器

 

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

常见的页面布局

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:#D4D7DE;color:red">Header</el-header>
      <el-main style="background:#409EFF;color:blask">Main</el-main>
    </el-container>
  </div>
</template>







<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>







|







lcon图标
Element Plus提供了一套常用的图标集合（如果想要直接使用，需要全局注册组件）

安装


使用包管理器

# NPM
npm install @element-plus/icons-vue


# Yarn
yarn add @element-plus/icons-vue


# pnpm
pnpm install @element-plus/icons-vue

法1：注册所有图标

需要从@element-plus/icons-vue 中导入所有图标并进行全局注册

  1. Object.entries(ElementPlusIconsVue): 获取 ElementPlusIconsVue 对象中所有的键值对（图标组件）。

  2. for (const [key, component] of ...): 遍历每个图标的键（名称）和对应的组件。

  3. app.component(key, component): 将每个图标组件以其名称注册到 Vue 应用中，使得在模板中可以直接使用这些图标。

这样，开发者就可以方便地在应用中使用 ElementPlus 提供的图标组件

// main.js

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

法2：直接通过浏览器的HTML标签导入Element Plus，然后就能使用全局变量ElementPlusIconsVue
根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例
使用unpkg:
<script src="//unpkg.com/@element-plus/icons-vue"></script>

使用jsDelivr:

<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>

基础用法
 

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>
</template>

<!--<Edit /> 是一个 SVG 图标组件，通常来自 Element Plus 图标库。它用于在界面中显示一个编辑图标。代码中的 <el-icon> 组件用来包裹这个图标，并通过 :size 和 :color 属性动态设置图标的大小和颜色。如果不使用 <el-icon> 包裹，<Edit /> 图标仍然可以独立显示，但会使用默认样式。-->

结合el-icon使用

<template>
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </p>
  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409efc" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
</template>


直接使用svg图标
 

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>


Layout布局

通过基础的24分栏，迅速简便创建布局

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。















Link链接



scrollbar滚动条



space间距

虽然我们拥有 Divider 组件，但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构，因此我们会重复的使用很多的 Divider 组件，这在我们的开发效率上造成了一定的困扰。 间距组件就是为了解决这种困扰应运而生的


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

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

相关文章

Linux进阶命令-小结

Linux进阶命令-小结

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…
阅读更多...
通过 OBD Demo 体验 OceanBase 4.3 社区版

通过 OBD Demo 体验 OceanBase 4.3 社区版

本文作者&#xff1a;马顺华 引言 OceanBase 4.3 是一个专为实时分析 AP 业务设计的重大更新版本。它基于LSM-Tree架构&#xff0c;引入了列存引擎&#xff0c;实现了行存与列存数据存储的无缝整合。这一版本不仅显著提升了AP场景的查询性能&#xff0c;同时也确保了TP业务场景…
阅读更多...
GPT-4o高级语音全量上线：自定义指令、记忆功能引爆新体验

GPT-4o高级语音全量上线：自定义指令、记忆功能引爆新体验

千呼万唤&#xff0c;GPT-4o高级语音终于开始全量推出&#xff0c;Plus用户一周内都能用了&#xff01; 没错&#xff0c;是Her是Her就是Her。 让大伙儿苦苦等了四个月&#xff0c;OpenAI这次发帖子也是变着法道歉。 晒的展示视频&#xff0c;咱就这句话听得真真切切&#xf…
阅读更多...
Vue3 + ElementPlus 的后台菜单指引

Vue3 + ElementPlus 的后台菜单指引

文章目录 需求实现思路 需求 实现思路 引导页用 Drive.js 基本的使用操作这里写了一些菜单使用 ElementPlus 的组件&#xff0c;可以调用组件中暴露的这个方法&#xff0c;具体使用方法在这里说明 二者结合一下&#xff0c;就可以有这样的效果了
阅读更多...
java项目之社区智慧养老监护管理平台设计与实现源码(springboot)

java项目之社区智慧养老监护管理平台设计与实现源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的社区智慧养老监护管理平台设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 社区…
阅读更多...
Java查找算法——（四）分块查找（完整详解,附有代码+案例）

Java查找算法——（四）分块查找（完整详解,附有代码+案例）

文章目录 分块查找1.1普通分块查找 分块查找 1.1普通分块查找 分块原则&#xff1a; 块内无序&#xff0c;块间有序:前一块中的最大数据&#xff0c;小于后一块中所有的数据&#xff0c;块与块之间不能有数据重复的交集。块的数量一般等于数字个数开根号 核心思路&#xff…
阅读更多...
有威胁的武器武装检测系统源码分享

有威胁的武器武装检测系统源码分享

有威胁的武器武装检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comp…
阅读更多...
双控开关接入NVBoard

双控开关接入NVBoard

导入NVBoard git仓库&#xff1a;https://github.com/NJU-ProjectN/nvboard 按照ysyx手册的要求&#xff0c;初始化NVBoard项目。 由于GitHub在国外&#xff0c;可能会超时无响应&#xff1a; 解决方案是修改代理。 当前的运行环境是VM VirtualBox虚拟机&#xff0c;网卡是…
阅读更多...
MySQL高阶1949-坚定地友谊

MySQL高阶1949-坚定地友谊

目录 题目 准备数据 分析数据 实现 题目 如果 x 和 y 为 朋友 且他们 至少 有三个共同的朋友 &#xff0c;那么 x 和 y 之间的友谊就是 坚定的。 写一个解决方案来找到所有的 坚定的友谊。 注意&#xff0c;结果表不应该包含重复的行&#xff0c;并且 user1_id < us…
阅读更多...
一些Spring面试题

一些Spring面试题

Spring boot可以同时处理多少个请求? 用户进来先看目前数量是否小于最大连接数&#xff0c;多于【最大连接数最大队列数】的线程会等待&#xff0c;超过最大等待时间会TIME_OUT 81921008292
阅读更多...
软件测试找工作|20道银行项目高频面试题

软件测试找工作|20道银行项目高频面试题

小编给大家上面试干货啦&#xff01;把前两天整理的银行项目面试题系列汇总给你们复习吼&#xff01; 先来看下面试题的目录叭...... 1、介绍一下贷款的项目&#xff1f; 贷款项目是银行业务中的重要组成部分&#xff0c;它是指银行向客户提供资金&#xff0c;让客户在约定的…
阅读更多...
kubectl linux 安裝

kubectl linux 安裝

添加 Kubernetes 的yum仓库&#xff0c;会覆盖 /etc/yum.repos.d/kubernetes.repo 中现存的所有配置 cat <<EOF | sudo tee /etc/yum.repos.d/kubernetes.repo [kubernetes] nameKubernetes baseurlhttps://pkgs.k8s.io/core:/stable:/v1.28/rpm/ enabled1 gpgcheck1 gpg…
阅读更多...
Docker从入门到精通_01 Docker：引领云计算的新浪潮

Docker从入门到精通_01 Docker：引领云计算的新浪潮

Docker从入门到精通_01 Docker&#xff1a;引领云计算的新浪潮 云计算作为信息技术领域的重要支柱&#xff0c;正以前所未有的速度发展。然而&#xff0c;传统的虚拟化架构在资源利用、部署效率、应用扩展等方面已逐渐显露出其局限性。在这样的背景下&#xff0c;容器云技术应…
阅读更多...
如何使用 python 调用 llama3 进行对话？

如何使用 python 调用 llama3 进行对话？

Meta 已将最新的 LLaMa3 进行了开源&#xff0c;因此&#xff0c;我们也可以方便的使用 Python 进行 LLaMa3 模型的调用和开发。 接下来&#xff0c;简单介绍如何通过 transformers 库来使用 LLaMa3。 1、导入库 首先&#xff0c;导入必要的库&#xff1a; pip3 install tra…
阅读更多...
【2024】前端学习笔记10-基本选择器-组合选择器

【2024】前端学习笔记10-基本选择器-组合选择器

学习笔记 基本选择器ID选择器 组合选择器后代选择器子选择器兄弟选择器 基本选择器 之前文章使用的分别为元素选择器和类选择器&#xff0c;这里不再过多记录。 元素选择器 p {color: blue;font-size: 14px; }在这个例子中&#xff0c;所有的<p>元素的文本颜色将被设置…
阅读更多...
常见区块链数据模型介绍

常见区块链数据模型介绍

除了加密技术和共识算法&#xff0c;区块链技术还依赖于一种数据模型&#xff0c;它决定了信息如何被结构化、验证和存储。数据模型定义了账户如何管理&#xff0c;状态转换如何发生&#xff0c;以及用户和开发者如何与系统交互。 在区块链技术的短暂历史中&#xff0c;数据…
阅读更多...
如何开发数字药店与医保购药APP：技术架构与实现细节

如何开发数字药店与医保购药APP：技术架构与实现细节

本文将深入探讨数字药店与医保购药APP的技术架构及其实现细节&#xff0c;帮助开发者更好地理解该领域的技术需求。 一、技术架构概述 数字药店与医保购药APP的技术架构通常可以分为以下几个层次&#xff1a; 1.前端层&#xff1a; -用户界面 -用户体验 2.中间层&#xff…
阅读更多...
c++初级——多态

c++初级——多态

多态的概念 多态的概念&#xff1a;通俗来讲&#xff0c;就是多种形态。 多态也有类别&#xff08;我们把编译时⼀般归为静态&#xff0c;运⾏时归为动态&#xff09; 运行时多态&#xff08;静态多态&#xff09;其中包括函数重载和函数模板&#xff0c;它们通过传不同类型…
阅读更多...
RS FSW43 信号与频谱分析仪

RS FSW43 信号与频谱分析仪

FSW43 信号与频谱分析仪 苏州新利通仪器仪表有限公司 Rohde & Schwarz FSW43 信号与频谱分析仪具有较高内部分析带宽&#xff0c;可对宽带组件和通信系统进行特征校准。同时具备出色的相位噪声和灵敏度&#xff0c;有助于开发高性能振荡器。 R&SFSW 信号与频谱分析…
阅读更多...
③无需编程 独立通道 Modbus主站EtherNet/IP转ModbusRTU/ASCII工业EIP网关串口服务器

③无需编程 独立通道 Modbus主站EtherNet/IP转ModbusRTU/ASCII工业EIP网关串口服务器

Modbus主站EtherNet/IP转ModbusRTU/ASCII工业EIP网关串口服务器https://item.taobao.com/item.htm?ftt&id743840591638 接上一章 EtherNet/IP 串口网关 EtherNet/IP 转 RS485 EtherNet/IP 通信功能 EtherNet/IP 概述 EtherNet/IP 是通过“ODVA(Open DeviceNet Vendor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023