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

Dependencies (依赖)

stylus

stylus-loader

reference (参考)

textarea 自适应

Licence (证书)

autoTextarea is open source and released under the MIT Licence.

Copyright (c) 2017 hinesboy