微信小程序 textarea 层级过高问题简单解决方案


Posted in Javascript onOctober 14, 2019

这篇文章主要介绍了微信小程序 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 首次不正确

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
javascript 一些用法小结
Sep 11 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
vue的路由映射问题及解决方案
Oct 14 #Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
Vue3 源码导读(推荐)
Oct 14 #Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 #Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
You might like
php实现CSV文件导入和导出
2015/10/24 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jquery常用操作小结
2014/07/21 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
python定时器使用示例分享
2014/02/16 Python
Python通过select实现异步IO的方法
2015/06/04 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
值传递还是引用传递
2015/02/08 面试题
教导处工作制度
2014/01/18 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
初中班级口号
2014/06/09 职场文书
项目合作意向书模板
2014/07/29 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python