feat: disable props

src/packages/textbox/demo.vue

@@ -3,6 +3,8 @@
     <!-- <h4>示例</h4> -->
     <h4>默认用法 支持异步回显数据</h4>
     <nut-textbox v-model="val"></nut-textbox>
+    <h4>禁用</h4>
+    <nut-textbox disabled v-model="val"></nut-textbox>
     <h4>自定义高度:100px</h4>
     <nut-textbox :txtAreaH="100" :maxNum="300" v-model="val"></nut-textbox>
 

src/packages/textbox/doc.md

@@ -7,6 +7,11 @@
 ```html
 <nut-textbox v-model="val"></nut-textbox>
 ```
+## 禁用
+
+```html
+<nut-textbox disabled v-model="val"></nut-textbox>
+```
 
 ## 自定义高度
 
@@ -82,7 +87,7 @@ export default {
 ## Prop
 
 | 字段        | 说明                                                        | 类型    | 默认值     |
-| ----------- | ----------------------------------------------------------- | ------- | ---------- |
+|-------------|-------------------------------------------------------------|---------|------------|
 | value       | 当前 input 值，可使用 v-model 双向绑定数据                  | String  | ''         |
 | txtAreaH    | 文本框高度                                                  | Number  | 1rem       |
 | placeText   | 自定义 placeholder 文案提示                                 | String  | 请您在此输 |
@@ -90,10 +95,11 @@ export default {
 | switchMax   | 控制字数超出是否不可输入，注意：最大字数限制，请设置 maxNum | Boolean | false      |
 | textBgColor | 设置输入框背景色                                            | String  | #fff       |
 | limitShow   | 不显示字数限制                                              | Boolean | true       |
+| disabled    | 是否禁用                                                    | Boolean | false      |
 
 ## Event
 
 | 字段      | 说明                               | 回调参数 |
-| --------- | ---------------------------------- | -------- |
+|-----------|------------------------------------|----------|
 | errorFunc | 输入字数超过限定字数时触发事件     | --       |
 | inputFunc | 文字输入事件回调，默认传回输入文本 | --       |

src/packages/textbox/textbox.scss

@@ -29,6 +29,11 @@
         	span{
         		color:#e2231a;
         	}
-        }
+		}
+		&.disabled  {
+			background-color: #f5f7fa !important;
+			border-color: #e5e7ed;
+			color: #999;
+		}
     }
 }

src/packages/textbox/textbox.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="nut-textbox">
-    <div class="txt-area" :class="{ error: errorState, 'num-none': limitShow == false }" :style="{ background: textBgColor }">
+    <div class="txt-area" :class="{ error: errorState, 'num-none': limitShow == false, disabled: disabled }" :style="{ background: textBgColor }">
       <textarea
         :placeholder="placeText"
         :style="{ height: txtAreaHeight + 'px' }"
         v-model="currentValue"
+        :disabled="disabled"
         @input="txtIptLength"
         :switchMax="switchMax"
         :maxlength="iptMaxlength"
@@ -21,6 +22,10 @@ export default {
       type: String,
       default: ''
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     maxNum: {
       type: [String, Number],
       default: 50