Vue.js中的自动调整大小输入–vue-autosize-input

Vue.js中的自动调整大小输入–vue-autosize-input

插件名称:vue-autosize-input

发布时间:2020年6月9日

插件作者:houjiazong

官网 演示 GitHub下载

一个小的但有时有用的Vue.js组件,可根据您键入内容的长度自动调整文本字段的大小。

安装和下载:

# Yarn
$ yarn add vue-autosize-input

# NPM
$ npm install vue-autosize-input --save

如何使用它:

1.导入自动大小输入组件。

import AutosizeInput from 'vue-autosize-input';

2.将自动调整大小的输入添加到应用模板。

<template>
  <autosize-input
    v-model="value" />
</template>

3.注册组件并完成。

export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  }
}

4.输入值更改时执行回调。

<template>
  <autosize-input
    v-model="value"
    @change="onChange />
</template>
export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  },
  methods: {
    onChange (e) {
      // 使用e.target.value进行操作
    },
  },
}
相关插件