当前位置: 首页 > news >正文

uniapp微信小程序基于wu-input二次封装TInput组件(支持点击下拉选择、支持整数、电话、小数、身份证、小数点位数控制功能)

一、 最终效果

在这里插入图片描述

二、实现了功能

1、支持输入正整数---设置`specifyType=integer`
2、支持输入数字(含小数点)---设置`specifyType=decimal`,可设置`decimalLimit`来调整小数点位数
3、支持输入手机号--设置`specifyType=phone`
4、支持输入身份证号---设置`specifyType=idCard`
4、支持失焦后校验错误提示
5、支持title自定义或者slotLabel插槽
6、支持inputType输入框类型可选值:input/select 
7、支持自带下拉选择

三、TInput 参数配置

1、代码示例:

<TInput v-model="value" titlt="标题" />

2. 配置参数(Attributes)继承wu-input及wu-popup的所有参数事件

参数说明类型默认值
v-modelinput绑定值String /number-
v-model:select-valueinputType:select 的绑定值String /number-
titlelabel标题String-
inputType输入框类型可选值:input/selectStringinput
required是否必填红点标识booleanfalse
decimalLimit小数点后保留几位number2
specifyType指定输入类型"text"/“decimal”/“phone” /“integer” / “idCard”Stringtext
showThousands是否显示千分位booleanfalse
isShowErrorTip输入框失焦是否提示错误信息booleanfalse
isLink是否展示右侧箭头(inputType=select自动展示)booleanfalse
iconArrow右侧箭头图标String‘arrow-right’
iconArrowColor右侧箭头颜色String#969799
isColonlabel标题是否显示冒号booleantrue
isShowBorder是否显示下边框booleanfalse
listinputType=select自带下拉数据源array[]
customKey列表项自定义keyStringkey
customLabel列表项自定义labelstringlabel
popupTitle自带下拉框标题显示string-
isPopupTitleBorder自带下拉框标题与列表边框显示booleanfalse

3. Events

事件名说明返回值
clickInputlist没有设置时点击input触发-

4. Slot

事件名说明
slotInput右侧input框插槽
slotLabel左侧label插槽
prefixinput前缀插槽
suffixinput后缀插槽

四、源码

<template><view class="t_input"><view class="list-call" :class="{ is_border: isShowBorder }"><view class="t_input_title" v-if="isShow('slotLabel')"><slot name="slotLabel" /></view><view class="t_input_title" v-else><view class="t_input_required" v-if="required">*</view>{{ title }}<text v-if="isColon">: </text></view><view class="t_input_value_slot" v-if="isShow('slotInput')"><slot name="slotInput" /></view><view class="t_input_value" v-else @click="openPopup"><wu-input v-bind="fieldAttrs" v-model="selectValue" @blur="handleBlur" v-if="inputType === 'input'"><template #prefix><slot name="prefix" /></template><template #suffix><slot name="suffix" /></template></wu-input><wu-input v-bind="fieldAttrs" v-model="finallySelectLabel" v-else><template #prefix><slot name="prefix" /></template><template #suffix><slot name="suffix" /></template></wu-input><wu-icon :name="iconArrow" :color="iconArrowColor" v-if="isLink || inputType === 'select'"></wu-icon></view></view><wu-popup ref="popup" v-bind="{ closeable: true, mode: 'bottom', round: 15, ...attrs }"><view class="t_input_popup-list"><view class="t_input_popup-title" :class="{ 't_input_popup-title-border': isPopupTitleBorder }">{{ popupTitle }}</view><viewclass="t_input_popup-item"v-for="(item, index) in list":key="index"@click="selectItem(item)":class="{ is_active: selectLabel === item[props.customLabel] }">{{ item[props.customLabel] }}</view></view></wu-popup></view>
</template><script lang="ts" setup>
import { ref, computed, useAttrs, useSlots } from "vue";
// 定义 ListItem 接口
interface ListItem {[key: string]: string | number; // 支持任意字符串键customKey: string | number;customLabel: string;
}
interface TInputProps {title?: string;inputType: "input" | "select";decimalLimit?: number; // 小数点后保留几位specifyType?: "text" | "decimal" | "phone" | "integer" | "idCard"; // 指定输入类型showThousands?: boolean; // 是否显示千分位isShowErrorTip?: boolean; // 是否显示错误提示required?: boolean; // 是否必填isLink?: boolean; // 是否展示右侧箭头iconArrow?: string; // 右侧箭头图标iconArrowColor?: string; // 右侧箭头颜色isColon?: boolean; // 是否显示冒号isShowBorder?: boolean; // 是否显示下边框list?: ListItem[]; // 列表项customKey?: string; // 列表项的keycustomLabel?: string; // 列表项的labelpopupTitle?: string; // 弹出框标题isPopupTitleBorder?: boolean; // 是否显示弹出框title的边框modelValue?: string | number; // type:input 的绑定值selectValue?: string | number; // type:select 的绑定值
}
const props = withDefaults(defineProps<TInputProps>(), {title: "",inputType: "input",specifyType: "text",showThousands: false,isShowErrorTip: false,decimalLimit: 2,required: false,list: () => [] as ListItem[],customKey: "key",customLabel: "label",popupTitle: "",isPopupTitleBorder: false,isLink: false,isShowBorder: true,isColon: true,iconArrow: "arrow-right",iconArrowColor: "#969799",modelValue: "",selectValue: ""
});const emit = defineEmits<{(event: "update:modelValue", value: string | number): void;(event: "update:selectValue", value: string | number): void;(event: "clickInput"): void;
}>();
const attrs = useAttrs();
const popup = ref<null | any>(null);
const slots = useSlots();const isShow = (name: string) => {return Object.keys(slots).includes(name);
};const selectLabel = ref<string | number>("");const selectValue = computed({get: () => props.modelValue,set: (val: string | number) => {emit("update:modelValue", val);}
});
const selectModelLabel = computed({get: () => props.selectValue,set: (val: string | number) => {emit("update:selectValue", val);}
});
const finallySelectLabel = computed(() => {if (props?.list?.length > 0) {return selectLabel.value;} else {return selectModelLabel.value;}
});
const handleBlur = () => {let formattedValue = selectValue.value;const formatValue = (value: any, formatter: (val: any) => any) => {if (formatter) {return formatter(value);}return value;};switch (props.specifyType) {case "decimal": // 小数点后保留几位formattedValue = formatValue(Number(selectValue.value), value =>formatDecimal(value, props.decimalLimit));break;case "phone": // 手机号码formattedValue = formatValue(selectValue.value.toString(), validatePhone);break;case "integer": // 整数formattedValue = formatValue(selectValue.value.toString(), validateInteger);break;case "idCard": // 身份证号码formattedValue = formatValue(selectValue.value.toString(), validateIdCard);break;default: // 默认处理formattedValue = selectValue.value;}selectValue.value = formattedValue;
};
// 手机号码校验
const validatePhone = (value: string) => {const phoneReg = /^1[3456789]\d{9}$/;if (phoneReg.test(value)) {return value;} else {props.isShowErrorTip &&uni.showToast({title: "请输入正确的手机号码",icon: "none"});return "";}
};
// 身份证号码校验
const validateIdCard = (value: string) => {const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;if (idCardReg.test(value)) {return value;} else {props.isShowErrorTip &&uni.showToast({title: "请输入正确的身份证号码",icon: "none"});return "";}
};
// 整数校验
const validateInteger = (value: string) => {const integerReg = /^\d+$/;if (integerReg.test(value)) {return value;} else {props.isShowErrorTip &&uni.showToast({title: "请输入正确的整数",icon: "none"});return "";}
};
// 小数转换
const formatDecimal = (value: number, decimalLimit: number) => {if (!value) {props.isShowErrorTip &&uni.showToast({title: "请输入正确的数字",icon: "none"});return "";}// 格式化千分号if (props.showThousands) {const val = value.toFixed(decimalLimit).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");return val;} else {return value.toFixed(decimalLimit);}
};
// 计算属性 fieldAttrs
const fieldAttrs = computed(() => ({border: "none",placeholder: props.inputType === "select" ? `请选择${props.title}` : `请输入${props.title}`,readonly: props.inputType === "select",type: "text",inputAlign: "right",clearable: true,...attrs
}));// 选择列表项
const selectItem = (item: ListItem) => {if (props.customLabel && item[props.customLabel]) {selectLabel.value = item[props.customLabel];emit("update:modelValue", item[props.customKey]);popup.value?.close();} else {console.error("Invalid customLabel or item:", props.customLabel, item);}
};// 打开弹窗
const openPopup = () => {if (props.inputType === "select" && props.list.length > 0) {popup.value?.open();} else {emit("clickInput");}
};
</script><style lang="scss" scoped>
.t_input {.list-call {display: flex;height: 54px;align-items: center;padding: 0 10px;&.is_border {border-bottom: 1px solid #eee;}.t_input_title {display: flex;height: inherit;align-items: center;.t_input_required {color: red;}}.t_input_value {flex: 1;display: flex;height: inherit;align-items: center;justify-content: flex-end;}.t_input_value_slot {display: flex;height: inherit;align-items: center;justify-content: flex-end;}}.t_input_popup-list {.t_input_popup-title {display: flex;align-items: center;justify-content: center;font-size: 16px;color: #101010;height: 44px;font-weight: bold;&.t_input_popup-title-border {border-bottom: 1px solid #eee;}}.t_input_popup-item {text-align: center;line-height: 45px;&.is_active {background-color: #f0f0f0;}}}
}
</style>

相关文章

基于ElementUi再次封装基础组件文档


Vue3+Vite+Ts+Pinia+Qiankun后台管理系统


vue3+ts基于Element-plus再次封装基础组件文档

相关文章:

uniapp微信小程序基于wu-input二次封装TInput组件(支持点击下拉选择、支持整数、电话、小数、身份证、小数点位数控制功能)

一、 最终效果 二、实现了功能 1、支持输入正整数---设置specifyTypeinteger 2、支持输入数字&#xff08;含小数点&#xff09;---设置specifyTypedecimal&#xff0c;可设置decimalLimit来调整小数点位数 3、支持输入手机号--设置specifyTypephone 4、支持输入身份证号---设…...

Java 大厂面试题 -- JVM 深度剖析:解锁大厂 Offe 的核心密钥

最近佳作推荐&#xff1a; Java大厂面试高频考点&#xff5c;分布式系统JVM优化实战全解析&#xff08;附真题&#xff09;&#xff08;New&#xff09; Java大厂面试题 – JVM 优化进阶之路&#xff1a;从原理到实战的深度剖析&#xff08;2&#xff09;&#xff08;New&#…...

小白入门JVM、字节码、类加载机制图解

前提知识~ JDK 基本介绍 JDK 的全称(Java Development Kit Java 开发工具包)JDK JRE java 的开发工具[java, javac,javadoc,javap 等]JDK 是提供给Java 开发人员使用的&#xff0c;其中包含了java 的开发工具&#xff0c;也包括了JRE。可开发、编译、调试…… JRE 基本介绍…...

新能源汽车动力性与经济性优化中的经典数学模型

一、动力性优化数学模型 动力性优化的核心目标是提升车辆的加速性能、最高车速及爬坡能力&#xff0c;主要数学模型包括&#xff1a; 1. 车辆纵向动力学模型 模型方程&#xff1a; 应用场景&#xff1a; 计算不同工况下的驱动力需求匹配电机扭矩与减速器速比案例&#xff…...

高级java每日一道面试题-2025年3月25日-微服务篇[Nacos篇]-Nacos中的命名空间(Namespace)有什么作用?

如果有遗漏,评论区告诉我进行补充 面试官: Nacos中的命名空间&#xff08;Namespace&#xff09;有什么作用&#xff1f; 我回答: 在Java高级面试中&#xff0c;关于Nacos中的命名空间&#xff08;Namespace&#xff09;的作用&#xff0c;是一个考察候选人对微服务架构和配…...

5.JVM-G1垃圾回收器

一、什么是G1 二、G1的三种垃圾回收方式 region默认2048 三、YGC的过程(Step1) 3.1相关代码 public class YGC1 {/*-Xmx128M -XX:UseG1GC -XX:PrintGCTimeStamps -XX:PrintGCDetails -XX:UnlockExperimentalVMOptions -XX:G1LogLevelfinest128m5% 60%6.4M 75M*/private stati…...

变量、数据、值类型引用类型的存储方式

代码写了也有2年了&#xff0c;对于这些基础的程序名词&#xff0c;说出口也是模棱两可&#xff0c;心里很不爽&#xff0c;很多基础还是模糊不清&#xff0c;清算一下...... Example值类型&#xff1a; int x 10; 变量&#xff1a;“x”是一个标识符&#xff0c;它对应着栈…...

分布式和微服务的区别

1. 定义 在讨论分布式系统和微服务的区别之前&#xff0c;我们先明确两者的定义&#xff1a; 分布式系统&#xff1a;是一组相互独立的计算机&#xff0c;通过网络协同工作&#xff0c;共同完成某个任务的系统。其核心在于资源的分布和任务的分解。 微服务架构&#xff1a;是…...

数组的常见算法一

注: 本文来自尚硅谷-宋红康仅用来学习备份 6.1 数值型数组特征值统计 这里的特征值涉及到&#xff1a;平均值、最大值、最小值、总和等 **举例1&#xff1a;**数组统计&#xff1a;求总和、均值 public class TestArrayElementSum {public static void main(String[] args)…...

Leedcode刷题 | Day27_贪心算法01

一、学习任务 455.分发饼干代码随想录376. 摆动序列53. 最大子序和 二、具体题目 1.455分发饼干455. 分发饼干 - 力扣&#xff08;LeetCode&#xff09; 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对…...

springboot集成kafka,后续需要通过flask封装restful接口

Spring Boot与Kafka的整合 在现代软件开发中&#xff0c;消息队列是实现服务解耦、异步消息处理、流量削峰等场景的重要组件。Apache Kafka是一个分布式流处理平台&#xff0c;它具有高吞吐量、可扩展性和容错性等特点。Spring Boot作为一个轻量级的、用于构建微服务的框架&am…...

MYSQL数据库语法补充2

一&#xff0c;数据库设计范式(原则) 数据库设计三大范式: 第一范式: 保证列的原子性(列不可再分) 反例:联系方式(手机,邮箱,qq) 正例: 手机号,qq,邮箱. 第二范式: 要有主键,其他列依赖于主键列,因为主键是唯一的,依赖了主键,这行数据就是唯一的. 第三范式: 多表关联时,在…...

Flask返回文件方法详解

在 Flask 中返回文件可以通过 send_file 或 send_from_directory 方法实现。以下是详细方法和示例: 1. 使用 send_file 返回文件 这是最直接的方法,适用于返回任意路径的文件。 from flask import Flask, send_fileapp = Flask(__name__)@app.route("/download")…...

随机数据下的最短路问题(Dijstra优先队列)

题目描述 给定 NN 个点和 MM 条单向道路&#xff0c;每条道路都连接着两个点&#xff0c;每个点都有自己编号&#xff0c;分别为 1∼N1∼N 。 问你从 SS 点出发&#xff0c;到达每个点的最短路径为多少。 输入描述 输入第一行包含三个正整数 N,M,SN,M,S。 第 22 到 M1M1 行…...

CPP杂项

注意&#xff1a;声明类&#xff0c;只是告知有这个类未完全定义&#xff0c;若使用类里具体属性&#xff0c;要么将访问块&#xff08;函数之类&#xff09;放到定义后&#xff0c;要么直接完全定义 C 友元函数/类的使用关键点&#xff08;声明顺序为核心&#xff09; 1. 友元…...

Idea将Java工程打包成war包并发布

1、问题概述? 项目开发之后,我们需要将Java工程打包成war后缀,并进行发布。之前在网上看到很多的文章,但是都不齐全,今天将提供一个完整的实现打包war工程,并发布的文章,希望对大家有所帮助,主要解决如下问题: 1、war工程需要满足的相关配置 2、如何解决项目中的JDK…...

多级缓存模型设计

为了有效避免缓存击穿、穿透和雪崩的问题。最基本的缓存设计就是从数据库中查询数据时&#xff0c;无论数据库中是否存在数据&#xff0c;都会将查询的结果缓存起来&#xff0c;并设置一定的有效期。后续请求访问缓存时&#xff0c;如果缓存中存在指定Key时&#xff0c;哪怕对应…...

SGLang实战:从KV缓存复用到底层优化,解锁大模型高效推理的全栈方案

在当今快速发展的人工智能领域&#xff0c;大型语言模型(LLM)的应用已从简单对话扩展到需要复杂逻辑控制、多轮交互和结构化输出的高级任务。面对这一趋势&#xff0c;如何高效地微调并部署这些大模型成为开发者面临的核心挑战。本文将深入探讨SGLang——这一专为大模型设计的高…...

【中大厂面试题】腾讯 后端 校招 最新面试题

操作系统 进程和线程的区别 本质区别&#xff1a;进程是操作系统资源分配的基本单位&#xff0c;而线程是任务调度和执行的基本单位 在开销方面&#xff1a;每个进程都有独立的代码和数据空间&#xff08;程序上下文&#xff09;&#xff0c;程序之间的切换会有较大的开销&am…...

数据结构第六章(一) -图

数据结构第六章&#xff08;一&#xff09; 图一、图的基本概念1.图的分类、度、权等2.路径、回路、连通等3.连通分量、生成树等 二、几种特殊的图1.完全图2.稠密图、稀疏图3.树、有向树 三、常见考点总结 图 一、图的基本概念 感觉要想怎么定义图&#xff0c;图就是顶点和边组…...

【技术白皮书】外功心法 | 第三部分 | 数据结构与算法基础(常用的数据结构)

数据结构与算法基础 什么是算法?算法效率查询和排序为什么排序如此重要?思考问题如何确定复杂性数据结构连续或链接的数据结构链表的优点数组的优点数组集合Set 声明的一些方法有Multiset多元集合栈和队列何时使用栈和队列数据字典字典Hash的实现时间复杂度对时间的影响什么是…...

spark简介和安装

spark概念 Spark 是一种基于内存的快速、通用、可扩展的大数据分析计算引擎 spark核心模块 Spark Core Spark Core 中提供了 Spark 最基础与最核心的功能&#xff0c;Spark 其他的功能如&#xff1a;Spark SQL&#xff0c;Spark Streaming&#xff0c;GraphX, MLlib 都是在 …...

如何在 CentOS 7 系统上以容器方式部署 GitLab,使用 ZeroNews 通过互联网访问 GitLab 私有仓库,进行代码版本发布与更新

第 1 步&#xff1a; 部署 GitLab 容器​ 在开始部署 GitLab 容器之前&#xff0c;您需要创建本地目录来存储 GitLab 数据、配置和日志&#xff1a; #创建本地目录 mkdir -p /opt/docker/gitlab/data mkdir -p /opt/docker/gitlab/config mkdir -p /opt/docker/gitlab/log#gi…...

springboot Filter实现请求响应全链路拦截!完整日志监控方案​​

一、为什么你需要这个过滤器&#xff1f;​​ 日志痛点&#xff1a; &#x1f6a8; 请求参数散落在各处&#xff1f; &#x1f6a8; 响应数据无法统一记录&#xff1f; &#x1f6a8; 日志与业务代码严重耦合&#xff1f; ​​解决方案​​&#xff1a; 一个Filter同时拦截请…...

spring mvc 在拦截器、控制器和视图中获取和使用国际化区域信息的完整示例

在拦截器、控制器和视图中获取和使用国际化区域信息的完整示例 1. 核心组件代码示例 1.1 配置类&#xff08;Spring Boot&#xff09; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.spring…...

docker部署jenkins并成功自动化部署微服务

一、环境版本清单&#xff1a; docker 26.1.4JDK 17.0.28Mysql 8.0.27Redis 6.0.5nacos 2.5.1maven 3.8.8jenkins 2.492.2 二、服务架构&#xff1a;有gateway&#xff0c;archives&#xff0c;system这三个服务 三、部署步骤 四、安装linux 五、在linux上安装redis&#…...

android 14.0 工厂模式 测试音频的一些问题(高通)

1之前用tinycap&#xff0c;现在得用agmcap 执行----agmcap /data/test.wav -D 100 -d 101 -i CODEC_DMA-LPAIF_RXTX-TX-3 -T 3 报错1 agmcap data/test.wav -D 100 -d 101 -i CODEC_DMA-LPAIF_RXTX-TX-3 -T 3 Failed to open xml file name /vendor/etc/backend_co…...

vue:前端预览 / chrome浏览器设置 / <iframe> 方法预览 doc、pdf / vue-pdf 预览pdf

一、本文目标 <iframe> 方法预览 pdf 、word vue-pdf 预览pdf 二、<iframe> 方法 2.1、iframe 方法预览需要 浏览器 设置为&#xff1a; chrome&#xff1a;设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档 浏览器访问&#xff1a; chrome://settings/co…...

Axure疑难杂症:详解横向菜单左右拖动效果及阈值说明

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:横向菜单左右拖动 主要内容:菜单设计、拖动效果、阈值设计 应用场景:APP横向菜单栏、台账菜单栏、功能选择栏等 案例展示: 案例视频: 横向菜单左右拖动效果 正文内容: 最近很多粉丝私信我,横向…...

多视图几何--立体校正--Bouguet方法

Bouguet算法的数学原理详解 Bouguet算法的核心目标是实现双目相机的极线校正&#xff0c;使左右图像的对应点位于同一水平线上&#xff0c;从而简化立体匹配。其数学原理围绕旋转矩阵分解、极线约束构造和重投影优化展开&#xff0c;以下是分步推导&#xff1a; 一、坐标系定义…...

debian12 mysql完全卸载

MySQL 的数据目录通常是 /var/lib/mysql&#xff0c;配置文件通常在 /etc/mysql 目录下。使用以下命令删除这些目录&#xff1a; sudo rm -rf /var/lib/mysql sudo rm -rf /etc/mysql清理残留文件 sudo find / -name "mysql*" -exec rm -rf {} \; 2>/dev/null验…...

随机动作指令活体检测技术的广泛应用,为人脸识别安全保驾护航

随着人脸识别技术在金融支付、门禁系统、手机解锁等领域的广泛应用&#xff0c;攻击手段也日益多样化&#xff0c;如照片、视频回放、3D面具等伪造方式对系统安全构成严重威胁。传统的人脸识别技术难以区分真实人脸与伪造攻击&#xff0c;正是在这样的背景下&#xff0c;随机动…...

Chrome 135 版本开发者工具(DevTools)更新内容

Chrome 135 版本开发者工具&#xff08;DevTools&#xff09;更新内容 一、性能&#xff08;Performance&#xff09;面板改进 1. 性能面板中的配置文件和函数调用现已显示来源和脚本链接 Performance > Summary&#xff08;性能 > 概览&#xff09;选项卡现在会显示配…...

《算法:以三种算法思想及两种优化策略解决Fibonacci数》

文章目录 0.题目:red_circle:一.递归记忆化搜索**a.普通递归****b.记忆化搜索&#xff08;优化&#xff09;**算法讲解: :red_circle:二.前缀和a.算法讲解b.代码示例 :red_circle:三.动态规划滚动数组a.算法讲解b.普通动规代码示例c.滚动数组优化 作者的个人gitee 作者的算法讲…...

定制开发开源AI智能名片S2B2C商城小程序源码中的产品运营协同进化机制研究

摘要 在数字化产品发展进程中&#xff0c;产品经理与运营人员的协同工作机制对产品迭代方向具有决定性作用。本文以定制开发开源AI智能名片S2B2C商城小程序源码为研究对象&#xff0c;通过分析其技术架构中的智能推荐系统、三级账户体系及社交裂变引擎等创新模块&#xff0c;揭…...

Colmap的安装和使用

Colmap 网站: https://colmap.github.io/GitHub: https://github.com/colmap/colmap 安装 Windows 从 GitHub发布页 GitHub Releases 下载预编译的二进制, 区分带CUDA和不带CUDA的版本. Ubuntu 在 Ubuntu 22.04 下可以通过apt install colmap安装, 但是这样安装的是不带C…...

Springboot框架—单元测试操作

Springboot单元测试的操作步骤&#xff1a; 1.添加依赖spring-boot-starter-test 在pom.xml中添加依赖spring-boot-starter-test 2.在src/test/java下新建java class 3.单元测试入口代码结构 import org.junit.Test; import org.junit.runner.RunWith; import org.springfra…...

Elasticearch数据流向

Elasticearch数据流向 数据流向图 --- config: layout: elk look: classic theme: mc --- flowchart LR subgraph s1["图例"] direction TB W["写入流程"] R["读取流程"] end A["Logstash Pipeline"] -- 写入请求 --> B["Elas…...

dB,dBi, dBd, dBc,dBm,dBw释义及区别

贝尔(B) 贝尔(B)最初用于表示音量功率10与1的比值&#xff0c;亚历山大.格拉汉姆.贝尔的名字命名。因此&#xff0c;1B表示功率比10:1&#xff0c;这是一种对数的关系&#xff0c;底数为10&#xff0c;100:12B&#xff0c;1000:13B。即lg(P2/P1)。 可以看出B是一个较大的单位…...

CRM是企业AI Agent应用的关键切入点

CRM&#xff08;Customer Relationship Management&#xff0c;客户关系管理&#xff09;是一套用于系统化管理企业与客户交互的技术、策略和流程&#xff0c;旨在优化客户体验、提升忠诚度并驱动业务增长。其核心功能包括客户数据整合&#xff08;如联系信息、交易记录、行为轨…...

aws(学习笔记第三十八课) codepipeline-build-deploy-github-manual

文章目录 aws(学习笔记第三十八课) codepipeline-build-deploy-github-manual学习内容&#xff1a;1. 整体架构1.1 代码链接1.2 全体处理架构 2. 代码分析2.1 创建ImageRepo&#xff0c;并设定给FargateTaskDef2.2 创建CodeBuild project2.3 对CodeBuild project赋予权限&#…...

【数据分享】1999—2023年地级市市政公用事业和邮政、电信业发展情况相关指标(Shp/Excel格式)

在之前的文章中&#xff0c;我们分享过基于2000-2024年《中国城市统计年鉴》整理的1999-2023年地级市的人口相关数据、染物排放和环境治理相关数据、房地产投资情况和商品房销售面积相关指标数据、社会消费品零售总额和年末金融机构存贷款余额、各类用地面积、地方一般公共预算…...

vscode 跳转失败之c_cpp_properties.json解析

{"configurations": [{"name": "Linux", // 配置名称&#xff0c;对应当前平台&#xff0c;VS Code 中可选"includePath": ["${workspaceFolder}/**", // 包含当前工作区下所有文件夹的头文件&#xff08;递归&…...

批量将图片转换为 jpg/png/Word/PDF/Excel 等其它格式

图片的格式种类非常的多&#xff0c;常见的图片格式就有 jpg、png、webp、bmp 等等&#xff0c;我们在工作当中经常会碰到需要将一种格式的图片转换为其他格式的需求。今天就给大家介绍一种方法&#xff0c;可以实现批量转换图片格式&#xff0c;支持各种格式的图片之间相互转换…...

MCP+Blender创建电力塔

MCP&#xff08;Model Context Protocol&#xff09;与Blender的结合是当前AI与3D建模领域的热门技术&#xff0c;它通过协议化的方式让Claude等AI模型直接控制Blender&#xff0c;实现自动化3D建模。 1. 功能与原理 • 核心能力&#xff1a;用户通过自然语言指令&#xff08;…...

kafka存储原理

topic分着存储在broker的分区中&#xff0c;分区进一步分为segment。 日志目录中的每一组文件都代表一个段。 段文件名中的后缀表示该段的基本偏移量。 log.segment.bytes表示分段的最大大小。 消息写入分区时&#xff0c;kafka会将这些消息写入段&#xff0c;写满了再创建一个…...

Arduino开发物联网ESP32快速入门指南(包含开发语言说明、学习路径和实战教程)

一、Arduino开发语言本质 核心语言&#xff1a;基于C/C的扩展语言&#xff0c;包含Arduino特有的API和库 特点&#xff1a; 去除了C的复杂特性&#xff08;如STL&#xff09; 内置硬件操作函数&#xff08;digitalWrite()、analogRead()等&#xff09; 支持面向对象编程&…...

《系统架构设计师教程(第2版)》第19章-大数据架构设计理论与实践-01-传统数据处理系统存在的问题

文章目录 1. 异步处理队列2. 数据库分区3 读写分离4. 基于Hadoop的 Map/Reduce 管道 1. 异步处理队列 出现的原因&#xff1a;用户访问量增加&#xff0c;数据库无法支撑用户请求的负载&#xff0c;导致数据库服务器无法及时响应用户请求解决&#xff1a;在Web服务器和数据库中…...

Vue接口平台学习五——测试环境页面

一、实现效果图及界面布局简单梳理 这块内容分左侧&#xff0c;中间&#xff0c;右侧三大部分 左侧&#xff1a; 上面一行固定内容&#xff0c;显示icon&#xff0c;名字&#xff0c;一个按钮。下面部分通过v-for循环读取数据库获取的测试环境列表用来展示名称。 中间&#…...

FFMpeg视频编码实战和音频编码实战

视频编码流程 avcodec_find_encoder&#xff1a;首先&#xff0c;通过指定的编码器名称&#xff08;如H.264、MPEG-4等&#xff09;找到对应的编码器。avcodec_alloc_context3&#xff1a;为找到的编码器分配一个上下文结构&#xff0c;这个结构包含了编码器所需的各种参数和状…...