Vue3搜索框（InputSearch）

效果如下图：在线预览

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

APIs

InputSearch

参数说明类型默认值
width搜索框宽度，单位 pxstring | number‘100%’
icon搜索图标boolean | slottrue
search搜索按钮，默认时为搜索图标string | slotundefined
searchProps设置搜索按钮的属性，参考 Button Propsobject{}
size搜索框大小‘small’ | ‘middle’ | ‘large’‘middle’
addonBefore设置前置标签string | slotundefined
prefix前缀图标stringundefined
suffix后缀图标stringundefined
allowClear可以点击清除图标删除搜索框内容booleanfalse
loading是否搜索中booleanfalse
disabled是否禁用booleanfalse
maxlength文本最大长度numberundefined
showCount是否展示字数booleanfalse
value v-model搜索框内容stringundefined

Events

名称说明类型
change搜索框内容变化时的回调(e: Event) => void
enter点击搜索或按下回车键时的回调(value: string) => void

创建搜索框组件InputSearch.vue

其中引入使用了以下组件和工具函数：

  • Vue3按钮（Button）
  • 监听插槽存在 useSlotsExist
<script setup lang="ts">
defineOptions({inheritAttrs: false
})
import { ref, computed, nextTick } from 'vue'
import Button from '../button'
import { useSlotsExist } from '../utils'
interface Props {width?: string | number // 搜索框宽度，单位 pxicon?: boolean // 搜索图标 boolean | slotsearch?: string // 搜索按钮，默认时为搜索图标 string | slotsearchProps?: object // 设置搜索按钮的属性，参考 Button Propssize?: 'small' | 'middle' | 'large' // 搜索框大小allowClear?: boolean // 可以点击清除图标删除搜索框内容addonBefore?: string // 设置前置标签 string | slotprefix?: string // 前缀图标 string | slotsuffix?: string // 后缀图标 string | slotloading?: boolean // 是否搜索中disabled?: boolean // 是否禁用maxlength?: number // 文本最大长度showCount?: boolean // 是否展示字数value?: string // (v-model) 搜索框内容valueModifiers?: object // 用于访问组件的 v-model 上添加的修饰符
}
const props = withDefaults(defineProps<Props>(), {width: '100%',icon: true,search: undefined,searchProps: () => ({}),size: 'middle',addonBefore: undefined,prefix: undefined,suffix: undefined,allowClear: false,loading: false,disabled: false,maxlength: undefined,showCount: false,value: undefined,valueModifiers: () => ({})
})
const inputSearchWidth = computed(() => {if (typeof props.width === 'number') {return props.width + 'px'}return props.width
})
const showClear = computed(() => {return !props.disabled && props.allowClear
})
const showCountNum = computed(() => {if (props.maxlength) {return (props.value ? props.value.length : 0) + ' / ' + props.maxlength}return props.value ? props.value.length : 0
})
const slotsExist = useSlotsExist(['prefix', 'suffix', 'addonBefore'])
const showPrefix = computed(() => {return slotsExist.prefix || props.prefix
})
const showSuffix = computed(() => {return slotsExist.suffix || props.suffix
})
const showInputSuffix = computed(() => {return showClear.value || props.showCount || showSuffix.value
})
const showBefore = computed(() => {return slotsExist.addonBefore || props.addonBefore
})
const lazyInput = computed(() => {return 'lazy' in props.valueModifiers
})
const emits = defineEmits(['update:value', 'change', 'search'])
function onInput(e: InputEvent) {if (!lazyInput.value) {emits('update:value', (e.target as HTMLInputElement).value)emits('change', e)}
}
function onChange(e: InputEvent) {if (lazyInput.value) {emits('update:value', (e.target as HTMLInputElement).value)emits('change', e)}
}
const input = ref()
function onClear() {emits('update:value', '')input.value.focus()
}
async function onInputSearch(e: KeyboardEvent) {if (!lazyInput.value) {onSearch()} else {if (lazyInput.value) {input.value.blur()await nextTick()input.value.focus()}emits('search', props.value)}
}
function onSearch() {emits('search', props.value)
}
</script>
<template><div class="m-input-search-wrap" :style="`width: ${inputSearchWidth};`"><span class="m-addon-before" :class="`addon-before-${size}`" v-if="showBefore"><slot name="addonBefore">{{ addonBefore }}</slot></span><divtabindex="1"class="m-input-search":class="[`input-search-${size}`,{'input-search-before': showBefore,'input-search-disabled': disabled}]"><span class="m-prefix" v-if="showPrefix"><slot name="prefix">{{ prefix }}</slot></span><inputref="input"class="input-search"type="text":value="value":maxlength="maxlength":disabled="disabled"@input="onInput"@change="onChange"@keydown.enter.prevent="onInputSearch"v-bind="$attrs"/><span v-if="showInputSuffix" class="input-search-suffix"><span v-if="showClear" class="m-clear" :class="{ 'clear-hidden': !value }" @click="onClear"><svgclass="clear-svg"focusable="false"data-icon="close-circle"width="1em"height="1em"fill="currentColor"aria-hidden="true"viewBox="64 64 896 896"><pathd="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span v-if="showCount" class="input-search-count">{{ showCountNum }}</span><slot v-if="showSuffix" name="suffix">{{ suffix }}</slot></span></div><span class="m-search-button" @click="onSearch" @keydown.enter.prevent="onSearch"><slot name="search"><Button class="search-btn" :size="size" :disabled="disabled" :loading="loading" v-bind="searchProps"><template v-if="icon" #icon><svgfocusable="false"data-icon="search"width="1em"height="1em"fill="currentColor"aria-hidden="true"viewBox="64 64 896 896"><pathd="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></template>{{ search }}</Button></slot></span></div>
</template>
<style lang="less" scoped>
.m-input-search-wrap {width: 100%;position: relative;display: inline-flex;align-items: center;.m-addon-before {display: inline-flex;justify-content: center;align-items: center;position: relative;padding: 0 11px;color: rgba(0, 0, 0, 0.88);font-weight: normal;font-size: 14px;line-height: 1.5714285714285714;text-align: center;background-color: rgba(0, 0, 0, 0.02);border: 1px solid #d9d9d9;border-radius: 6px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right: 0;transition: all 0.3s;:deep(svg) {fill: rgba(0, 0, 0, 0.88);}}.addon-before-small {height: 24px;}.addon-before-middle {height: 32px;}.addon-before-small {height: 40px;}.m-input-search {font-size: 14px;color: rgba(0, 0, 0, 0.88);line-height: 1.5714285714285714;position: relative;display: inline-flex;width: 100%;min-width: 0;background-color: #ffffff;border: 1px solid #d9d9d9;transition: all 0.2s;&:hover {border-color: #4096ff;border-right-width: 1px;z-index: 1;}&:focus-within {border-color: #4096ff;box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);border-right-width: 1px;outline: 0;z-index: 1;}.m-prefix {margin-right: 4px;display: flex;flex: none;align-items: center;:deep(svg) {fill: rgba(0, 0, 0, 0.88);}}.input-search {font-size: 14px;color: inherit;line-height: 1.5714285714285714;position: relative;display: inline-block;width: 100%;min-width: 0;background-color: #ffffff;border: none;outline: none;text-overflow: ellipsis;transition: all 0.2s;}input::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.25);}input:-moz-placeholder {color: rgba(0, 0, 0, 0.25);}input::-moz-placeholder {color: rgba(0, 0, 0, 0.25);}input:-ms-input-placeholder {color: rgba(0, 0, 0, 0.25);}.input-search-suffix {margin-left: 4px;display: flex;flex: none;gap: 8px;align-items: center;.m-clear {cursor: pointer;.clear-svg {font-size: 12px;display: inline-block;fill: rgba(0, 0, 0, 0.25);text-align: center;line-height: 0;vertical-align: -0.08em;transition: fill 0.3s;&:hover {fill: rgba(0, 0, 0, 0.45);}}}.clear-hidden {visibility: hidden;}.input-search-count {color: rgba(0, 0, 0, 0.45);}}}.input-search-small {height: 24px;padding: 0 7px;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;}.input-search-middle {height: 32px;padding: 4px 11px;border-radius: 6px;border-top-right-radius: 0;border-bottom-right-radius: 0;}.input-search-large {height: 40px;padding: 7px 11px;font-size: 16px;line-height: 1.5;border-radius: 8px;border-top-right-radius: 0;border-bottom-right-radius: 0;.input-search {font-size: 16px;line-height: 1.5;}}.input-search-before {border-top-left-radius: 0;border-bottom-left-radius: 0;}.input-search-disabled {color: rgba(0, 0, 0, 0.25);background-color: rgba(0, 0, 0, 0.04);cursor: not-allowed;&:hover {border-color: #d9d9d9;}&:focus-within {border-color: #d9d9d9;box-shadow: none;}.input-search {color: rgba(0, 0, 0, 0.25);background-color: transparent;cursor: not-allowed;}}.m-search-button {position: relative;left: -1px;border-left: 0;color: rgba(0, 0, 0, 0.88);font-weight: normal;font-size: 14px;text-align: center;background-color: rgba(0, 0, 0, 0.02);border-top-left-radius: 0;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 0;transition: all 0.3s;line-height: 1;:deep(.m-btn) {padding-top: 0;padding-bottom: 0;border-top-left-radius: 0;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 0;&:not(.btn-primary):not(.btn-danger):not(.btn-link):not(.btn-disabled) {color: rgba(0, 0, 0, 0.45);.btn-icon {svg {fill: rgba(0, 0, 0, 0.45);}}}}:deep(.search-btn):not(.btn-primary):not(.btn-danger):not(.btn-link):not(.btn-disabled) {color: rgba(0, 0, 0, 0.45);&:hover {.btn-icon {svg {fill: #4096ff;}}}&:active {.btn-icon {svg {fill: #0958d9;}}}.btn-icon {svg {fill: rgba(0, 0, 0, 0.45);}}}}
}
</style>

在要使用的页面引入

其中引入使用了以下组件：

  • Vue3警告提示（Alert）
  • Vue3间距（Space）
  • Vue3按钮（Button）
  • Vue3单选框（Radio）
  • Vue3开关（Switch）
<script setup lang="ts">
import InputSearch from './InputSearch.vue'
import { ref, watchEffect } from 'vue'
import { SearchOutlined, CompassOutlined, EnvironmentOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
const value = ref('')
const lazyValue = ref('')
const sizeOptions = [{label: 'small',value: 'small'},{label: 'middle',value: 'middle'},{label: 'large',value: 'large'}
]
const size = ref('middle')
const loading = ref(true)
const disabled = ref(true)
watchEffect(() => {console.log('value:', value.value)
})
watchEffect(() => {console.log('lazyValue:', lazyValue.value)
})
function onChange(e: Event) {console.log('change', e)
}
function onSearch(searchValue: string) {console.log('searchValue', searchValue)
}
</script>
<template><div><h1>{{ $route.name }} {{ $route.meta.title }}</h1><h2 class="mt30 mb10">基本使用</h2><Space gap="small" vertical><Alert><template #message>.lazy:<br />默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。<br />你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：<br />{{ '<InputSearch v-model:value.lazy="msg" />' }}</template></Alert><InputSearch:width="200"v-model:value="value"placeholder="Basic search usage"@change="onChange"@search="onSearch"/><InputSearch:width="200"v-model:value.lazy="lazyValue"placeholder="Lazy search usage"@change="onChange"@search="onSearch"/></Space><h2 class="mt30 mb10">自定义搜索按钮</h2><Space vertical><InputSearchv-model:value="value":search-props="{ type: 'primary' }"placeholder="input search text"@search="onSearch"/><InputSearchv-model:value="value"placeholder="input search text":icon="false"search="Search":search-props="{ type: 'primary' }"@search="onSearch"/><InputSearch v-model:value="value" placeholder="input search text" @search="onSearch"><template #search><Button type="primary"><template #icon><SearchOutlined /></template>Search</Button></template></InputSearch><InputSearchv-model:value="value"placeholder="input search text"search="Search":search-props="{ type: 'primary', ghost: true }"@search="onSearch"><template #icon><CompassOutlined /></template></InputSearch><InputSearch v-model:value="value" placeholder="input search text" @search="onSearch"><template #search><Button><template #icon><CompassOutlined /></template>Custom</Button></template></InputSearch></Space><h2 class="mt30 mb10">三种大小</h2><Space vertical><Radio :options="sizeOptions" v-model:value="size" button button-style="solid" /><InputSearchv-model:value="value":size="size":search-props="{ type: 'primary' }"placeholder="input search text"@search="onSearch"/><InputSearchv-model:value="value":size="size"placeholder="input search text":icon="false"search="Search":search-props="{ type: 'primary' }"@search="onSearch"/><InputSearch v-model:value="value" :size="size" placeholder="input search text" @search="onSearch"><template #search><Button type="primary" :size="size"><template #icon><SearchOutlined /></template>Search</Button></template></InputSearch></Space><h2 class="mt30 mb10">带清除图标</h2><Space><InputSearchv-model:value="value"allow-clearplaceholder="input search text"@search="onSearch"/></Space><h2 class="mt30 mb10">带字数提示</h2><Space :width="300"><InputSearch v-model:value="value" show-count placeholder="input search text" @search="onSearch" /><InputSearchv-model:value="value"allow-clearshow-count:maxlength="20"placeholder="input search text"@search="onSearch"/></Space><h2 class="mt30 mb10">前置标签</h2><Space :width="300"><InputSearch v-model:value="value" addon-before="Please" placeholder="input search text" @search="onSearch" /><InputSearchv-model:value="value":search-props="{ type: 'primary' }"placeholder="input search text"@search="onSearch"><template #addonBefore><CompassOutlined /></template></InputSearch></Space><h2 class="mt30 mb10">前缀和后缀</h2><Space :width="300"><InputSearch v-model:value="value" prefix="¥" suffix="RMB" placeholder="input search text" @search="onSearch" /><InputSearch v-model:value="value" placeholder="input search text" @search="onSearch"><template #prefix><EnvironmentOutlined /></template><template #suffix><Tooltip :max-width="150" tooltip="Extra information"><InfoCircleOutlined /></Tooltip></template></InputSearch></Space><h2 class="mt30 mb10">搜索中</h2><Space vertical><Space align="center"> Loading state:<Switch v-model="loading" /> </Space><InputSearchv-model:value="value":loading="loading":search-props="{ type: 'primary' }"placeholder="input search text"@search="onSearch"/><InputSearchv-model:value="value":loading="loading"placeholder="input search text":icon="false"search="Search":search-props="{ type: 'primary' }"@search="onSearch"/><InputSearch v-model:value="value" placeholder="input search text" @search="onSearch"><template #search><Button type="primary" :loading="loading"><template #icon><SearchOutlined /></template>Search</Button></template></InputSearch></Space><h2 class="mt30 mb10">禁用</h2><Space vertical><Space align="center"> Disabled state:<Switch v-model="disabled" /> </Space><InputSearch v-model:value="value" :disabled="disabled" placeholder="input search text" @search="onSearch" /><InputSearchv-model:value="value":disabled="disabled":search-props="{ type: 'primary' }"placeholder="input search text"@search="onSearch"/><InputSearchv-model:value="value":disabled="disabled"placeholder="input search text":icon="false"search="Search":search-props="{ type: 'primary' }"@search="onSearch"/><InputSearch v-model:value="value" :disabled="disabled" placeholder="input search text" @search="onSearch"><template #search><Button type="primary" :disabled="disabled"><template #icon><SearchOutlined /></template>Search</Button></template></InputSearch></Space></div>
</template>

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

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

相关文章

Nginx反向代理B

Nginx反向代理B

http协议反向代理 反向代理配置参数 proxy_pass; #用来设置将客户端请求转发给的后端服务器的主机 #可以是主机名(将转发至后端服务做为主机头首部)、IP地址&#xff1a;端口的方式 #也可以代理到预先设置的主机群组&#xff0c;需要模块ngx_http_upstream_module支持 #示例:…
阅读更多...
无人机之穿越机基础知识

无人机之穿越机基础知识

一、用途与性能 主要用于竞赛、娱乐和极限飞行&#xff0c;特点是速度快、机动性强、反应灵敏&#xff0c;能够在短时间内做出迅速的加速、转向和翻滚动作&#xff0c;具有极高的飞行灵活性和第一视角飞行体验&#xff08;FPV &#xff09;。 穿越机通常体积小&#xff0c;续…
阅读更多...
Open3D mesh 泊松下采样

Open3D mesh 泊松下采样

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2下采样后点云 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff0…
阅读更多...
【ShuQiHere】从零开始掌握Git：新手必备的版本控制指南

【ShuQiHere】从零开始掌握Git：新手必备的版本控制指南

1. 【ShuQiHere】 在现代软件开发的世界里&#xff0c;版本控制系统&#xff08;Version Control System, VCS&#xff09;是开发者必备的工具&#xff0c;而Git作为目前最为流行的版本控制系统&#xff0c;几乎成了每个开发者的必修课。无论是单独开发项目还是与团队协作&…
阅读更多...
【国产游戏的机遇与挑战】

【国产游戏的机遇与挑战】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
【MySql】深入解析MySQL底层基础知识：存储引擎、数据结构与磁盘交互

【MySql】深入解析MySQL底层基础知识：存储引擎、数据结构与磁盘交互

一、引言 MySQL作为一款广泛使用的开源关系型数据库管理系统&#xff0c;其底层基础知识对于数据库管理员和开发者来说至关重要。本文将详细介绍MySQL的存储引擎、数据结构以及数据在磁盘上的存储和读取机制&#xff0c;帮助读者更好地理解MySQL的内部工作原理。 二、MySQL存…
阅读更多...
怎么自定义spring security对用户信息进行校验及密码的加密校验

怎么自定义spring security对用户信息进行校验及密码的加密校验

先写一个spring security需要校验的字段类 其实UserDetails的子类的user已经有很多字段和功能,但是如果我们需要扩展的话就要重写UserDetails中的方法 package com.lzy.security;import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; impo…
阅读更多...
JAVA-常见八股文（4）-内部类和匿名内部类

JAVA-常见八股文（4）-内部类和匿名内部类

【参考文献】 Java 中的内部类与匿名内部类详解_内部类和匿名内部类-CSDN博客 内部类以及匿名内部类详解_匿名内部类的作用-CSDN博客 1.内部类 将一个类 A 定义在另一个类 B 里面&#xff0c;里面的那个类 A 就称为内部类&#xff0c;B 则称为外部类。 特点&#xff1a; 内…
阅读更多...
Git（分布式版本控制系统）

Git（分布式版本控制系统）

git介绍&#xff1a; git官网&#xff1a;https://gitee.com/ Git工具安装 Git 公司 (git-scm.com)https://git-scm.com/ git本地配置账号和邮箱 一般刚安装Git都要配置用户名、密码和邮箱&#xff0c;因为你提交代码到本地仓库&#xff08;上传代码到远程仓库&#xff09;时…
阅读更多...
Nginx的Rewrite和Location配置

Nginx的Rewrite和Location配置

目录 一、Rewrite模块 1.功能概述 1.1URL重写 1.2URL重定向 1.3条件判断 1.4重写规则的执行顺序 2.语法格式 2.1Flag说明 3. Rewrite跳转实现 4.常用的Nginx正则表达式 二、Location模块 1.概述 2.分类 2.1精准匹配&#xff08;&#xff09; 2.2前缀匹配…
阅读更多...
游戏如何对抗 IL2cppDumper逆向分析

游戏如何对抗 IL2cppDumper逆向分析

众所周知&#xff0c;Unity引擎中有两种脚本编译器&#xff0c;分别是 Mono 和 IL2CPP 。相较于Mono&#xff0c;IL2CPP 具备执行效率高、跨平台支持等优势&#xff0c;已被大多数游戏采用。 IL2CPP 模式下&#xff0c;可以将游戏 C# 代码转换为 C 代码&#xff0c;然后编译为…
阅读更多...
el-form只对rules中个别字段进行校验

el-form只对rules中个别字段进行校验

正常属性校验方式 const moveToErr () > {const errorDom document.getElementsByClassName(el-form-item__error);console.log(errorDom)if (errorDom.length) {errorDom[0].scrollIntoView({block: center,behavior: smooth})} };const saveItem async (formEl?: For…
阅读更多...
android 折叠屏展开收起监听

android 折叠屏展开收起监听

折叠屏在展开和收起时&#xff0c;屏幕的物理尺寸会发生变化。你可以通过注册一个ComponentCallbacks2的实例来监听屏幕大小的变化。这个接口提供了onConfigurationChanged(Configuration newConfig)方法&#xff0c;当设备的配置发生变化时&#xff08;包括屏幕大小和方向&…
阅读更多...
python爬虫——入门

python爬虫——入门

一、概念 万维网之所以叫做网&#xff0c;是因为通过点击超链接或者进入URL&#xff0c;我们可以访问任何网络资源&#xff0c;从一个网页跳转到另一个网页&#xff0c;所有的相关资源连接在一起&#xff0c;就形成了一个网。 而爬虫呢&#xff0c;听名字就让人想起来一个黏糊…
阅读更多...
string类题目（上）

string类题目（上）

string类题目 题目来源&#xff08;Leetcode&#xff09; 题目一&#xff1a;仅仅反转字母 分析 这个反转的特点在于只反转字母&#xff0c;不反转特殊字符。 法一&#xff1a;如果我们让一个正向迭代器指向第一个字符&#xff0c;让一个反向迭代器指向最后一个字符&#xf…
阅读更多...
kafka常用命令汇总

kafka常用命令汇总

文章目录 命令1命令2命令3命令4命令5命令6命令7命令8命令9 其他说明提示：以下是本篇文章正文内容，Kafka 0.9.x 及更高版本中使用 在使用 Kafka 命令行工具时，–zookeeper 和 --bootstrap-server 参数用于指定不同的连接信息，具体取决于你使用的命令以及 Kafka 版本。 --zo…
阅读更多...
ch32v307vct6从头移植FreeRTOS

ch32v307vct6从头移植FreeRTOS

使用官方的ide可以直接创建带FreeRTOS的工程&#xff0c;但是不利于我们学习移植&#xff0c;所以特此记录怎么从头开始移植FreeRTOS到CH32V307VCT6芯片使用。 下载FreeRTOS源码 首先进入https://www.freertos.org/官网&#xff0c;然后找到如下Download字样&#xff0c;进入下…
阅读更多...
华为云通过自定义域名访问桶内对象

华为云通过自定义域名访问桶内对象

问题&#xff1a;通过将自定义域名绑定至OBS桶实现在线预览文件 例如index.html入口文件 且记 自定义域名绑定暂时不支持HTTPS访问方式&#xff0c;只支持HTTP访问方式 自定义域名就先不用部署https证书。 配置完毕之后&#xff0c;将obs桶设置为公开的即可访问 如何在浏览…
阅读更多...
Redis为什么会阻塞

Redis为什么会阻塞

Redis的一些阻塞点 BigKey删除&#xff0c;删除数据库&#xff0c;AOF日志同步聚合操作&#xff0c;全量查询操作&#xff0c;从库读取RDB文件。 其中删除BigKey&#xff0c;AOF日志&#xff0c;删除数据库可以异步执行。 聚合操作&#xff0c;全量查询&#xff0c;从库读取RD…
阅读更多...
Mysql 集群技术

Mysql 集群技术

Mysql在服务器中的部署方法 安装MySQL依赖性 rootmysql-node10 ~]# dnf install cmake gcc-c openssl-devel \ ncurses-devel.x86_64 libtirpc-devel-1.3.3-8.el9_4.x86_64.rpm rpcgen.x86_64 下载并解压源码包 使用命令tar zxf mysql-boost-5.7.44.tar.gz进行解压 源码编译安…
阅读更多...
最新文章

Copyright @ 2022~2023