微信小程序 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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
ES6基础之默认参数值
2019/02/21 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python安装selenium包详细过程
2019/07/23 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
python 制作简单的音乐播放器
2020/11/25 Python
python中添加模块导入路径的方法
2021/02/03 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
给老婆的婚前保证书
2014/02/01 职场文书
教师师德演讲稿
2014/05/06 职场文书
民间借贷借条范本
2015/05/25 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle