微信小程序 textarea 层级过高问题简单解决方案
作者:microestc 发布时间:2024-04-18 09:36:41
标签:微信,小程序,textarea,层级
这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码
<template>
<view class="ui-textarea">
<textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{ txt }}" placeholder="{{ placeholder }}" bindinput="onInput" bindblur="onBlur" focus="{{focus}}"></textarea>
<view hidden="{{ hide == false }}" class="{{ txt === ''?'text placeholder':'text'}}" bindtap="onFocus">{{ txt ===''? placeholder:txt }}</view>
</view>
</template>
<script>
export default {
config: {
usingComponents: {}
},
behaviors: [],
properties: {
placeholder: {
type: String,
value: ''
},
maxlength: {
type: Number,
value: 128
},
name: String,
value: {
type: String,
value: ''
}
},
data: {
hide: true,
txt: '',
focus: false
},
ready() {
if (this.data.value != '') {
this.setData({ txt: this.data.value })
}
},
methods: {
onFocus() {
this.setData({ hide: false, focus: true })
},
onInput(e) {
this.setData({ txt: e.detail.value })
},
onBlur() {
this.setData({ hide: true, focus: false })
}
}
}
</script>
<style lang="less">
.ui-textarea {
position: relative !important;
.textarea.hidden {
display: block !important;
position: absolute !important;
left: -999px;
right: -999px;
top: 0;
}
.textarea {
width: 100%;
box-sizing: border-box;
}
.text {
height: 100%;
padding: 6px 5px;
font-size: 14px;
}
.placeholder {
color: #888;
}
}
</style>
Vue 代码,自己根据需求改一下 ,特别注意,不要用 wx;if 或者 hidden 属性 , wx:if 频繁渲染,虽然可以用,hidden 会出现 部分显示bug,[hidden] 会使auto-height 首次不正确
来源:https://www.cnblogs.com/microestc/p/11169191.html


猜你喜欢
- 我们已经了解到MySQL可以通过 LIKE ...% 来进行模糊匹配。MySQL 同样也支持其他正则表达式的匹配, MySQL中使用 REG
- 如下所示:def prn_obj(obj): print '\n'.join(['%s:%s'
- 我们在用Python进行机器学习建模项目的时候,每个人都会有自己的一套项目文件管理的习惯,我自己也有一套方法,是自己曾经踩过的坑总结出来的,
- 使用下面的命令检查是否安装有MySQL Server[root@localhost etc]# rpm -qa | grep mysql /
- 1. 前言邮件,作为最正式规范的沟通方式,在日常办公过程中经常被用到我们都知道 Python内置了对 SMTP 的支持,可以发送纯文本、富文
- MySQL root密码正确,却怎么也无法从本地登录MySQL,提示ERROR 1045 (28000): Access denied fo
- 学习golang不久,在定义全局变量的时候遇见了坑。写个小例子,增强记忆。错误版本var p intfunc main() { p, err
- python 字符串下标与切片的实例代码,如下:# !/usr/bin/env pythonname = "ksunone&quo
- 1、 设置WriteHeader的顺序问题之前遇到个问题,在一段代码中这样设置WriteHeader,最后在header中取Name时怎么也
- 前言在8之前的版本中,对于全局变量的修改,其只会影响其内存值,而不会持久化到配置文件中。数据库重启,又会恢复成修改前的值。从8开始,可通过S
- 最近实现了一些微信的简单玩法 我们可以通过网页版的微信微信网页版,扫码登录后去抓包爬取信息,还可以post去发送信息。》》安装it
- 以前写过一个刷校内网的人气的工具,Java的(以后再也不行Java程序了),里面用到了验证码识别,那段代码不是我自己写的:-) 校内的验证是
- 非阻塞IO(non-blocking IO)Linux下,可以通过设置socket使其变为non-blocking。当对一个non-bloc
- <? //以树型结构列出指定目录里的所有文件,如果你想知道自己某个目录里有哪些子目录和文件,可以调用这个类来查看,很方便的。 &nbs
- 一:模板要了解jinja2,那么需要先理解模板的概念。模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码
- 如何显示最后十名来访者?代码和说明见下:<%Application.LockIF NOT isArray(&nbs
- 一、案例分析我们先思考一下,实现扫码工具需要写什么操作。在扫码过程中我们需要打开摄像头,如何由手机或者电脑识别二维码。所以我们要实现两个关键
- 在SQL Server数据库的维护或者Web开发中,有时需要在存储过程或者作业等其他数据库操作中调用其它的存储过程,下面介绍其调用的方法一、
- 背景介绍图片的全景拼接如今已不再稀奇,现在的智能摄像机和手机摄像头基本都带有图片自动全景拼接的功能,但是一般都会要求拍摄者保持设备的平稳以及
- 背景在爬取网站数据时,我们通常会遇到一些动态渲染页面的网站。传统的静态网站我们可以直接通过 requests.get() 函数获取页面源代码