uni小程序——评论、文本域、发送、键盘调起、有值后按钮变色等

news2024/11/14 14:41:39

一、简介

文本域默认显示一行,最多显示4行,到了4行之后不再增高。
输入值后按钮变色

二、案例演示

在这里插入图片描述

三、代码

<template>
	<view>
		<view class="plBox">
			<textarea auto-height="true" maxlength="-1" :show-confirm-bar="false" cursor-spacing="100" fixed="true"
				placeholder="评论" v-model="plValue" @input="changeDisabled"></textarea>
			<button plain="true" @click="send" :disabled="disabled">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认禁止点击按钮
				disabled: true,
				plValue: ''
			}
		},

		onLoad() {

		},
		methods: {
			changeDisabled(e) {
				console.log(e);
				if (e.detail.value != "") {
					this.disabled = false;
				} else {
					this.disabled = true;
				}
			},
			send() {
				// console.log("点击发送", this.plValue);
				this.$emit("sendTxt", this.plValue)
			}
		}
	}
</script>

<style lang="scss">
	.plBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		display: flex;
		justify-content: space-between;
		align-items: center;

		textarea {
			flex: 7;
			flex-shrink: 0;
			border-radius: 15rpx;
			max-height: 140rpx !important;
			margin-right: 30rpx;
			border: none;
			background-color: #ffffff;
			padding: 20rpx;
		}

		button {
			flex: 1;
			border: 1px solid #D3D3D3;
			color: #ffffff;
			margin: 0;
			padding: 0 5rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #304D99;
		}
	}
</style>


网址:https://uniapp.dcloud.net.cn/component/textarea.html

auto-height="true"          //开启自动增高
:show-confirm-bar="false"   //不显示键盘上方带有”完成“按钮那一栏
cursor-spacing="100"        //指定光标与键盘的距离,不然会有遮挡
fixed="true"                //如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true

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

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

相关文章

[Linux安装软件详解系列]04 安装Redis

目录1、查看服务器是否已安装Redis2、安装Redis1&#xff09;下载2&#xff09;解压3&#xff09;安装4&#xff09;移动配置文件到安装目录下5&#xff09;配置redis为后台启动6&#xff09;将redis-cli&#xff0c;redis-server拷贝到bin下7&#xff09;启动redis8&#xff0…

RabbitMQ简介及在Linux中安装部署(yum)

一、RabbitMQ简介及其作用 RabbitMQ简介 RabbitMQ是在2007 年发布&#xff0c;是一个在 AMQP(高级消息队列协议)基础上完成的&#xff0c;可复用的企业消息系统&#xff0c;是当前最主流的消息中间件之一。RabbitMQ是一个由erlang开发的AMQP&#xff08;Advanced Message Queu…

Arcpy入门教程01:从零开始制作一个arcpy脚本

从零开始制作一个arcpy脚本 文章目录 需求分析代码实现构造临时工作目录数据处理过程及API解析脚本打包代码封装在红盒子中创建脚本报错提醒 EOL while scanning string literal完整代码需求分析 我们现在有一个GDB存储这西安市各个区的绿地面的GDB,以及碑林区和新城区的行政…

将时间序列转成图像——相对位置矩阵方法 Matlab实现

目录 1 方法 2 Matlab代码实现 3.结果 【若觉文章质量良好且有用&#xff0c;请别忘了点赞收藏加关注&#xff0c;这将是我继续分享的动力&#xff0c;万分感谢&#xff01;】 其他&#xff1a; 1.时间序列转二维图像方法及其应用研究综述_vm-1215的博客-CSDN博客 2.将时…

Nginx实现负载均衡

目录 一、环境准备 1、准备3台centos服务器 2、软件安装 二、负载均衡配置 三、其他分配策略 1、fair&#xff08;第三方&#xff09; 一、环境准备 1、准备3台centos服务器​​​​​​​ 服务器名称主机名IP安装服务备注Nginx反向代理服务器proxy192.168.1.10nginx关…

ES倒排序索引

前言 在学习Elasticsearch的使用前&#xff0c;我们先来了解下es是如何实现全文搜索的。 倒排索引是 Elasticsearch 中非常 重要的索引结构&#xff0c;从 文档单词到文档 ID 的过程 为什么要使用倒排索引 先看下面的商品数据goods id 标题 描述 1 小米手机 小米手机性…

【保姆级】新机器部署Redis

1、登录服务器&#xff0c;如果非root用户则切root用户 sudo su - 2、安装gcc yum install gcc-c 3、在/usr/tmp目录上传redis安装包 4、将安装包移到/opt/byd目录 mv redis-4.0.11.tar.gz /opt/byd 5、解压 & 重命名 tar -xzvf redis-4.0.11.tar.gz mv redis-4.0.11 …

安全狗受邀出席CIS 2022网络安全创新大会

11月16日&#xff0c;由网络安全行业门户Freebuf主办的CIS 2022网络安全创新大会&#xff08;简称CIS&#xff09;在上海主会场顺利开幕。 作为国内云原生安全领导厂商&#xff0c;安全狗也收到邀请出席此次活动。 据悉&#xff0c;此次大会分为上海、北京、深圳等多个会场&am…

Pytorch中的DDP

一. 概览 DDP的原理&#xff1f; 在分类上&#xff0c;DDP属于Data Parallel。简单来讲&#xff0c;就是通过提高batch size来增加并行度。为什么快&#xff1f; DDP通过Ring-Reduce的数据交换方法提高了通讯效率&#xff0c;并通过启动多个进程的方式减轻Python GIL的限制&am…

2022-11-17 mysql列存储引擎-聚合运算中间结果缓存磁盘文件以避免OOM-需求分析

摘要: mysql列存储引擎-聚合运算中间结果缓存磁盘文件以避免OOM-需求分析 关联ISSUE: https://github.com/stoneatom/stonedb/issues/21 需求分析ISSUE: https://github.com/stoneatom/stonedb/issues/949 上下文说明: 当前聚合运算的结果都缓存在了内存的HASH中, 一旦数据量…

数据库等值查询与统计信息

概念 统计信息是为优化器的 cost 估算提供数据支撑&#xff0c;其中很重要的一点需求便是等值查询(EQUALS, IN 等) 场景下的基数估算。考虑以下 Case CREATE TABLE mc_tac_template (ID BIGINT ,NAME varchar(50) NOT NULL,GENDER varchar(10) NOT NULL,PRIMARY KEY (ID),KEY K…

工业设计公司的办公环境有哪些特点?

设计公司的办公环境一直被称之为个性化的意味着&#xff0c;见惯了新科技公司的各类智能化豪情万丈的办公环境&#xff0c;也有别于正儿八经办公楼的循规蹈矩&#xff0c;每个设计公司的公司办公室总似一股清流一般的存在&#xff0c;自然各种设计公司&#xff0c;如平面、工业…

Flutter 在项目中使用动画(不使用包)

Flutter 在项目中使用动画(不使用包) 前言 动画对于 web 和移动应用程序都非常重要。但是在移动应用程序中不应该使用夸张的动画。简单但是很多动画使你的应用程序更好用。以至于当你点击一个按钮时&#xff0c;一种平滑的感觉或者页面过渡都会影响到你。 正文 1 按下按钮柔软的…

UNIAPP实战项目笔记39 我的页面布局

UNIAPP实战项目笔记39 我的页面布局 my.vue 我的页面布局 具体图片自己替换哈&#xff0c;随便找了个图片的做示例 代码 pages.json部分 去掉默认导航栏&#xff0c;改为自定义导航栏 ,{"path" : "pages/my/my","style" : …

408 | 【数据结构】 排序 —— 总复习框架总结

(一)排序的基本概念 排序算法的稳定性:经过排序后,能使关键字相同的元素保持原顺序中的相对位置不变。 (二)内部排序 2.1、插入排序 算法思想:每次将一个待排序的记录按其关键字大小插入到前面已排好序的子序列中,直到全部记录插入完成。 2.1.1、直接插入排序 顺…

通过Xamarin实现东大集成PDA的扫码

目录1、东大集成PDA的扫码说明2、Xamarin通过广播实现扫码2.1 PDA的扫码工具设置2.2 代码实现2.2.1 主界面2.2.1 定义广播接收器2.2.2 在活动页面实现读取2.3 实现效果3、demo下载1、东大集成PDA的扫码说明 东大集成的PDA有两种方式实现设备自带的扫码功能。一种为调用硬件接口…

终极大招~pycharm自动补全opencv代码提示功能

你的pycharm还能自动补全opencv代码提示吗&#xff1f; 你可能通过修改cv2,进入__init__.py文件&#xff0c;一顿操作&#xff0c;还是不行。 你以为是工具问题&#xff0c;卸载重装&#xff1f; 还是opencv卸载重装好几次了 这次分享下我的方案&#xff0c;保证你一看就会。…

人工智能数学基础--概率与统计10:离散随机变量的概率函数及常见的二项分布、泊松分布

一、离散随机变量的概率函数及分布函数 设X为离散随机变量&#xff0c;其全部可能取值为{a1,a2,…}&#xff0c;则&#xff1a;piP(Xai) &nsp&nsp&nsp&nsp (i1,2,…)称为X的概率函数&#xff0c;也称为随机变量X的概率分布&#xff1b; 设X为随机变量&#xf…

【lombok】equals相等返回false contains包含返回false? lombok注解的一个天坑

最近在写代码的时候 遇到个奇怪的问题 使用 list.contains(obj) 方法判断&#xff0c;明明是两个内容一样的对象&#xff0c;却返回了false 这里用伪代码还原一下场景&#xff1a; // 从数据库取的所有数据 List<SysMenuDTO> allList getDataFromDB(); // 一个id等于1…

【Detectron2】代码库学习-3. LazyConfig 配置文件

目录1. 配置文件2. LazyConfig 导入导出3. 递归实例化4. 基于LazyConfig的训练步骤4.1 导入依赖库4.2 日志初始化4.3 训练4.4 评估4.5 训练流程4.6 主函数入口5. TipsDetectron2是Facebook AI Research(FAIR)推出的基于Pytorch的视觉算法开源框架&#xff0c;主要聚焦于目标检测…