vue3 + mark.js | 实现文字标注功能

页面效果

mark-demo.gif

具体实现

新增

  • 1、监听鼠标抬起事件，通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。
  • 2、通过 选中的文字长度是否大于0或window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置，即是否框选了)来判断是否展示标签选择的弹窗。
  • 3、标签选择的弹窗采用 子绝父相 的定位方式，通过鼠标抬起的位置确认弹窗的 top 与 left 值。
    const TAG_WIDTH = 280 //自定义最大范围，以保证不超过内容的最大宽度const tagInfo = ref({visible: false,top: 0,left: 0,})const el = document.getElementById('text-container')//鼠标抬起el?.addEventListener('mouseup', (e) => {const text = window?.getSelection()?.toString() || ''if (text.length > 0) {const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300tagInfo.value = {visible: true,top: e.offsetY + 40,left: left,}getSelectedTextData()} else {tagInfo.value.visible = false}//清空重选/取消数据resetEditTag()

  const selectedText = reactive({start: 0,end: 0,content: '',})//获取选取的文字数据const getSelectedTextData = () => {const select = window?.getSelection() as anyconsole.log('selectselectselectselect', select)const nodeValue = select.focusNode?.nodeValueconst anchorOffset = select.anchorOffsetconst focusOffset = select.focusOffsetconst nodeValueSatrtIndex = markContent.value?.indexOf(nodeValue)selectedText.content = select.toString()if (anchorOffset < focusOffset) {//从左到右标注selectedText.start = nodeValueSatrtIndex + anchorOffsetselectedText.end = nodeValueSatrtIndex + focusOffset} else {//从右到左selectedText.start = nodeValueSatrtIndex + focusOffsetselectedText.end = nodeValueSatrtIndex + anchorOffset}}

javascript操作光标和选区详情可参考文档：https://blog.51cto.com/u_14524391/3712814

  • 4、选中标签后，采用markjs的markRanges()方式去创建一个选中的元素并为其添加样式和绑定事件。
  • 5、定义一个响应式的文字列表，专门记录标记的内容，添加完元素后可追加一条已标记的数据。
import Mark from 'mark.js'
import {ref} from 'vue
import { nanoid } from 'nanoid'const selectedTextList = ref([])const handleSelectLabel = (t) => {const marker = new Mark(document.getElementById('text-container'))const { tag_color, tag_name, tag_id } = tconst markId = nanoid(10)marker.markRanges([{start: selectedText.start, //必填length: selectedText.content.length, //必填},],{className: 'text-selected',element: 'span',each: (element: any) => {//为元素添加样式和属性element.setAttribute('id', markId)element.style.borderBottom = `2px solid ${t.tag_color}` //添加下划线element.style.color = t.tag_color//绑定事件element.onclick = function (e: any) {//}},})selectedTextList.value.push({tag_color,tag_name,tag_id,start: selectedText.start,end: selectedText.end,mark_content:selectedText.content,mark_id: markId,})
}

删除

image.png

点击已进行标记的文字————>重选/取消弹窗显示————>点击取消

如何判断点击的文字是否已标记，通过在创建的标记元素中绑定点击事件，触发则表示已标记。

  1. 在点击事件中记录该标记的相关内容，如颜色，文字，起始位置，以及唯一标识id（新建时给元素添加一个id属性，点击时即可通过e.target.id获取）
      import { nanoid } from 'nanoid'//选择标签后const markId = nanoid(10)marker.markRanges([{start: isReset ? editTag.value.start : selectedText.start,length: isReset ? editTag.value.content.length : selectedText.content.length,},],{className: 'text-selected',element: 'span',each: (element: any) => {element.setAttribute('id', markId)//绑定事件element.onclick = function (e: any) {e.preventDefault()if (!e.target.id) returnconst left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as anyconst { mark_content, tag_id, start, end } = item || {}editTag.value = {visible: true,top: e.offsetY + 40,left: e.offsetX,mark_id: e.target.id,content: mark_content || '',tag_id: tag_id || '',start: start,end: end,}tagInfo.value = {visible: false,top: e.offsetY + 40,left: left,}}},})
  1. 点击取消后，获取在此前记录的id，根据id查询相关的标记元素
  • 使用markjs.unmark()方法即可删除此元素。
  • 绑定的响应式数据，可使用findIndex和splice()删除
  1. 编辑弹窗隐藏
const handleCancel = () => {if (!editTag.value.mark_id) returnconst markEl = new Mark(document.getElementById(editTag.value.mark_id))markEl.unmark()selectedTextList.value.splice(selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),1)tagInfo.value = {visible: false,top: 0,left: 0,}resetEditTag()}const resetEditTag = () => {editTag.value = {visible: false,top: 0,left: 0,mark_id: '',content: '',tag_id: '',start: 0,end: 0,}}

重选

image.png

和取消的步骤一样，只不过在点击重选后，先弹出标签弹窗，选择标签后，需要先删除选中的元素，然后再新增一个标记元素。由于在标签选择，在标签选择中判断一下是否是重选，是重选的话就需删除后再创建元素，不是的话就代表是新增，直接新增标记元素（综上所述）。

  const handleSelectLabel = (t: TTag) => {tagInfo.value.visible = falseconst { tag_color, tag_name, tag_id } = tconst marker = new Mark(document.getElementById('text-container'))const markId = nanoid(10)const isReset = selectedTextList.value?.map((j) => j.mark_id).includes(editTag.value.mark_id)? 1: 0 // 1:重选 0:新增if (isReset) {//如若重选,则删除后再新增标签const markEl = new Mark(document.getElementById(editTag.value.mark_id))markEl.unmark()selectedTextList.value.splice(selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),1)}marker.markRanges([{start: isReset ? editTag.value.start : selectedText.start,length: isReset ? editTag.value.content.length : selectedText.content.length,},],{className: 'text-selected',element: 'span',each: (element: any) => {element.setAttribute('id', markId)element.style.borderBottom = `2px solid ${t.tag_color}`element.style.color = t.tag_colorelement.style.userSelect = 'none'element.style.paddingBottom = '6px'element.onclick = function (e: any) {e.preventDefault()if (!e.target.id) returnconst left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as anyconst { mark_content, tag_id, start, end } = item || {}editTag.value = {visible: true,top: e.offsetY + 40,left: e.offsetX,mark_id: e.target.id,content: mark_content || '',tag_id: tag_id || '',start: start,end: end,}tagInfo.value = {visible: false,top: e.offsetY + 40,left: left,}}},})selectedTextList.value.push({tag_color,tag_name,tag_id,start: isReset ? editTag.value.start : selectedText.start,end: isReset ? editTag.value.end : selectedText.end,mark_content: isReset ? editTag.value.content : selectedText.content,mark_id: markId,})}

清空标记

image.png

const handleAllDelete = () => {selectedTextList.value = []const marker = new Mark(document.getElementById('text-container'))marker.unmark()}

完整代码

<script setup lang="ts">import { ref, onMounted, reactive } from 'vue'import Mark from 'mark.js'import { nanoid } from 'nanoid'type TTag = {tag_name: stringtag_id: stringtag_color: string}type TSelectText = {tag_id: stringtag_name: stringtag_color: stringstart: numberend: numbermark_content: stringmark_id: string}const TAG_WIDTH = 280const selectedTextList = ref<TSelectText[]>([])const selectedText = reactive({start: 0,end: 0,content: '',})const markContent = ref('这是标注的内容有业绩还是我我很快就很快就开完如突然好几个地方各级很大功夫数据库二极管捍卫国家和我回家很晚十九世纪俄国激活工具和丈母娘环境和颠覆国家的高房价奥苏爱哦因为i以太网图的还是觉得好看啊空间函数调用加快速度还是饥渴的发货可是磕碰日俄和那那么会就开始开会的数据库和也会觉得讲故事的而黄金九二额呵呵三角函数的吧合乎实际的和尽快核实当升科技看交互的接口和送二ui为人开朗少女都被你们进货金额麦当娜表面上的')const tagInfo = ref({visible: false,top: 0,left: 0,})const editTag = ref({visible: false,top: 0,left: 0,mark_id: '',content: '',tag_id: '',start: 0,end: 0,})const tagList: TTag[] = [{tag_name: '标签一',tag_color: `#DE050CFF`,tag_id: 'tag_id1',},{tag_name: '标签二',tag_color: `#6ADE05FF`,tag_id: 'tag_id2',},{tag_name: '标签三',tag_color: `#DE058BFF`,tag_id: 'tag_id3',},{tag_name: '标签四',tag_color: `#9205DEFF`,tag_id: 'tag_id4',},{tag_name: '标签五',tag_color: `#DE5F05FF`,tag_id: 'tag_id5',},]const handleAllDelete = () => {selectedTextList.value = []const marker = new Mark(document.getElementById('text-container'))marker.unmark()}const handleCancel = () => {if (!editTag.value.mark_id) returnconst markEl = new Mark(document.getElementById(editTag.value.mark_id))markEl.unmark()selectedTextList.value.splice(selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),1)tagInfo.value = {visible: false,top: 0,left: 0,}resetEditTag()}const handleReset = () => {editTag.value.visible = falsetagInfo.value.visible = true}const handleSave = () => {console.log('标注的数据', selectedTextList.value)}const handleSelectLabel = (t: TTag) => {const { tag_color, tag_name, tag_id } = ttagInfo.value.visible = falseconst marker = new Mark(document.getElementById('text-container'))const markId = nanoid(10)const isReset = selectedTextList.value?.map((j) => j.mark_id).includes(editTag.value.mark_id)? 1: 0 // 1:重选 0:新增if (isReset) {//如若重选,则删除后再新增标签const markEl = new Mark(document.getElementById(editTag.value.mark_id))markEl.unmark()selectedTextList.value.splice(selectedTextList.value?.findIndex((t) => t.mark_id == editTag.value.mark_id),1)}marker.markRanges([{start: isReset ? editTag.value.start : selectedText.start,length: isReset ? editTag.value.content.length : selectedText.content.length,},],{className: 'text-selected',element: 'span',each: (element: any) => {element.setAttribute('id', markId)element.style.borderBottom = `2px solid ${t.tag_color}`element.style.color = t.tag_colorelement.style.userSelect = 'none'element.style.paddingBottom = '6px'element.onclick = function (e: any) {e.preventDefault()if (!e.target.id) returnconst left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300const item = selectedTextList.value?.find?.((t) => t.mark_id == e.target.id) as anyconst { mark_content, tag_id, start, end } = item || {}editTag.value = {visible: true,top: e.offsetY + 40,left: e.offsetX,mark_id: e.target.id,content: mark_content || '',tag_id: tag_id || '',start: start,end: end,}tagInfo.value = {visible: false,top: e.offsetY + 40,left: left,}}},})selectedTextList.value.push({tag_color,tag_name,tag_id,start: isReset ? editTag.value.start : selectedText.start,end: isReset ? editTag.value.end : selectedText.end,mark_content: isReset ? editTag.value.content : selectedText.content,mark_id: markId,})}/*** 获取选取的文字数据*/const getSelectedTextData = () => {const select = window?.getSelection() as anyconst nodeValue = select.focusNode?.nodeValueconst anchorOffset = select.anchorOffsetconst focusOffset = select.focusOffsetconst nodeValueSatrtIndex = markContent.value?.indexOf(nodeValue)selectedText.content = select.toString()if (anchorOffset < focusOffset) {//从左到右标注selectedText.start = nodeValueSatrtIndex + anchorOffsetselectedText.end = nodeValueSatrtIndex + focusOffset} else {//从右到左selectedText.start = nodeValueSatrtIndex + focusOffsetselectedText.end = nodeValueSatrtIndex + anchorOffset}}const resetEditTag = () => {editTag.value = {visible: false,top: 0,left: 0,mark_id: '',content: '',tag_id: '',start: 0,end: 0,}}const drawMark = () => {//模拟后端返回的数据const res = [{start: 2, //必备end: 6,tag_color: '#DE050CFF',tag_id: 'tag_id1',tag_name: '标签一',mark_content: '标注的内容',mark_id: 'mark_id1',},{start: 39,end: 41,tag_color: '#6ADE05FF',tag_id: 'tag_id2',tag_name: '标签二',mark_content: '二极管',mark_id: 'mark_id2',},{start: 58,end: 61,tag_color: '#DE058BFF',tag_id: 'tag_id3',tag_name: '标签三',mark_content: '激活工具',mark_id: 'mark_id3',},]selectedTextList.value = res?.map((t) => ({tag_id: t.tag_id,tag_name: t.tag_name,tag_color: t.tag_color,start: t.start,end: t.end,mark_content: t.mark_content,mark_id: t.mark_id,}))const markList =selectedTextList.value?.map((j) => ({...j,start: j.start, //必备length: j.end - j.start + 1, //必备})) || []const marker = new Mark(document.getElementById('text-container'))markList?.forEach?.(function (m: any) {marker.markRanges([m], {element: 'span',className: 'text-selected',each: (element: any) => {element.setAttribute('id', m.mark_id)element.style.borderBottom = `2px solid ${m.tag_color}`element.style.color = m.tag_colorelement.style.userSelect = 'none'element.style.paddingBottom = '6px'element.onclick = function (e: any) {console.log('cccccc', m)const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300editTag.value = {visible: true,top: e.offsetY + 40,left: e.offsetX,mark_id: m.mark_id,content: m.mark_content,tag_id: m.tag_id,start: m.start,end: m.end,}tagInfo.value = {visible: false,top: e.offsetY + 40,left: left,}}},})})}//页面初始化onMounted(() => {const el = document.getElementById('text-container')//鼠标抬起el?.addEventListener('mouseup', (e) => {const text = window?.getSelection()?.toString() || ''if (text.length > 0) {const left = e.offsetX < TAG_WIDTH ? 0 : e.offsetX - 300tagInfo.value = {visible: true,top: e.offsetY + 40,left: left,}getSelectedTextData()} else {tagInfo.value.visible = false}//清空重选/取消数据resetEditTag()})//从后端获取标注数据，进行初始化标注drawMark()})
</script><template><header><n-buttontype="primary":disabled="selectedTextList.length == 0 ? true : false"ghost@click="handleAllDelete">清空标记</n-button><n-buttontype="primary":disabled="selectedTextList.length == 0 ? true : false"@click="handleSave">保存</n-button></header><main><div id="text-container" class="text">{{ markContent }}</div><!-- 标签选择 --><divv-if="tagInfo.visible && tagList.length > 0":class="['tag-box p-4 ']":style="{ top: tagInfo.top + 'px', left: tagInfo.left + 'px' }"><div v-for="i in tagList" :key="i.tag_id" class="tag-name" @click="handleSelectLabel(i)"><n-space><p>{{ i.tag_name }}</p><n-button v-if="i.tag_id == editTag.tag_id" text type="primary">√</n-button></n-space><div:class="['w-4 h-4']":style="{background: i.tag_color,}"></div></div></div><!-- 重选/取消 --><divv-if="editTag.visible"class="edit-tag":style="{ top: editTag.top + 'px', left: editTag.left + 'px' }"><div class="py-1 bg-gray-100 text-center" @click="handleCancel">取 消</div><div class="py-1 bg-gray-100 mt-2 text-center" @click="handleReset">重 选</div></div></main>
</template><style lang="less" scoped>header {display: flex;justify-content: space-between;align-items: center;padding: 0 24px;height: 80px;border-bottom: 1px solid #e5e7eb;user-select: none;background: #fff;}main {background: #fff;margin: 24px;height: 80vh;padding: 24px;overflow-y: auto;position: relative;box-shadow: 0 3px 8px 0 rgb(0 0 0 / 13%);.text {color: #333;font-weight: 500;font-size: 16px;line-height: 50px;}.tag-box {position: absolute;z-index: 10;width: 280px;max-height: 40vh;overflow-y: auto;background: #fff;border-radius: 4px;box-shadow: 0 9px 28px 8px rgb(0 0 0 / 3%), 0 6px 16px 4px rgb(0 0 0 / 9%),0 3px 6px -2px rgb(0 0 0 / 20%);user-select: none;.tag-name {width: 100%;background: rgba(243, 244, 246, var(--tw-bg-opacity));font-size: 14px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;padding: 4px 8px;margin-top: 8px;}.tag-name:nth-of-type(1) {margin-top: 0;}}.edit-tag {position: absolute;z-index: 20;padding: 16px;cursor: pointer;width: 100px;background: #fff;border-radius: 4px;box-shadow: 0 9px 28px 8px rgb(0 0 0 / 3%), 0 6px 16px 4px rgb(0 0 0 / 9%),0 3px 6px -2px rgb(0 0 0 / 20%);user-select: none;}::selection {background: rgb(51 51 51 / 20%);}}
</style>

结束语

目前功能实现比较简单，还有很多发挥的空间，先小小的记录一下，最后~，预祝大家，双节快乐！！

markjs

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

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

相关文章

设计模式 - 代理模式

设计模式 - 代理模式

目录 一. 前言 二. 实现 三. 静态代理和动态代理 一. 前言 代理模式&#xff08;Proxy Pattern&#xff09;&#xff0c;为某个对象提供一种代理以控制对对象的访问。即客户端可通过代理对象间接访问目标对象&#xff0c;同时可限制、增强、修改目标对象的一些特性。访问者不…
阅读更多...
KF32A学习笔记（一）：工程导入、编译烧录方法（KF32 IDE+ KF32 PRO）

KF32A学习笔记（一）：工程导入、编译烧录方法（KF32 IDE+ KF32 PRO）

目录 概述KF32 IDE打开现有项目工程1.工程导入2.编译工程3.下载程序 KF32 PRO 概述 本文主要是对KF32A150芯片程序的编译、烧录方法进行说明。针对开发过程中的编译烧录和无代码情况下的烧录两种场景&#xff0c;需要安装ChipON PRO KF32和ChipON IDE KF32两个上位机工具&…
阅读更多...
华为云智能化组装式交付方案 ——金融级PaaS业务洞察及Web3实践的卓越贡献

华为云智能化组装式交付方案 ——金融级PaaS业务洞察及Web3实践的卓越贡献

伴随信息技术与金融业务加速的融合&#xff0c;企业应用服务平台&#xff08;PaaS&#xff09;已从幕后走向台前&#xff0c;成为推动行业数字化转型的关键力量。此背景下&#xff0c;华为云PaaS智能化组装式交付方案闪耀全场&#xff0c;在近日结束的华为全联接大会 2023上倍受…
阅读更多...
vue若依前端项目搭建

vue若依前端项目搭建

1.项目搭建 首先进入到你需要创建的项目目录下面&#xff0c;然后输入命令vue create .创建项目 接下来选择手动搭建&#xff0c;然后把下面图片中的内容选上 再然后继续配置一些参数信息 接下来运行npm run serve项目就启动起来了 2.配置登录界面文件 首先修改src/router…
阅读更多...
数据分享|R语言逻辑回归、线性判别分析LDA、GAM、MARS、KNN、QDA、决策树、随机森林、SVM分类葡萄酒交叉验证ROC...

数据分享|R语言逻辑回归、线性判别分析LDA、GAM、MARS、KNN、QDA、决策树、随机森林、SVM分类葡萄酒交叉验证ROC...

全文链接:http://tecdat.cn/?p27384 在本文中&#xff0c;数据包含有关葡萄牙“Vinho Verde”葡萄酒的信息&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 介绍 该数据集&#xff08;查看文末了解数据获取方式&#xff09;有1599个观测值和12个变量&#xf…
阅读更多...
使用EPPlus实现C#控件Excel文件内容导入转换

使用EPPlus实现C#控件Excel文件内容导入转换

使用EPPlus实现C#控件Excel文件内容导入转换 1.添加EPPlus库 在使用EPPlus库时&#xff0c;你需要确保在项目中添加了正确的引用。你可以通过以下方式添加引用&#xff1a; 打开你的项目。 在“解决方案资源管理器”中&#xff0c;右键单击“引用”并选择“管理NuGet程序包”…
阅读更多...
作为一名独立开发者，如何获取客户？

作为一名独立开发者，如何获取客户？

很多程序员想成为一名独立开发者&#xff0c;从事自由职业&#xff0c;最大的困难在于如何赚钱&#xff0c;进一步来说&#xff0c;就是如何找到自己的客户&#xff0c;有很多开发者拥有丰富的经验&#xff0c;优秀的能力&#xff0c;但无法吸引客户。这篇文章的灵感正是为此而…
阅读更多...
Python实现猎人猎物优化算法(HPO)优化随机森林回归模型(RandomForestRegressor算法)项目实战

Python实现猎人猎物优化算法(HPO)优化随机森林回归模型(RandomForestRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…
阅读更多...
一创聚宽的实盘就要关闭了，有没有好用的实盘平台推荐

一创聚宽的实盘就要关闭了，有没有好用的实盘平台推荐

挺多的&#xff0c;比较普遍的是QMT和Ptrade&#xff0c;python语言&#xff0c;易上手&#xff0c;通用性好&#xff0c;要说适用性可以考虑Ptrade&#xff0c;问一下你的客户经理有没有&#xff0c;用Ptrade的券商也多&#xff0c;如果之前用一创聚宽你可以无缝切换&#xff…
阅读更多...
单链表详细解析|画图理解

单链表详细解析|画图理解

前言&#xff1a; 在前面我们学习了顺序表&#xff0c;相当于数据结构的凉菜&#xff0c;今天我们正式开始数据结构的硬菜了&#xff0c;那就是链表&#xff0c;链表有多种结构&#xff0c;但我们实际中最常用的还是无头单向非循环链表和带头双向循环链表&#xff0c;我们今天先…
阅读更多...
ELF文件结构

ELF文件结构

目录 ELF文件类型 ELF文件结构 通过链接视角分析目标文件 ELF文件头(ELF Header) 节头表 .text代码节 .data 数据节 .rodata 只读数据节 .bss节 其他常见的节 字符串节 符号表 重定位表 通过运行视角分析目标文件 本节内容&#xff1a; ELF文件类型ELF文件结构 …
阅读更多...
san.js源码解读之工具(util)篇——splitStr2Obj函数

san.js源码解读之工具(util)篇——splitStr2Obj函数

一、 源码解析 /*** 将字符串逗号切分返回对象** param {string} source 源字符串* return {Object}*/ function splitStr2Obj(source) {var result {};each( // 2source.split(,), // 1function (key) { // 3result[key] key;});return result; }把字符串通过 split 函数以…
阅读更多...
【AI视野·今日Robot 机器人论文速览 第三十六期】Tue, 19 Sep 2023

【AI视野·今日Robot 机器人论文速览 第三十六期】Tue, 19 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Tue, 19 Sep 2023 (showing first 100 of 112 entries) Totally 112 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;In-Hand Object Rotation, RotateIt 提出了一种基于视觉与触觉的物体旋转朝向的方法…
阅读更多...
一文了解优先考虑结果的以「意图」为中心的 Intent-Centric 架构

一文了解优先考虑结果的以「意图」为中心的 Intent-Centric 架构

Web3 用户体验成是阻碍区块链被大规模采用的原因之一&#xff0c;而 Intent-Centric 架构形式极大简化了用户的体验门槛。 Ac-Core&#xff1a;实现意图所需元素&#xff1a;1&#xff09;账户抽象&#xff1a;利用捆绑器加代付合约完成适合开发者的狭义意图&#xff1b;2&…
阅读更多...
【萌新的RiscV学习之流水线结构的概述-7】

【萌新的RiscV学习之流水线结构的概述-7】

萌新的RiscV学习之流水线结构的概述-7 之前写完了单周期的指令 目前朝着流水线迈进 由于涉及学业机密 就不展示代码了 主要展示学习过程和一些想法 由于时钟周期必须满足所有指令中最坏的情况&#xff0c;所以不能使用那些缩短常用指令执行时间而不改变最坏情况的实现技术。因…
阅读更多...
链表（单链表、双链表）

链表（单链表、双链表）

前言&#xff1a;链表是算法中比较难理解的部分&#xff0c;本博客记录单链表、双链表学习&#xff0c;理解节点和指针的使用&#xff0c;主要内容包括&#xff1a;使用python创建链表、实现链表常见的操作。 目录 单链表 双链表 单链表 引入链表的背景&#xff1a; 先来看…
阅读更多...
2023年最新电商某东app端sign签名算法与cipher加解密逆向分析（2023-09-26)

2023年最新电商某东app端sign签名算法与cipher加解密逆向分析（2023-09-26)

前言&#xff1a; 本文仅供学习交流&#xff0c;只提供关键思路不会给出完整代码&#xff0c;严禁用于非法用途&#xff0c;若有侵权请联系我删除&#xff01;技术交流合作请私信&#xff01; 一.工具的选择&#xff08;抓包工具的选择&#xff0c;是门学问&#xff09; 用…
阅读更多...
Android存储权限完美适配（Android11及以上适配）

Android存储权限完美适配（Android11及以上适配）

一、Bug简述 一个很普通的需求&#xff0c;需要下载图片到本地&#xff0c;我的三个测试机&#xff08;荣耀Android10&#xff0c;红米 11 和小米Android 13都没有问题&#xff09;。 然后&#xff0c;主角登场了&#xff0c;测试的三星Android 13 死活拉不起存储权限弹窗。 …
阅读更多...
深入理解红黑树

深入理解红黑树

小白慎入&#xff01;本文难度比较高&#xff0c;需要对红黑树有一定的了解再来看&#xff01; 红黑树 红黑树是一种高级数据结构&#xff0c;是平衡树大家族中的一员&#xff0c;并且听名字就知道这个玩意不是凡物&#xff0c;可能你从未听过&#xff0c;但是你一定会为这样的…
阅读更多...
华为OD七日集训第6期 十一特辑 - 按算法分类，由易到难，循序渐进，玩转OD

华为OD七日集训第6期 十一特辑 - 按算法分类，由易到难，循序渐进，玩转OD

目录 专栏导读华为OD机试算法题太多了&#xff0c;知识点繁杂&#xff0c;如何刷题更有效率呢&#xff1f; 一、逻辑分析二、数据结构1、线性表① 数组② 双指针 2、map与list3、优先队列4、滑动窗口5、二叉树6、并查集7、栈 三、算法1、基础算法① 贪心算法② 二分查找③ 分治…
阅读更多...
最新文章

Copyright @ 2022~2023