uniapp踩坑之项目:判断字符串长度自动调整选项卡宽度

利用动态:class来判断字长调整选项卡uni-data-select 宽度

//html
<view><view style="width:100%" :class="checkLength(text)>4 ? 'textexplode':''textshrink"><uni-data-select v-model="value" :localdata="rangeTag" @change="changeStyleTag" :clear="false"></uni-data-select></view>
</view>//data
// Tag选项卡
value: 0, // 默认index当前索引
rangeTag: [{ value: 0, text: "xxxxxxx" },{ value: 1, text: "xxx" },],
text: '',// 首次加载页面
onLoad () {this.rangeTag.map(v => {if (this.value == v.value) {this.text = v.text}})},methods: {// 选项卡点击事件changeStyleTag (e) {//console.log('changeStyleTag', e)this.rangeTag.map(v => {if (e == v.value) {this.text = v.text}})//console.log(this.text, 'this.text');},/*** 获取字符串字节长度* @param {String}* @returns {Boolean}*/checkLength (v) {const realLength = v.length;//console.log(v.length);return realLength;},}//css
// 宽度扩展
.textexplode {width: 100%;
}
// 宽度收缩
.textshrink {min-width: 65%;
}

 

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

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

相关文章

android 开发中常用命令

1.反编译 命令&#xff1a;apktool d <test.apk> -o <folderdir> 其中&#xff1a;test.apk是待反编译文件的路径&#xff0c;folderdir是反编译后的文件的存储位置。 apktool d -f <test.apk> -o <folderdir> 注意&#xff1a;如果dir已经存在&am…

从零学算法34

34.给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 1&#xff1…

React Native 在高IOS版本下无法显示图片的问题处理

图片在低ios版本下可以看到图片&#xff0c;在高版本ios下显示不了图片 直接上解决方法 找文件 /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m 修改源码 原代码 if (_currentFrame) {layer.contentsScale self.animatedImageScale;layer.contents…

php中nts和ts

PHP语言解析器:官方提供了2种类型的版本&#xff0c;线程安全(TS)版和非线程安全(NTS)版 TS: TS(Thread-Safety)即线程安全&#xff0c;多线程访问时&#xff0c;采用了加锁机制&#xff0c;当一个线程访问该类的某个数据时进行数据加锁保护&#xff0c;其他线程不能同时进行访…

您的网站不应该只提供一套通用 API

后端应该提供两套 API&#xff0c;一套是外部使用的通用 API&#xff0c;服务特定的数据&#xff0c;另一套是自家使用的应用 API&#xff0c;服务特定的页面。 在当今的web开发中&#xff0c;构建一个提供JSON服务的后端和一个渲染应用程序的前端是很流行的。我不太喜欢&…

【Sklearn】基于决策树算法的数据分类预测(Excel可直接替换数据)

【Sklearn】基于决策树算法的数据分类预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理1.1 模型原理1.2 数学模型 2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果 1.模型原理 决策树是一种基于树状结构的分类和回归模型&#xff0c;它通过一系列…

MySql(干货)

写这篇博客的目的不是为了将介绍原理&#xff0c;而是为了Sql中的代码操作属实太多了&#xff0c;在这里进行一个汇总&#xff0c;方便查阅&#xff01;&#xff01;&#xff01; Sql分类 分类全称说明 DDL Data Definintion Language数据定义语言&#xff0c;用来定义数据库对…

微信小程序(由浅到深)

文章目录 一. 项目基本配置1. 项目组成2. 常见的配置文件解析3. app.json全局的五大配置4.单个页面中的page配置5. App函数6.tabBar配置 二. 基本语法&#xff0c;事件&#xff0c;单位1. 语法2. 事件3. 单位 三. 数据响应式修改四 . 内置组件1. button2. image3. input4. 组件…

k8s常用资源管理 控制

目录 Pod&#xff08;容器组&#xff09;&#xff1a;Pod是Kubernetes中最小的部署单元&#xff0c;可以包含一个或多个容器。Pod提供了一种逻辑上的封装&#xff0c;使得容器可以一起共享网络和存储资源 1、创建一个pod 2、pod管理 pod操作 目录 创建Pod会很慢 Pod&…

什么是事务,并发带来的事务问题以及事务隔离级别(图文详解)

一、什么是事务&#xff1f; 简单说就是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。 举个例子&#xff0c;假如小明要给小红转账100元&#xff0c;这个转账会涉及到两个关键操作&#xff1a;①将小明的余额减少100元。 ②将小红的余额增加100元 。但…

学习笔记整理-JS-04-流程控制语句

文章目录 一、条件语句1. if语句的基本使用2. if else if多条件分支3. if语句算法题4. switch语句5. 三元运算符 二、循环语句1. for循环语句2. for循环算法题3. while循环语句4. break和continue5. do while语句 三、初识算法1. 什么是算法2. 累加器和累乘器3. 穷举法4. 综合算…

给大家推荐一些文本翻译、文档翻译API接口

最近在项目中要接入文本翻译和文档翻译功能&#xff0c;满足在工作时使用&#xff0c;又需要了解每个人的使用情况&#xff0c;所以采用了集成翻译API的方式&#xff0c;我再调研时也查了比较多的资料&#xff0c;总结了我感觉比较好的网站。 推荐网站 1、百度翻译&#xff0…

设计模式(2)工厂方法模式

一、 1、介绍&#xff1a;定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。简单工厂模式的最大优点在于工厂类中包含了必要的逻辑判断&#xff0c;根据客户端的选择条件动态实例化相关的类&#xff0c;对于客户端来说…

odoo-034 float 浮点数比较

文章目录 前提问题解决总结 前提 odoo 版本&#xff1a;13 python&#xff1a;3.6.9 问题 比较销售订单行中已送货跟已开票&#xff0c;在 tree 视图显示搜索后的结果。发现搜索条件为已送货 > 已开票时&#xff0c;结果中会包含已送货已开票的。 解决 把这两个值打印出…

LeNet中文翻译

Gradient-Based Learning Applied to Document Recognition 基于梯度的学习应用于文档识别 摘要 使用反向传播算法训练的多层神经网络构成了成功的基于梯度的学习技术的最佳示例。给定适当的网络架构&#xff0c;基于梯度的学习算法可用于合成复杂的决策表面&#xff0c;该决策…

【Vue-Router】使用 prams 路由传参失效

报错信息&#xff1a; [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating. list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水",&quo…

node获取微信小程序登录用户的openid

前提准备&#xff1a; 1、需要知道AppID(小程序ID) 2、AppSecret(小程序密钥) 3、调wx.login成功后返回的code 代码如下&#xff1a; const express require(express); const router express.Router(); const request require(request) const APP_URL https://api.wei…

考研408 | 【计算机网络】 网络层

导图 网络层&#xff1a; 路由器功能&#xff1a;转发&路由选择 数据平面 数据平面执行的主要功能是根据转发表进行转发&#xff0c;这是路由器的本地动作。 控制平面 1.传统方法/每路由器法&#xff1a; 2.SDN方法&#xff08;Software-Defined Networking) 控制平面中的…

C++并发多线程--多个线程的数据共享和保护

目录 1--创建并等待多个线程 2--数据共享 2-1--数据只读 2-2--数据读写 2-3--共享数据保护简单案例 1--创建并等待多个线程 创建多个线程时&#xff0c;可以使用同一个线程入口函数&#xff1b; 多个线程的执行顺序与操作系统的调度机制有关&#xff0c;并不和创建线程的先…

html实现商品图片放大镜,html图片放大镜预览

效果 实现 复制粘贴&#xff0c;修改图片路径即可使用 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>商品图片放大镜</title></head><style>body {margin: 0;padding: 0;}#app {padding: 10px;posit…