微信小程序 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之解决IE下不渲染的bug
Jun 29 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
canvas绘制折线路径动画实现
May 12 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
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
详解python开发环境搭建
2016/12/16 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
开工典礼策划方案
2014/05/23 职场文书
音乐课外活动总结
2015/05/09 职场文书
安全教育第一课观后感
2015/06/17 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS