auto-textarea's Introduction

auto-textarea

基于Vue的高度自适应文本输入框

Use Setup (开始)

Install auto-textarea (安装)

$ npm install auto-textarea --save

package.json

"auto-textarea": "^1.3.6"

Use (如何引入)

    // 方法一
    // import with ES6
    import Vue from 'vue'
    import autoTextarea from 'auto-textarea'

    // require with Webpack/Node.js
    var Vue = require('vue')
    var autoTextarea = require('autoTextarea')

    // use
    Vue.use(autoTextarea)

    // 方法二
    // or use with component(ES6)
    import { autoTextarea } from 'auto-textarea'

    export default {
      components: {
        autoTextarea
      }
    }

    // html
    <autoTextarea placeholder="" lineHeight="30px" border="false" fontSize="18px" :value="" :onchange="function"/>

监听value

    <!-- 使用双向绑定修饰符 -->
    <autoTextarea v-model="value"/>

    <!-- 当value发生改变 , 触发onchange事件 参数为改变后的value -->
    <autoTextarea :value="value" :onchange="function"/>

API (props)

name 名称	type 类型	default 默认值	des 描述
value	String		初始值
autofocus	Boolean	false	自动聚焦
lineHeight	String	18px	输入框的行高
fontSize	String	14px	输入框文字大小
placeholder	String		输入框默认文字
border	Boolean	false	是否带有边框
fullHeight	Boolean	false	高度充满父级元素
onchange	Function		监听内容变化， function(val , $event)

analyse (原理剖析)

    // html
    <div>
        <pre><br>{{value}}</pre>
        <textarea v-model="value" placeholder="输入文字"></textarea>
    </div>

    // css
    div
      position relative
      pre
        display block
        visibility hidden
      textarea
        position absolute
        width 100%
        height 100%
        top 0
        left 0