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

Element UI Input组件内容格式化:换行时行首添加圆点

<el-input v-model="input"placeholder="请输入"type="textarea":rows="8"@focus="handleFocus"@input.native="handleInput" />

解释一下:

  1. Element UI对 input 事件做了一层包装,无法返回event对象,使用 .native 修饰符可以返回event对象
  2. 圆点符号• 在Element UI默认的字体下显示为方块,需要修改默认字体为雅黑

<script>
export default {name: 'DashBoard',data () {return {input: ''}},methods: {// 获得焦点时,如果内容为空,首行添加圆点handleFocus () {if (this.input !== '') returnthis.input = '• '},// 录入文本时,每换一行在行首添加圆点handleInput (event) {if (event.inputType === 'insertLineBreak') {let txt = event.targetlet currentCursorPosition = txt.selectionStartlet textBeforeCursor = txt.value.substring(0, currentCursorPosition)let textAfterCursor = txt.value.substring(currentCursorPosition)// 添加特殊符号到新行的行首txt.value = textBeforeCursor + "• " + textAfterCursor// 重新设置光标位置txt.setSelectionRange(currentCursorPosition + 2, currentCursorPosition + 2)// 双向绑定的数据重新赋值this.input = txt.value}}}
}
</script>

解释一下:

  • HTMLInputElement.selectionStart

         一个表示选择文本的开始索引的数字。当没有选择时,它返回当前文本输入光标位置的偏移量。

HTMLInputElement - Web API 接口参考 | MDN

 

  • InputEvent.inputType

         InputEvent 接口中的只读属性 inputType 返回对可编辑内容所做更改的类型。可能的更改包括插入、删除和格式化文本。以下是一些可能的 inputType 值:

  1. "insertText": 表示插入文本,通常与用户键入文本时触发的输入事件相关。
  2. "insertLineBreak": 表示插入换行符,通常与用户按下回车键时触发的输入事件相关。
  3. "deleteContentBackward": 表示向后删除内容,通常与用户按下删除键时触发的输入事件相关。
  4. "deleteContentForward": 表示向前删除内容,通常与用户按下删除键时触发的输入事件相关。
  5. "deleteWordBackward": 表示向后删除单词,通常与用户按下组合键(例如 Ctrl + Backspace)时触发的输入事件相关。
  6. "deleteWordForward": 表示向前删除单词,通常与用户按下组合键(例如 Ctrl + Delete)时触发的输入事件相关。

InputEvent.inputType - Web API 接口参考 | MDN

  • HTMLInputElement.setSelectionRange()

        HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。

HTMLInputElement.setSelectionRange() - Web API 接口参考 | MDN

相关文章:

Element UI Input组件内容格式化:换行时行首添加圆点

<el-input v-model"input"placeholder"请输入"type"textarea":rows"8"focus"handleFocus"input.native"handleInput" /> 解释一下&#xff1a; Element UI对 input 事件做了一层包装&#xff0c;无法返回…...

十、Qt 操作PDF文件

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …...

开源软件合规风险与开源协议的法律效力

更多内容&#xff1a;​​​​​​OWASP TOP 10 之敏感数据泄露 OWASP TOP 10 之失效的访问控制 ​​​​​​OWASP TOP 10 之失效的身份认证 一、开源软件主要合规风险 1、版权侵权风险 没有履行开源许可证规定的协议导致的版权侵权&#xff0c;例如没有按照许可要求的保留…...

2024全新开发API接口调用管理系统网站源码 附教程

2024全新开发API接口调用管理系统网站源码 附教程 用layui框架写的 个人感觉很简洁 方便使用和二次开发...

[Linux 进程(四)] 再谈环境变量,程序地址空间初识

文章目录 1、前言2、环境变量2.1 main函数第三个参数 -- 环境参数表2.2 本地环境变量和env中的环境变量2.3 配置文件与环境变量的全局性2.4 内建命令与常规命令2.5 环境变量相关的命令 3、程序地址空间 1、前言 上一篇我们讲了环境变量&#xff0c;如果有不明白的先读一下上一…...

【C++】STL(标准模板库)

文章目录 1. 基本概念2. 容器2.1. 容器的分类2.2. vector2.2.1. 构造vector对象2.2.2. vector的赋值 1. 基本概念 STL&#xff08;Standard Template Library&#xff0c;标准模板库)是惠普实验室开发的一系列软件的统称&#xff0c;现在已经成为C标准库的重要组成部分。STL的…...

【已解决】fatal: Authentication failed for ‘https://github.com/.../‘

文章目录 异常原因解决方法 异常原因 在 Linux 服务器上使用git push命令&#xff0c;输入用户名和密码之后&#xff0c;总会显示一个报错&#xff1a; fatal: Authentication failed for https://github.com/TianJiaQi-Code/Linux.git/ # 致命&#xff1a;无法通过验证访问起…...

SqlAlchemy使用教程(二) 入门示例及编程步骤

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解 二、入门示例与基本编程步骤 在第一章中提到&#xff0c;Sqlalchemy提供了两套方法来访问数据库&#xff0c;由于Sqlalchemy 官方文档结构有些乱&#xff0c;对于ORM的使用步骤的描…...

HTML+JS+CSS移动端购物车选购界面

代码打包资源下载&#xff1a;【免费】HTMLJSCSS移动端购物车选购界面资源-CSDN文库 关键部分说明&#xff1a; UIGoods 类&#xff1a; 构造函数&#xff1a; 创建 UIGoods 实例时&#xff0c;传入商品数据 g&#xff0c;初始化商品的数据和选择数量。getTotalPrice() 方法…...

微服务治理:为什么要分析微服务的依赖关系?

在微服务架构中&#xff0c;单个服务相互协作以交付功能。这些协作会在服务之间形成依赖关系&#xff0c;其中一个服务依靠另一个服务来完成自己的任务。虽然依赖关系使功能得以实现&#xff0c;但不受控制的依赖关系可能会导致一系列挑战&#xff1a; 复杂性: 错综复杂的依赖…...

【程序员的自我修养—系统调用与API】

系统调用 背景&#xff1a; 为了避免有限的系统资源被多个不同的应用程序同时访问&#xff0c;需要加以保护&#xff0c;避免冲突&#xff1b;提供一套统一的接口&#xff0c;是应用程序能做一些由操作系统支持的行为&#xff1b;接口通过中断的方式实现&#xff0c;Linux使用…...

使用宝塔面板部署后端项目到服务器

文章目录 前言第一步&#xff1a;安装数据库第二步&#xff1a;打包后端项目第三步&#xff1a;配置数据库第四步&#xff1a;部署后端项目第五步&#xff1a;前后端联调测试总结 前言 在之前我已经写了一篇如何去部署前端项目&#xff0c;虽然能访问网站&#xff0c;但是没有…...

走迷宫(c语言)

前言&#xff1a; 制作一个迷宫游戏是一个有趣的编程挑战。首先&#xff0c;我们需要设计一个二维数组来表示迷宫的布局&#xff0c;其中每个元素代表迷宫中的一个格子。我们可以使用不同的值来表示空格、墙壁和起点/终点。接下来&#xff0c;我们需生成迷宫。在生成迷宫的过程…...

两周掌握Vue3(五):自定义指令、路由、ajax

文章目录 一、自定义指令1.创建和使用自定义指令2.钩子函数3.使用参数 二、路由1.创建一个router实例2.在components目录中创建组件3.将路由实例挂载到应用4.使用路由 三、Ajax 代码仓库&#xff1a;跳转 当前分支&#xff1a;05 一、自定义指令 自定义指令是Vue.js框架提供的…...

redis之单线程和多线程

目录 1、redis的发展史 2、redis为什么选择单线程&#xff1f; 3、主线程和Io线程是怎么协作完成请求处理的&#xff1f; 4、IO多路复用 5、开启redis多线程 1、redis的发展史 Redis4.0之前是用的单线程&#xff0c;4.0以后逐渐支持多线程 Redis4.0之前一直采用单线程的主…...

12AOP面向切面编程/GoF之代理模式

先看一个例子&#xff1a; 声明一个接口&#xff1a; // - * / 运算的标准接口! public interface Calculator {int add(int i, int j);int sub(int i, int j);int mul(int i, int j);int div(int i, int j); }实现该接口&#xff1a; package com.sunsplanter.prox…...

【MySQL】数据处理之增删改

文章目录 一、增加&#xff08;插入&#xff09;INSERT INTO...VALUES(...,...)VALUES的方式添加情况一&#xff1a;为表的所有字段按默认顺序插入数据情况二&#xff1a;为表的指定字段插入数据情况三&#xff1a;同时插入多条记录 将查询结果插入到表中 二、修改&#xff08;…...

利用docker的LNMP

目录 服务器环境 任务需求 服务搭建 Nginx Mysql Php 启动 wordpress 服务 服务器环境 容器 操作系统 IP地址 主要软件 nginx CentOS 7 172.20.0.10 Docker-Nginx mysql CentOS 7 172.20.0.20 Docker-Mysql php CentOS 7 172.2…...

Grafana(二)Grafana 两种数据源图表展示(json-api与数据库)

一. 背景介绍 在先前的博客文章中&#xff0c;我们搭建了Grafana &#xff0c;它是一个开源的度量分析和可视化工具&#xff0c;可以通过将采集的数据分析、查询&#xff0c;然后进行可视化的展示&#xff0c;接下来我们重点介绍如何使用它来进行数据渲染图表展示 Docker安装G…...

Shape-IoU——综合考量边框形状与尺度的度量

今天看到一篇文章主要是提出了一种更有效的IOU度量方法&#xff0c;论文地址在这里&#xff0c;如下所示&#xff1a; 摘要 边界盒回归损失作为检测器定位分支的重要组成部分&#xff0c;在目标检测任务中起着重要作用。现有的边界框回归方法通常考虑GT框和预测框之间的几何关…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...