在移动端应用中，文本输入是一个不可或缺的功能，不论是留言、发布动态还是私信等等，都需要文本输入，而 weex-vue-textarea 这个 npm 包可以帮助我们在 weex 应用中轻松实现带有较多功能的文本框。
安装
可以通过 npm 安装 weex-vue-textarea：
npm install weex-vue-textarea --save
安装完毕后，在我们的项目中引入：
import WeexVueTextarea from 'weex-vue-textarea';
Vue.component('weex-vue-textarea', WeexVueTextarea);用法
下面我们就来看看如何使用 weex-vue-textarea。
基础使用
一般来说，我们需要实现一个简单的文本框功能，我们可以在代码中加入如下的 HTML 部分：
<weex-vue-textarea v-model="text"></weex-vue-textarea>
然后在我们的 Vue 实例中，定义一个变量 text 来保存文本框中的输入数据：
new Vue({
el: '#app',
data: {
text: ''
}
})这时候我们就可以在浏览器中看到一个空白的文本框，及时输入也可以正常显示。
自定义样式
我们可以通过 CSS 来自定义文本框的样式，比如修改背景颜色，边框颜色等等，示例如下：
-- -------------------- ---- ------- ------------------ - ------- ------ ----------- -------- ------- ----- -------------- --- ----- ----- -------- ----- ---------- ----- ------ ----- -
高级用法
weex-vue-textarea 还提供了许多高级用法，比如实时统计文本框中已输入的字符数量：
<weex-vue-textarea v-model="text" placeholder="请输入文本" :max-length="20"></weex-vue-textarea>
<div>已输入{{ text.length }}个字符</div>我们可以通过绑定 text 变量，实时计算文本区域中已输入的文字数量，从而实时显示在我们页面上。
还可以通过指定最大输入数量，控制文本框中最多输入的文字数量。
实例代码
下面是一个完整的 weex-vue-textarea 使用示例，包括基础使用以及高级用法等等。
-- -------------------- ---- -------
----------
-----
---- ---- ---
------------------ -----------------------------------
---- ----- ---
------------------ -------------- ------------------- --------- ---------------- ---------- ------- ------- ------------- ---- ----- ------ -------- ------- --------- ------- ------ ------ -----------------------
---- ---- ---
------------------ -------------- ------------------- -------------------------------------
---------- ----------- -----------
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
-------------------- ---------------
--
------ -
------ -
----- --
-
-
-
---------
------ -------
------------------ -
------- ------
-
--------总结
通过这篇文章，我们学习了如何使用 weex-vue-textarea 这个 npm 包，实现在 weex 应用中的文本输入功能，同时学习了如何自定义样式，以及高级用法，包括实时计算文本数量等等，此外还附带了示例代码，供读者参考。希望本文对 reader 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9e81e8991b448db5a9