微信小程序 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 相关文章推荐
网上抓的一个特效
May 11 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
Vuex提升学习篇
Jan 11 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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运行时强制显示出错信息的代码
2011/04/20 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
在职研究生自我鉴定
2013/10/16 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
房屋租赁协议书
2014/10/18 职场文书
承诺书模板大全
2015/05/04 职场文书