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

记录--vue 拉伸指令

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

在我们项目开发中,经常会有布局拉伸的需求,接下来 让我们一步步用 vue指令 实现这个需求

动手开发

在线体验

codesandbox.io/s/dawn-cdn-…

常规使用

解决拉伸触发时机

既然我们使用了指令的方式,也就是牺牲了组件方式的绑定事件的便捷性.

那么我们如何来解决这个触发时机的问题呢?

在参考了 Element UI 的表格拉伸功能后,笔者受到了启发

 有点抽象,这个红色区域可不是真实节点,只是笔者模拟的一个 boder-right 多说无益 直接上代码吧

const pointermove = e => {const { right } = el.getBoundingClientRect() // 获取到节点的右边界const { clientX } = e // 此时鼠标位置if (right - clientX < 8) // 表明在右边界的 8px 的过渡区 可以拉伸
}

实现一个简单的右拉伸

下面让我们来实现一个简单的右拉伸功能, 既然用指令 肯定是越简单越好

笔者决定用 vue提供的 修饰符, v-resize.right

实现 v-resize.right

1.首先我们创建两个相邻 div

<template><div class="container"><divv-resize.rightclass="left"/><div class="right" /></div>
</template>
<style lang="scss" scoped>
.container {width: 400px;height: 100px;> div {float: left;height: 100%;width: 50%;}.left {background-color: lightcoral;}.right {background-color: lightblue;}
}
</style>

2.实现 resize 触发时机

export const resize = {inserted: function(el, binding) {el.addEventListener('pointermove', (e) => {const { right } = el.getBoundingClientRect()if (right - e.clientX < 8) {// 此时表明可以拉伸,时机成熟el.style.cursor = 'col-resize'} else {el.style.cursor = ''}})}
}

3.实现右拉伸功能

el.addEventListener('pointerdown', (e) => {const rightDom = el.nextElementSibling // 获取右节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'}// 因为此时我们要在整个屏幕移动 所以我们要在 document 挂上 mousemovedocument.addEventListener('mousemove',onDocumentMouseMove)

让我们看看此时的效果

会发现有两个问题

  1. 左边宽度会>左右之和,右边宽度会 < 0
  2. 当我们鼠标弹起的时候 还能继续拉伸

让我们首先解决第一个问题

方案一:限制最小宽度
const MIN_WIDTH = 10
document.addEventListener('mousemove', (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差+if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) return// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'
})

第二个问题,其实非常简单

方案二:鼠标弹起后释放对应拉伸事件

el.addEventListener('pointerup', (e) => {el.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)
})

此时最最最基础的 v-resize 左右拉伸版本 我们已经实现了,来看下效果吧

 看下此时的完整代码

export const resize = {inserted: function (el, binding) {el.addEventListener('pointermove', (e) => {const { right } = el.getBoundingClientRect()if (right - e.clientX < 8) {// 此时表明可以拉伸el.style.cursor = 'col-resize'} else {el.style.cursor = ''}})const MIN_WIDTH = 10el.addEventListener('pointerdown', (e) => {const rightDom = el.nextElementSibling // 获取右节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {const offsetX = e.clientX - startX // 此时的 x 坐标偏差if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) {return}// 更新左右节点宽度el.style.width = width + offsetX + 'px'rightDom.style.width = nextWidth - offsetX + 'px'}// 因为此时我们要在整个屏幕移动 所以我们要在 document 挂上 mousemovedocument.addEventListener('mousemove', onDocumentMouseMove)el.addEventListener('pointerup', (e) => {el.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)})})},
}

作为 一名 优秀的前端性能优化专家,红盾大大已经开始吐槽,这么多 EventListener 都不移除吗? 还有'top' 'left'这些硬编码,能维护吗?

是的,后续代码我们将会移除这些被绑定的事件,以及处理硬编码(此处非重点 不做赘叙)

实现完 右拉伸 想必你对 左,上,下拉伸 也已经有了自己的思路

开始进阶

接下来让我们看下这种场景

我们 想实现一个 两边能同时拉伸的功能, 也就是 v-resize.left.right

实现左右拉伸功能

这种场景比较复杂,就需要我们维护一个拉伸方向上的变量 position

实现 v-resize.left.right

export const resize = {inserted: function (el, binding) {let position = '',resizing = falseel.addEventListener('pointermove', (e) => {if (resizing) returnconst { left, right } = el.getBoundingClientRect()const { clientX } = eif (right - clientX < 8) {position = 'right' // 此时表明右拉伸el.style.cursor = 'col-resize'} else if (clientX - left < 8) {position = 'left' // 此时表明左拉伸el.style.cursor = 'col-resize'} else {position = ''el.style.cursor = ''}})const MIN_WIDTH = 10el.addEventListener('pointerdown', (e) => {if (position === '') returnconst sibling = position === 'right' ? el.nextElementSibling : el.previousElementSibling // 获取相邻节点const startX = e.clientX // 获取当前点击坐标const { width } = el.getBoundingClientRect() // 获取当前节点宽度const { width: siblingWidth } = sibling.getBoundingClientRect() // 获取右节点宽度el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~const onDocumentMouseMove = (e) => {resizing = trueif (position === '') returnconst offsetX = e.clientX - startXconst _elWidth = position === 'right' ? width + offsetX : width - offsetX //判断左右拉伸 所影响的当前节点宽度const _siblingWidth = position === 'right' ? siblingWidth - offsetX : siblingWidth + offsetX //判断左右拉伸 所影响的相邻节点宽度if (_elWidth <= MIN_WIDTH || _siblingWidth <= MIN_WIDTH) return// 更新左右节点宽度el.style.width = _elWidth + 'px'sibling.style.width = _siblingWidth + 'px'}document.addEventListener('mousemove', onDocumentMouseMove)el.addEventListener('pointerup', (e) => {position = ''resizing = falseel.releasePointerCapture(e.pointerId)document.removeEventListener('mousemove', onDocumentMouseMove)})})},
}
看下此时的效果

非常丝滑, 当然 我们还需要考虑 传递 最小宽度 最大宽度 过渡区 等多种业务属性,但是这对于各位彦祖来说都是鸡毛蒜皮的小事. 自行改造就行了

完整代码

Js版本

const elEventsWeakMap = new WeakMap()
const MIN_WIDTH = 50
const MIN_HEIGHT = 50
const TRIGGER_SIZE = 8
const TOP = 'top'
const BOTTOM = 'bottom'
const LEFT = 'left'
const RIGHT = 'right'
const COL_RESIZE = 'col-resize'
const ROW_RESIZE = 'row-resize'function getElStyleAttr(element, attr) {const styles = window.getComputedStyle(element)return styles[attr]
}function getSiblingByPosition(el, position) {const siblingMap = {left: el.previousElementSibling,right: el.nextElementSibling,bottom: el.nextElementSibling,top: el.previousElementSibling}return siblingMap[position]
}function getSiblingsSize(el, attr) {const siblings = el.parentNode.childNodesreturn [...siblings].reduce((prev, next) => (next.getBoundingClientRect()[attr] + prev), 0)
}function updateSize({el,sibling,formatter = 'px',elSize,siblingSize,attr = 'width'
}) {let totalSize = elSize + siblingSizeif (formatter === 'px') {el.style[attr] = elSize + formattersibling.style[attr] = siblingSize + formatter} else if (formatter === 'flex') {totalSize = getSiblingsSize(el, attr)el.style.flex = elSize / totalSize * 10 // 修复 flex-grow <1sibling.style.flex = siblingSize / totalSize * 10}
}const initResize = ({el,positions,minWidth = MIN_WIDTH,minHeight = MIN_HEIGHT,triggerSize = TRIGGER_SIZE,formatter = 'px'
}) => {if (!el) returnconst resizeState = {}const defaultCursor = getElStyleAttr(el, 'cursor')const elStyle = el.styleconst canLeftResize = positions.includes(LEFT)const canRightResize = positions.includes(RIGHT)const canTopResize = positions.includes(TOP)const canBottomResize = positions.includes(BOTTOM)if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) { return } // 未指定方向const pointermove = (e) => {if (resizeState.resizing) returne.preventDefault()const { left, right, top, bottom } = el.getBoundingClientRect()const { clientX, clientY } = e// 左右拉伸if (canLeftResize || canRightResize) {if (clientX - left < triggerSize) resizeState.position = LEFTelse if (right - clientX < triggerSize) resizeState.position = RIGHTelse resizeState.position = ''if (resizeState.position === '') {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = COL_RESIZE }e.stopPropagation()}} else if (canTopResize || canBottomResize) {// 上下拉伸if (clientY - top < triggerSize) resizeState.position = TOPelse if (bottom - clientY < triggerSize) resizeState.position = BOTTOMelse resizeState.position = ''if (resizeState.position === '') {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = ROW_RESIZE }e.stopPropagation()}}}const pointerleave = (e) => {e.stopPropagation()resizeState.position = ''elStyle.cursor = defaultCursorel.releasePointerCapture(e.pointerId)}const pointerdown = (e) => {const { resizing, position } = resizeStateif (resizing || !position) returnif (position) e.stopPropagation() // 如果当前节点存在拉伸方向 需要阻止冒泡(用于嵌套拉伸)el.setPointerCapture(e.pointerId)const isFlex = getElStyleAttr(el.parentNode, 'display') === 'flex'if (isFlex) formatter = 'flex'resizeState.resizing = trueresizeState.startPointerX = e.clientXresizeState.startPointerY = e.clientYconst { width, height } = el.getBoundingClientRect()const sibling = getSiblingByPosition(el, position)if (!sibling) {console.error('未找到兄弟节点', position)return}const rectSibling = sibling.getBoundingClientRect()const { startPointerX, startPointerY } = resizeStateconst onDocumentMouseMove = (e) => {if (!resizeState.resizing) returnelStyle.cursor =canLeftResize || canRightResize ? COL_RESIZE : ROW_RESIZEconst { clientX, clientY } = eif (position === LEFT || position === RIGHT) {const offsetX = clientX - startPointerXconst elSize = position === RIGHT ? width + offsetX : width - offsetXconst siblingSize =position === RIGHT? rectSibling.width - offsetX: rectSibling.width + offsetXif (elSize <= minWidth || siblingSize <= minWidth) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })} else if (position === TOP || position === BOTTOM) {const offsetY = clientY - startPointerYconst elSize =position === BOTTOM ? height + offsetY : height - offsetYconst siblingSize =position === BOTTOM? rectSibling.height - offsetY: rectSibling.height + offsetYif (elSize <= minHeight || siblingSize <= minHeight) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })}}const onDocumentMouseUp = (e) => {document.removeEventListener('mousemove', onDocumentMouseMove)document.removeEventListener('mouseup', onDocumentMouseUp)resizeState.resizing = falseelStyle.cursor = defaultCursor}document.addEventListener('mousemove', onDocumentMouseMove)document.addEventListener('mouseup', onDocumentMouseUp)}const bindElEvents = () => {el.addEventListener('pointermove', pointermove)el.addEventListener('pointerleave', pointerleave)el.addEventListener('pointerup', pointerleave)el.addEventListener('pointerdown', pointerdown)}const unBindElEvents = () => {el.removeEventListener('pointermove', pointermove)el.removeEventListener('pointerleave', pointerleave)el.removeEventListener('pointerup', pointerleave)el.removeEventListener('pointerdown', pointerdown)}bindElEvents()// 设置解绑事件elEventsWeakMap.set(el, unBindElEvents)
}
export const resize = {inserted: function(el, binding) {const { modifiers, value } = bindingconst positions = Object.keys(modifiers)initResize({ el, positions, ...value })},unbind: function(el) {const unBindElEvents = elEventsWeakMap.get(el)unBindElEvents()}
}

Ts版本

import type { DirectiveBinding } from 'vue'const elEventsWeakMap = new WeakMap()
const MIN_WIDTH = 50
const MIN_HEIGHT = 50
const TRIGGER_SIZE = 8enum RESIZE_CURSOR {COL_RESIZE = 'col-resize',ROW_RESIZE = 'row-resize',
}enum POSITION {TOP = 'top',BOTTOM = 'bottom',LEFT = 'left',RIGHT = 'right',
}type Positions = [POSITION.TOP, POSITION.BOTTOM, POSITION.LEFT, POSITION.RIGHT]interface ResizeState {resizing: booleanposition?: POSITIONstartPointerX?: numberstartPointerY?: number
}
type WidthHeight = 'width' | 'height'type ElAttr = WidthHeight | 'cursor' | 'display' // 后面补充type ResizeFormatter = 'px' | 'flex'interface ResizeInfo {el: HTMLElementpositions: PositionsminWidth: numberminHeight: numbertriggerSize: numberformatter: ResizeFormatter
}function getElStyleAttr(element: HTMLElement, attr: ElAttr) {const styles = window.getComputedStyle(element)return styles[attr]
}function getSiblingByPosition(el: HTMLElement, position: POSITION) {const siblingMap = {left: el.previousElementSibling,right: el.nextElementSibling,bottom: el.nextElementSibling,top: el.previousElementSibling,}return siblingMap[position]
}function getSiblingsSize(el: HTMLElement, attr: WidthHeight) {const siblings = (el.parentNode && el.parentNode.children) || []return [...siblings].reduce((prev, next) => next.getBoundingClientRect()[attr] + prev,0,)
}function updateSize({el,sibling,formatter = 'px',elSize,siblingSize,attr = 'width',
}: {el: HTMLElementsibling: HTMLElementformatter: ResizeFormatterelSize: numbersiblingSize: numberattr?: WidthHeight
}) {let totalSize = elSize + siblingSizeif (formatter === 'px') {el.style[attr] = elSize + formattersibling.style[attr] = siblingSize + formatter} else if (formatter === 'flex') {totalSize = getSiblingsSize(el as HTMLElement, attr)el.style.flex = `${(elSize / totalSize) * 10}` // 修复 flex-grow <1sibling.style.flex = `${(siblingSize / totalSize) * 10}`}
}const initResize = ({el,positions,minWidth = MIN_WIDTH,minHeight = MIN_HEIGHT,triggerSize = TRIGGER_SIZE,formatter = 'px',
}: ResizeInfo) => {if (!el || !(el instanceof HTMLElement)) returnconst resizeState: ResizeState = {resizing: false,}const defaultCursor = getElStyleAttr(el, 'cursor')const elStyle = el.styleconst canLeftResize = positions.includes(POSITION.LEFT)const canRightResize = positions.includes(POSITION.RIGHT)const canTopResize = positions.includes(POSITION.TOP)const canBottomResize = positions.includes(POSITION.BOTTOM)if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) {return} // 未指定方向const pointermove = (e: PointerEvent) => {if (resizeState.resizing) returne.preventDefault()const { left, right, top, bottom } = el.getBoundingClientRect()const { clientX, clientY } = e// 左右拉伸if (canLeftResize || canRightResize) {if (clientX - left < triggerSize) resizeState.position = POSITION.LEFTelse if (right - clientX < triggerSize)resizeState.position = POSITION.RIGHTelse resizeState.position = undefinedif (resizeState.position === undefined) {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) {elStyle.cursor = RESIZE_CURSOR.COL_RESIZE}e.stopPropagation()}} else if (canTopResize || canBottomResize) {// 上下拉伸if (clientY - top < triggerSize) resizeState.position = POSITION.TOPelse if (bottom - clientY < triggerSize)resizeState.position = POSITION.BOTTOMelse resizeState.position = undefinedif (resizeState.position === undefined) {elStyle.cursor = defaultCursor} else {if (getSiblingByPosition(el, resizeState.position)) {elStyle.cursor = RESIZE_CURSOR.ROW_RESIZE}e.stopPropagation()}}}const pointerleave = (e: PointerEvent) => {e.stopPropagation()resizeState.position = undefinedelStyle.cursor = defaultCursorel.releasePointerCapture(e.pointerId)}const pointerdown = (e: PointerEvent) => {const { resizing, position } = resizeStateif (resizing || !position) returnif (position) e.stopPropagation() // 如果当前节点存在拉伸方向 需要阻止冒泡(用于嵌套拉伸)el.setPointerCapture(e.pointerId)if (el.parentElement) {const isFlex = getElStyleAttr(el.parentElement, 'display') === 'flex'if (isFlex) formatter = 'flex'}resizeState.resizing = trueresizeState.startPointerX = e.clientXresizeState.startPointerY = e.clientYconst { width, height } = el.getBoundingClientRect()const sibling: HTMLElement = getSiblingByPosition(el,position,) as HTMLElementif (!sibling || !(sibling instanceof HTMLElement)) {console.error('未找到兄弟节点', position)return}const rectSibling = sibling.getBoundingClientRect()const { startPointerX, startPointerY } = resizeStateconst onDocumentMouseMove = (e: MouseEvent) => {if (!resizeState.resizing) returnelStyle.cursor =canLeftResize || canRightResize? RESIZE_CURSOR.COL_RESIZE: RESIZE_CURSOR.ROW_RESIZEconst { clientX, clientY } = eif (position === POSITION.LEFT || position === POSITION.RIGHT) {const offsetX = clientX - startPointerXconst elSize =position === POSITION.RIGHT ? width + offsetX : width - offsetXconst siblingSize =position === POSITION.RIGHT? rectSibling.width - offsetX: rectSibling.width + offsetXif (elSize <= minWidth || siblingSize <= minWidth) returnupdateSize({ el, sibling, elSize, siblingSize, formatter })} else if (position === POSITION.TOP || position === POSITION.BOTTOM) {const offsetY = clientY - startPointerYconst elSize =position === POSITION.BOTTOM ? height + offsetY : height - offsetYconst siblingSize =position === POSITION.BOTTOM? rectSibling.height - offsetY: rectSibling.height + offsetYif (elSize <= minHeight || siblingSize <= minHeight) returnupdateSize({el,sibling,elSize,siblingSize,formatter,attr: 'height',})}}const onDocumentMouseUp = () => {document.removeEventListener('mousemove', onDocumentMouseMove)document.removeEventListener('mouseup', onDocumentMouseUp)resizeState.resizing = falseelStyle.cursor = defaultCursor}document.addEventListener('mousemove', onDocumentMouseMove)document.addEventListener('mouseup', onDocumentMouseUp)}const bindElEvents = () => {el.addEventListener('pointermove', pointermove)el.addEventListener('pointerleave', pointerleave)el.addEventListener('pointerup', pointerleave)el.addEventListener('pointerdown', pointerdown)}const unBindElEvents = () => {el.removeEventListener('pointermove', pointermove)el.removeEventListener('pointerleave', pointerleave)el.removeEventListener('pointerup', pointerleave)el.removeEventListener('pointerdown', pointerdown)}bindElEvents()// 设置解绑事件elEventsWeakMap.set(el, unBindElEvents)
}
export const resize = {mounted: function (el: HTMLElement, binding: DirectiveBinding) {const { modifiers, value } = bindingconst positions = Object.keys(modifiers)initResize({ el, positions, ...value })},beforeUnmount: function (el: HTMLElement) {const unBindElEvents = elEventsWeakMap.get(el)unBindElEvents()},
}

本文转载于:

https://juejin.cn/post/7250402828378914876

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

相关文章:

记录--vue 拉伸指令

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 在我们项目开发中,经常会有布局拉伸的需求,接下来 让我们一步步用 vue指令 实现这个需求 动手开发 在线体验 codesandbox.io/s/dawn-cdn-… 常规使用 解决拉伸触发时机 既然我们使用了指令的方式…...

前端缓存方法有哪些?cookie有哪些属性?

这里写目录标题 前端缓存方法有哪些&#xff1a;cookie有哪些属性&#xff1f; 前端缓存方法有哪些&#xff1a; Browser Cache&#xff08;浏览器缓存&#xff09;: 当浏览器请求一个资源&#xff08;例如图片、CSS、JS 文件&#xff09;时&#xff0c;它会首先检查自己的缓存…...

在PHP8中遍历数组-PHP8知识详解

所谓遍历数组就是把数组中的变量值读取出来。遍历数组中的所有元素对程序员来说是经常使用的操作&#xff0c;通过遍历数组可以完成数组元素的查询工作。 这好比你去商场买东西一样&#xff0c;要买什么东西&#xff0c;就去该区域浏览一遍&#xff0c;以便找出适合自己的产品…...

代码随想录算法训练营之JAVA|第四十三天|139. 单词拆分

今天是第 天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天。 算法挑战链接 139. 单词拆分https://leetcode.cn/problems/word-break/ 第一想法 看完之后完全没有想法。 看完代码随想录之后的想法 这是一个完全背包的问题&#xff0c;使用完全背包的解法。 单词就…...

解决VUE3项目部署后存在缓存页面不更新的问题

方法一&#xff1a; 找到项目中的index.html文件&#xff0c;在头部加上以下代码 <meta http-equiv"Pragma" content"no-cache"> <meta http-equiv"Cache-control" content"no-cache"> <meta http-equiv"Cache&…...

私募证券基金动态-23年8月报

成交量&#xff1a;8月日均8,252.00亿元 8月A股两市日均成交8,252.00亿元&#xff0c;环比下降12.23%、同比下降18.11%。8月整体23个交易日&#xff0c;仅有3个交易日单日成交金额过万亿&#xff0c;且成交量起伏较大&#xff0c;单日成交金额最低仅有6805.32亿元&#xff08;…...

Qt/C++音视频开发49-推流到各种流媒体服务程序

一、前言 最近将推流程序完善了很多功能&#xff0c;尤其是增加了对多种流媒体服务程序的支持&#xff0c;目前支持mediamtx、LiveQing、EasyDarwin、nginx-rtmp、ZLMediaKit、srs、ABLMediaServer等&#xff0c;其中经过大量的对比测试&#xff0c;个人比较建议使用mediamtx和…...

深度学习学习笔记——解决过拟合问题的方法:权重衰减和暂退法,与正则化之间的关系

解决过拟合问题是机器学习和深度学习中关键的任务之一&#xff0c;因为它会导致模型在训练数据上表现良好&#xff0c;但在未见数据上表现不佳。以下是一些解决过拟合问题的常见方法&#xff1a; 增加训练数据&#xff1a; 增加更多的训练数据可以帮助模型更好地捕捉数据的真实…...

【Leetcode Sheet】Weekly Practice 5

Leetcode Test 823 带因子的二叉树(8.29) 给出一个含有不重复整数元素的数组 arr &#xff0c;每个整数 arr[i] 均大于 1。 用这些整数来构建二叉树&#xff0c;每个整数可以使用任意次数。其中&#xff1a;每个非叶结点的值应等于它的两个子结点的值的乘积。 满足条件的二…...

STM32 SPI对存储芯片发送写是能命令后一直忙等待

我采用CUBE配置的SPI外设&#xff0c;对NSS引脚选择了硬件输出&#xff0c;这种方式对读取命令没有影响&#xff0c;但是对写命令有&#xff0c;当我发送写是能命令后&#xff0c;读取状态寄存器的值一直都是忙&#xff0c;我猜测这可能是硬件控制NSS引脚后&#xff0c;对于HAL…...

MySql学习笔记01——SQL的相关术语

SQL&#xff08;相关术语&#xff09; 数据库database 有组织的存储数据的容器&#xff0c;通常是一个文件或者一组文件 表table 存储数据的文件称为表&#xff0c;表是某种特定数据的结构化清单。 表可以保存顾客清单、产品目录&#xff0c;或者其他信息清单。 要注意的是&am…...

SpringMVC入门指南

目录 前言 一、什么是SpringMVC 二、MVC架构模式 三、SpringMVC的工作流程 四、SpringMVC核心组件 五、SpringMVC的优势 六、SpringMVC的配置与常用注解 七、SpringMvc请求处理流程、 控制器的编写 、视图的渲染 1.请求处理流程&#xff1a; 2.控制器的编写&#xff1…...

mysql忘记root密码如何解决?

第一步&#xff1a;首先右键此电脑打开管理器&#xff0c;查看mysql是否运行 第二步&#xff1a;用管理员模式打开命令框 输入net stop mysql暂停mysql运行 net stop mysql 然后输入下面指令 mysql --console --skip-grant-tables --shared-memory 显示如下 第三步&…...

ChatGPT可以生成Windows密钥

ChatGPT 可以回答许多问题、生成和修改代码&#xff0c;最近还可以生成 Windows 10 和 Windows 11 的许可证密钥。自从 OpenAI 的 ChatGPT 推出以来&#xff0c;人工智能已成为许多用户面临的挑战。 他们不断地试图削弱这种智力&#xff0c;或者想尝试它的局限性和可能性。例如…...

jupyter notebook内核启动报错:ImportError: DLL load failed while importing _device

1.报错信息 File “D:\Programs\Programming\Anaconda3\envs\pytorch_mis\lib\site-packages\zmq\backend\cython_init_.py”, line 6, in from . import ( ImportError: DLL load failed while importing _device: 找不到指定的模块。 2.解决方案 pyzmq版本冲突&#xff0…...

蓝桥杯备赛(Day5)——二叉树

二叉树存储 普通做法&#xff0c;二叉树一个节点包括结点的数值以及指向左右子节点的指针 在class Node中 def __init__(self,s,lNone,rNone):self.valNoneself.llself.rr 在竞赛中&#xff0c;我们往往使用静态数组实现二叉树&#xff0c;定义一个大小为N的静态结构体数组…...

实现Android APK瘦身99.99%

摘要&#xff1a; 如何瘦身是 APK 的重要优化技术。APK 在安装和更新时都需要经过网络下载到设备&#xff0c;APK 越小&#xff0c;用户体验越好。本文作者通过对 APK 内在机制的详细解析&#xff0c;给出了对 APK 各组成成分的优化方法及技术&#xff0c;并实现了一个基本 APK…...

webScoket长连接人性化解读

今天我们来整理一下webScoket&#xff0c;首先 webScoket是HTML5提出的一个基于TCP的一个全双工可靠通讯协议&#xff0c;处在应用层。很多人喜欢说webScoket是一次连接&#xff0c;这是误区&#xff0c;其实他是基于TCP的只不过将三次握手与四次挥手进行隐藏&#xff0c;封装。…...

ESDA in PySal (1) 利用 A-DBSCAN 聚类点并探索边界模糊性

ESDA in PySAL (1) 利用 A-DBSCAN 聚类点并探索边界模糊性 在本例中,我们将以柏林的 AirBnb 房源样本为例,说明如何使用 A-DBSCAN (Arribas-Bel et al., 2019)。A-DBSCAN 可以让我们做两件事: 识别高密度 AirBnb 房源集群并划定其边界探索这些边界的稳定性%matplotlib inli…...

利用GitHub实现域名跳转

利用GitHub实现域名跳转 一、注册一个 github账号 你需要注册一个 github账号,最好取一个有意义的名字&#xff0c;比如姓名全拼&#xff0c;昵称全拼&#xff0c;如果被占用&#xff0c;可以加上有意义的数字. 本文中假设用户名为 UNIT-wuji(也是我的博客名) 地址: https:/…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...