/auto-textarea

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

Primary LanguageVueMIT LicenseMIT

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