feat:增加textbox文本域组件

src/config.json

@@ -472,6 +472,16 @@
       "sort": "0",
       "showDemo": true,
       "author": "zhuzhida"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TextBox",
+      "chnName": "文本域",
+      "desc": "文本域",
+      "type": "component",
+      "sort": "1",
+      "showDemo": true,
+      "author": "guoxiaoxiao"
     }
   ]
 }

src/nutui.js

@@ -90,7 +90,8 @@ import "./packages/textinput/textinput.scss";
 import Avatar from "./packages/avatar/index.js";
 import "./packages/avatar/avatar.scss";
 import Lazyload from "./packages/lazyload/index.js";
-
+import "./packages/textbox/textbox.scss";
+import TextBox from "./packages/textbox/index.js";
 
 const packages = {
   Cell,
@@ -136,7 +137,9 @@ const packages = {
   InfiniteLoading,
   Uploader,
   TextInput,
-  Avatar
+  TextBox,
+  Avatar,
+  
 };
 
 const components = {};

src/packages/textbox/__test__/textbox.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import Textbox from '../textbox.vue';
+import Vue from 'vue';
+
+
+describe('Textbox.vue', () => {
+    const wrapper = shallowMount(Textbox);
+
+    // it('字数限制', () => {
+    //     wrapper.setData({ maxNum: '500'});
+
+    //     return Vue.nextTick().then(function () {
+    //         expect(wrapper.html()).toBe(true);
+    //     });
+    // });
+
+   
+
+    // it('模拟输入', () => {
+    //     wrapper.setData({ msg: '测试文案', });
+
+    //     return Vue.nextTick().then(function () {
+    //         expect();
+    //     });
+    // });
+
+
+
+});

src/packages/textbox/demo.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <h5>示例</h5>
+        <p>默认用法</p>
+        <nut-textbox > </nut-textbox>
+        <p>自定义高度:100px</p>
+        <nut-textbox :txtAreaH="100" :maxNum="300"></nut-textbox>
+
+        <p>自定义提示语</p>
+        <nut-textbox :placeText="'请填写详细情况请填写详细情况'"></nut-textbox>
+        
+
+        <p>自定义字数限制</p>
+        <nut-textbox :maxNum="100"></nut-textbox>
+        
+
+        <p>限制字数不可超出</p>
+        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef"></nut-textbox>
+        
+
+        <p>字数超出报错</p>
+        <nut-textbox :maxNum="10" :txtAreaH="100"  @errorFunc="overLength" ></nut-textbox>
+        
+
+        <p>自定义文本框背景色</p>
+        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef"></nut-textbox>
+
+        <p>不显示字数限制</p>
+        <nut-textbox :limitShow="false" :maxNum="10" ></nut-textbox>
+       
+        <h6>输入回调返回文字</h6>
+        <nut-textbox  :maxNum="10" txtAreaH="100" @inputFunc="inputText" ></nut-textbox>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+           
+        }
+    },
+    methods:{
+        overLength(){
+            alert("字数超出");
+        },
+        inputText(val){
+           alert(val);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/packages/textbox/doc.md

@@ -0,0 +1,93 @@
+# TextBox 文本域输入
+
+多行文本输入框，支持字数提示、字数限制等功能。
+
+## 基本用法
+```html
+ <nut-textbox><nut-textbox/>
+```
+## 自定义高度
+```html
+ <nut-textbox 
+    :txtAreaH="5" 
+    :maxNum="300">
+</nut-textbox>
+```
+## 自定义提示语
+```html
+<nut-textbox 
+    :placeText="'请填写详细情况请填写详细情况'">
+</nut-textbox>
+```
+## 自定义字数限制
+```html
+<nut-textbox 
+    :maxNum="100">
+</nut-textbox>
+```
+## 限制字数不可超出
+```html
+ <nut-textbox 
+    :switchMax="true" 
+    :maxNum="10" 
+    :txtAreaH="2" 
+    textBgColor="#efefef">
+</nut-textbox>
+```
+## 字数超出报错
+```html
+ <nut-textbox 
+    :maxNum="10" 
+    :txtAreaH="2" 
+     @errorFunc="overLength" >
+</nut-textbox>
+```
+## 自定义文本框背景色
+```html
+ <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#feefef"></nut-textbox>
+```
+
+## 不显示字数限制
+```html
+<nut-textbox :limitShow="false" :maxNum="10" ></nut-textbox>
+```
+
+## 输入回调返回文字
+```html
+ <nut-textbox  :maxNum="10" txtAreaH="2" @inputFunc="inputText" ></nut-textbox>
+```
+```javascript
+export default {
+  data() {
+    return {
+      val: ""
+    };
+  },
+  methods: {
+    onFocus() {
+      console.log("focus事件触发！");
+    },
+    onBlur() {
+      console.log("blur事件触发！");
+    }
+  }
+};
+```
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| txtAreaH | 文本框高度 | Number | 1rem
+| placeText | 自定义placeholder文案提示 | String | 请您在此输
+| maxNum | 最大字数 | Number | 50
+| switchMax | 控制字数超出是否不可输入，注意：最大字数限制，请设置maxNum | Boolean | false
+| textBgColor | 设置输入框背景色 | String | #fff
+| limitShow | 不显示字数限制 | Boolean | true
+
+## Event
+
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| errorFunc | 输入字数超过限定字数时触发事件 | -- 
+| inputText | 文字输入事件回调，默认传回输入文本 | --

src/packages/textbox/index.js

@@ -0,0 +1,10 @@
+import TextBox from './textbox.vue';
+import './textbox.scss';
+
+
+console.log(TextBox.name)
+TextBox.install = function(Vue) {
+    Vue.component(TextBox.name, TextBox);
+};
+
+export default TextBox

src/packages/textbox/textbox.scss

@@ -0,0 +1,34 @@
+.nut-textbox{
+	background:#fff;
+    .txt-area{
+        border: 1px solid #ececee;
+	    padding: 5px 20px 5px 10px;;
+	    position: relative;
+        &.num-none{
+            padding:10px 20px;
+        }
+        textarea{
+            resize: none;
+		    width: 100%;
+		    border: none;
+		    outline: none;
+		    margin: 0;
+		    padding: 0;
+		    background: transparent;
+            display:block;
+        }
+        span{
+            color: #666;
+		    position: absolute;
+		    right: 10px;
+		    bottom: 5px;
+		    font-size:12px;
+        }
+        &.error{
+        	border:1px solid #e2231a;
+        	span{
+        		color:#e2231a;
+        	}
+        }
+    }
+}

src/packages/textbox/textbox.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="nut-textbox">
+        <div class="txt-area" :class="{'error':errorState,'num-none':limitShow == false}" :style="{background:textBgColor}">
+            <textarea :placeholder="placeText" :style="{height:txtAreaHeight+'px'}" v-model="textInfo" @input="txtIptLength" :switchMax="switchMax" :maxlength="iptMaxlength"></textarea>
+            <span v-show="limitShow">{{txtNum}}/{{maxNum}}</span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-textbox',
+    props: {
+    	maxNum:{
+    		type:[String,Number],
+    		default:50,
+    	},
+    	placeText:{
+    		type:String,
+    		default:'请您在此输入',
+    	},
+    	txtAreaH:{
+    		type:[String,Number],
+    		default:"50",
+    	},
+    	switchMax:{
+    		type:Boolean,
+    		default:false,
+    	},
+        textBgColor:{
+            type:String,
+            default:'#fff'
+        },
+        limitShow:{
+            type:Boolean,
+            default:true,
+        }
+       
+    },
+    data() {
+        return {
+        	textInfo:'',
+            errorState:false,
+            txtNum:0,
+        };
+    },
+    computed:{
+        txtAreaHeight:function(){
+           let txtAreaH;
+           txtAreaH = this.txtAreaH;
+                
+           return txtAreaH;
+        },
+        iptMaxlength(){
+        	let maxlength;
+        	if (this.switchMax) {
+        		maxlength = this.maxNum
+        	}
+        	return maxlength
+        },
+    },
+    methods: {
+        txtIptLength(){
+            let txtVal = this.textInfo.length;
+            this.txtNum = txtVal;  
+            if(txtVal > this.maxNum) {
+                this.errorState = true;
+                this.$emit('errorFunc'); 
+           	}else{
+                this.errorState = false;
+           	}
+            this.$emit('inputFunc',this.textInfo);
+        }
+    }
+}
+</script>