【Vue】实现显示输入框字符长度

 

 <div style="float: right; margin-right: 10px">
      <el-popover placement="top-start" width="200" trigger="hover" :content="'当前输入的内容字节长度为:' +
        this.byteLength +
        ',剩余可输入的字节长度和最大文本长度设置的最大值为:' +
        (4096 - this.byteLength)
        ">
        <el-button slot="reference" type="text" class="el-icon-info"></el-button>
      </el-popover>
      <span style="line-height: 50px; font-size: 10px"> 字节长度: </span>

      <span style="line-height: 50px; font-size: 12px; color: #aaa">{{
        this.byteLength
      }}</span>
    </div>
computed: {
    byteLength() {
      var str = this.requestParams.prompt;
      if (str == null || str === undefined) return 0;
      if (typeof str != "string") {
        return 0;
      }
      var total = 0,
        charCode,
        i,
        len;
      for (i = 0, len = str.length; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode <= 0x007f) {
          total += 1; //字符代码在000000 – 00007F之间的,用一个字节编码
        } else if (charCode <= 0x07ff) {
          total += 2; //000080 – 0007FF之间的字符用两个字节
        } else if (charCode <= 0xffff) {
          total += 3; //000800 – 00D7FF 和 00E000 – 00FFFF之间的用三个字节,注: Unicode在范围 D800-DFFF 中不存在任何字符
        } else {
          total += 4; //010000 – 10FFFF之间的用4个字节
        }
      }
      return total;
    },
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学校管网的仿写

工字形布局完成 效果 代码部分 在这里插入代码片 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…

某书Frida检测绕过记录

某书Frida检测绕过记录 前言Frida启动APPHook android_dlopen_ext查看加载的库分析libmsaoaidsec.soFrida检测绕过后记 前言 本来想要分析请求参数加密过程&#xff0c;结果发现APP做了Frida检测&#xff0c;于是记录一下绕过姿势(暴力但有用) Frida版本&#xff1a;16.2.1 AP…

ctfhub-ssrf(2)

1.URL Bypass 题目提示:请求的URL中必须包含http://notfound.ctfhub.com&#xff0c;来尝试利用URL的一些特殊地方绕过这个限制吧 打开环境发现URL中必须包含http://notfound.ctfhub.com&#xff0c;先按照之前的经验查看127.0.0.1/flag.php,发现没什么反应&#xff0c;按照题…

vue和react通用后台管理系统权限控制方案

1. 介绍 在任何企业级应用中&#xff0c;尤其是后台管理系统&#xff0c;权限控制是一个至关重要的环节。它确保了系统资源的安全性&#xff0c;防止非法访问和操作&#xff0c;保障业务流程的正常进行。本文件将详细解析后台管理系统中的权限控制机制及其实施策略。 那么权限…

Linux:zabbix自定义监控项(6)

本章去做一个监控ftp服务是否正常启动的监控项目 大概就是先创建一个模板&#xff0c;我们把要做的东西放入这个模板&#xff0c;然后把这个模板应用到某个监控主机上就可以生效 1.准备监控项脚本 其中的核心就是&#xff0c;通过脚本去判断一个东西的数值&#xff0c;通过这个…

算法刷题记录2

4.图 4.1.被围绕的区域 思路&#xff1a;图中只有与边界上联通的O才不算是被X包围。因此本题就是从边界上的O开始递归&#xff0c;找与边界O联通的O&#xff0c;并标记为#&#xff08;代表已遍历&#xff09;&#xff0c;最后图中剩下的O就是&#xff1a;被X包围的O。图中所有…

【Linux】进程和计划任务

目录 一、进程介绍 1.1 进程与线程的定义 1.1.1 进程(Process)** 1.1.2 线程(Thread)** 1.1.3 进程与线程的区别 1.2 进程的特征 1.3 进程状态 1.3.1 进程的基本状态 1.3.2 进程更多的状态 1.4 进程的优先级 1.5 进程间通信 1.6 进程的分类* 二、进程管理 2.1 查看…

java核心类

一,String字符串 1.1,String字符串是引用类型,且不可变 String str1 "Hello";String str2 str1.concat(" World"); // 使用concat方法连接字符串&#xff0c;返回一个新的字符串对象System.out.println(str1); // 输出&#xff1a;Hello&#xff0c;原始…

[大模型]InternLM2-7B-chat langchain 接入

InternLM2-7B-chat langchain 接入 InternLM2 &#xff0c;即书生浦语大模型第二代&#xff0c;开源了面向实用场景的70亿参数基础模型与对话模型 &#xff08;InternLM2-Chat-7B&#xff09;。模型具有以下特点&#xff1a; 有效支持20万字超长上下文&#xff1a;模型在20万…

Hadoop3:大数据的基本介绍

一、什么是大数据 1、大数据的4v特点 Volume&#xff08;大量&#xff09; Velocity&#xff08;高速&#xff09; Variety&#xff08;多样&#xff09; Value&#xff08;低价值密度&#xff09; 2、大数据部门间的工作岗位 第三部分&#xff0c;其实就是JavaWeb 二、…

使用TomCat写Film前后端项目04.14

使用TomCat写Film前后端项目源文件0414-CSDN博客 实现功能&#xff1a; 得到数据库所有电影数据在首页显示出来 添加 删除 修改 点击修改&#xff0c;获取编号id&#xff0c;传入到根据id编号查询数据的控制器转发数据到 修改的jsp页面。 获取修改数据传入到根据id修改数据的控…

2024 CKA | 基础操作教程(十五)

题目内容 设置配置环境&#xff1a; [candidatenode-1] $ kubectl config use-context xk8s Task 您必须从 master01 主机执行所需的 etcdctl 命令。 首先&#xff0c;为运行在 https://127.0.0.1:2379 上的现有 etcd 实例创建快照并将快照保存到 /var/lib/backup/etcd-sn…

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)

往期回顾 【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍-CSDN博客 【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用&#xff08;图文并茂超详细介绍&#xff09;-CSDN博客【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客【QT进阶】Qt Web混合编程之VS2019 C…

【C语言——动态内存管理】

一.为什么要有动态内存分配 通过前面的学习我们已经掌握了使用变量和数组来进行内存的开辟。 上面所说的这两种内存的开辟方式有两个特点&#xff1a; 空间开辟的大小是固定的。数组在生命的时候&#xff0c;必须指定数组的长度&#xff0c;数组空间一旦确定了大小就不能再调整…

逆滤波器的推导与实现

设滤波器为&#xff0c;逆滤波器为 根据滤波器和逆滤波器的定义 对上式做傅里叶变换 对上式做逆傅里叶变换可得&#xff0c; 好了&#xff0c;逆滤波器的公式推导完了&#xff0c;但是实际计算时大多数时候这样是算不出来的&#xff0c;除非像扫频或粉噪这样的全频带信号才行&…

C盘越用越大?教你如何科学管理C盘空间

前言&#xff1a; 如图&#xff0c;左边是我多开的E5电脑&#xff0c;装的是LTSC2019_210707F多开封装版&#xff0c;C盘占用8.5GB&#xff0c;右边是我平常打游戏写代码的电脑&#xff0c;装的是Win11 22H2&#xff0c;C盘占用30GB。两台电脑都关闭了休眠&#xff0c;C盘的虚拟…

logisim 图解超前进位加法器原理解释

鄙人是视频作者&#xff0c;文件在视频简介的网盘链接。 找规律图解超前进位加法器与原理解释_哔哩哔哩_bilibili 一句话就是“把能导致进位到这个位置的情况全都穷举一遍。” 穷举情况看图中算式。 视频讲解比较啰嗦。

LLM padding left or right

参考博客&#xff1a; 大部分的大模型(LLM)采用左填充(left-padding)的原因 注&#xff1a;文章主要内容参考以上博客&#xff0c;及其评论区&#xff0c;如有侵权&#xff0c;联系删除。 最近在看大模型相关内容的时候&#xff0c;突然想到我实习时候一直一知半解的问题&…

经典网络解读—IResNet

论文&#xff1a;Improved Residual Networks for Image and Video Recognition&#xff08;2020.4&#xff09; 作者&#xff1a;Ionut Cosmin Duta, Li Liu, Fan Zhu, Ling Shao 链接&#xff1a;https://arxiv.org/abs/2004.04989 代码&#xff1a;https://github.com/iduta…

Ubuntu22.04.4 - 网络配置 - 笔记

一、设置固定ip 1、cd /etc/netplan 查看文件夹下的配置文件 我这里叫 00-installer-config.yaml 2、sudo nano /etc/netplan/00-installer-config.yaml 完成配置后&#xff0c;按下Ctrl O保存更改&#xff0c;然后按下Ctrl X退出nano编辑器。 3、sudo netplan apply 4、ip …
最新文章