auto-textarea

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)

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

Dependencies (依赖)

stylus

stylus-loader

reference (参考)

textarea 自适应

Licence (证书)

autoTextarea is open source and released under the MIT Licence.

Copyright (c) 2017 hinesboy