zoukankan      html  css  js  c++  java
  • 微信小程序 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 {
         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 首次不正确

  • 相关阅读:
    打印杨辉三角形
    Java中的基本数据类型
    C语言网上点餐系统1.0
    C语言中常用的输入和输出函数
    ubantu忘记登录密码怎么办?(ubantu16.04)
    Linux常用服务器构建-samba(ubantu)
    Vue为文件目录设置别名
    css内容占满全屏
    Vue中引入了better-scroll后 页面上的点击事件不生效了
    javascript中获取dom元素高度和宽度的方法
  • 原文地址:https://www.cnblogs.com/microestc/p/11169191.html
Copyright © 2011-2022 走看看