diff --git a/src/config.json b/src/config.json
index ec533be505012a95516fe38daada206013377bfe..9c68df4722c50ef64ade9365e094362b6fcc5da6 100644
--- a/src/config.json
+++ b/src/config.json
@@ -487,6 +487,16 @@
"sort": 6,
"show": true,
"author": "Drjingfubo"
+ },
+ {
+ "version": "3.0.0",
+ "name": "TextArea",
+ "type": "component",
+ "cName": "文本域",
+ "desc": "文本输入",
+ "sort": 7,
+ "show": true,
+ "author": "gx"
}
]
},
diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md
index aec18f26d7532860e5dac5991207abc0d453004a..f1c6a332e9b4dcb47bc815654f3b0fa91122d56d 100644
--- a/src/packages/infiniteloading/doc.md
+++ b/src/packages/infiniteloading/doc.md
@@ -178,9 +178,9 @@ setup() {
| container-id | 在 useWindow 属性为 false 的时候,自定义设置节点ID | String | `''` |
| load-more-txt | “没有更多数”据展示文案 | String | `'哎呀,这里是底部了啦'` |
| is-open-refresh | 是否开启下拉刷新 | Boolean | `false` |
-| pull-icon | 下拉刷新[图标名称](#/icon) | String | `https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png` |
+| pull-icon | 下拉刷新[图标名称](#/icon) | String | |
| pull-txt | 下拉刷新提示文案 | String | `松手刷新` |
-| load-icon | 上拉加载[图标名称](#/icon) | Boolean | `https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png` |
+| load-icon | 上拉加载[图标名称](#/icon) | Boolean | |
| load-txt | 上拉加载提示文案 | String | `加载中...` |
### Events
diff --git a/src/packages/input/demo.vue b/src/packages/input/demo.vue
index 383b0e8a747eb7266e648a897bb06ad17cdf6d07..7a1d572cd1a24f1a3dda61ddad896231c7f69a34 100644
--- a/src/packages/input/demo.vue
+++ b/src/packages/input/demo.vue
@@ -57,34 +57,6 @@
placeholder="支持小数点的输入"
label="数字:"
/>
-
文本域
-
-
- 显示字数统计
-
@@ -120,6 +92,7 @@ export default createDemo({
const clear = (num: string | number) => {
console.log('clear:', num);
};
+
return {
state,
change,
diff --git a/src/packages/input/doc.md b/src/packages/input/doc.md
index fcc98c9f883a363edce334a97d0de5338a96ef18..900a91d8f61d78fdcaf76e83c531fb64baf6bcce 100644
--- a/src/packages/input/doc.md
+++ b/src/packages/input/doc.md
@@ -20,8 +20,20 @@ app.use(input);
双向绑定
```html
-
-
+
+
```
### 禁用和只读
@@ -44,19 +56,7 @@ app.use(input);
```
-### 文本域
-
-```html
-
-
-
-```
-### 文本域字数统计
-
-```html
-
-```
| 参数 | 说明 | 类型 | 默认值 |
@@ -64,15 +64,13 @@ app.use(input);
| type | 类型,可选值为 `text` `textarea` `number` 等 | String |`text` |
| value | 输入值,双向绑定 | String | - |
| placeholder | 为空时占位符 | String | - |
-| placeholder-style | placeholder 样式 | String | - |
| label | 左侧文案 | string | - |
+| requireShow |左侧*号是否展示 | boolean | `false` |
| disabled | 是否禁用 | boolean | `false` |
| readonly | 是否只读 | boolean | `false` |
-| clear-btn | 是否带清除按钮(icon) | boolean | `true` |
-| required | 是否带必填的*号,且blur事件做非空校验 | boolean | `false` |
| maxlength | 限制最长输入字符 | string/number | - |
-| rows | textarea时高度 | string/number | 2 |
-| limit-show | textarea时是否展示输入字符。须设置maxlength | boolean | `false` |
+| disableClear | 禁止展示清除icon | boolean | false |
+| textAlign | 文本位置 | string | `left` |
| change | 输入内容时触发 | function | - |
| focus | 聚焦时触发 | function | - |
| blur | 失焦时触发 | function | - |
diff --git a/src/packages/input/index.scss b/src/packages/input/index.scss
index 539b30283c5e8ddbd210473e351c671c48edbbef..45c4f01e9ad0b400d0182c614610efff5f2bb104 100644
--- a/src/packages/input/index.scss
+++ b/src/packages/input/index.scss
@@ -28,29 +28,6 @@
position: absolute;
right: 15px;
}
- .nut-text {
- flex: 1;
- padding: 0 10px;
- .nut-text-limit {
- float: right;
- color: rgba(153, 153, 153, 1);
- }
- .nut-text-core {
- outline: none;
- display: block;
- box-sizing: border-box;
- width: 100%;
- min-width: 0;
- margin: 0;
- padding: 0;
- color: #323233;
- line-height: inherit;
- text-align: left;
- background-color: transparent;
- border: 0;
- resize: none;
- }
- }
}
.nut-input-disabled {
color: #c8c9cc !important;
diff --git a/src/packages/input/index.vue b/src/packages/input/index.vue
index c75364db0d27b970a7d15f34f6e2b372c91b2b86..3dad315976ffd9f4733ce494fd312583e389ff48 100644
--- a/src/packages/input/index.vue
+++ b/src/packages/input/index.vue
@@ -1,32 +1,10 @@
-
+
*
{{ label }}
-
-
-
-
- {{
- state.textNum
- }}
- /{{ maxLength }}
-
-
@@ -54,43 +32,30 @@ import { ref, toRefs, reactive, computed } from 'vue';
import { createComponent } from '@/utils/create';
import { formatNumber } from './util';
-const { create } = createComponent('input');
-
+const { componentName, create } = createComponent('input');
+interface Events {
+ eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:value';
+ params: (string | number | Event)[];
+}
export default create({
props: {
type: {
type: String,
default: 'text'
},
- textAlign: {
- type: String,
- default: 'left'
- },
- limitShow: {
- type: Boolean,
- default: false
- },
- maxLength: {
- type: String,
+ value: {
+ type: [String, Number],
default: ''
},
- requireShow: {
- type: Boolean,
- default: false
- },
- rows: {
+ placeholder: {
type: String,
- default: ''
+ default: '请输入信息'
},
label: {
type: String,
default: ''
},
- placeholder: {
- type: String,
- default: '请输入信息'
- },
- readonly: {
+ requireShow: {
type: Boolean,
default: false
},
@@ -98,12 +63,16 @@ export default create({
type: Boolean,
default: false
},
- autosize: {
+ readonly: {
type: Boolean,
default: false
},
- value: {
- type: [String, Number],
+ textAlign: {
+ type: String,
+ default: 'left'
+ },
+ maxLength: {
+ type: String,
default: ''
},
disableClear: {
@@ -115,25 +84,13 @@ export default create({
emits: ['change', 'update:value', 'blur', 'focus', 'clear', 'error'],
setup(props, { emit }) {
- interface Events {
- eventName:
- | 'change'
- | 'focus'
- | 'blur'
- | 'clear'
- | 'update:value'
- | 'error';
- params: (string | number | Event)[];
- }
-
const {
label,
placeholder,
disabled,
readonly,
requireShow,
- maxLength,
- rows
+ maxLength
} = props;
const { value } = toRefs(props);
const active = ref(false);
@@ -141,14 +98,15 @@ export default create({
curretvalue: value,
textNum: String(value.value).length
});
+ const classes = computed(() => {
+ return {
+ [componentName]: true,
+ 'nut-input-disabled': disabled
+ };
+ });
const styles = computed(() => {
- const rize =
- props.type == 'textarea'
- ? `'resize':${props.autosize ? 'none' : 'horizontal'}`
- : '';
return {
- 'text-align': props.textAlign,
- rize
+ 'text-align': props.textAlign
};
});
const emitChange = (envs: Array) => {
@@ -162,12 +120,6 @@ export default create({
if (maxLength && val.length > Number(maxLength)) {
val = val.slice(0, Number(maxLength));
- emitChange([
- {
- eventName: 'error',
- params: [val]
- }
- ]);
}
if (props.type == 'digit') {
val = formatNumber(val, true);
@@ -176,8 +128,6 @@ export default create({
val = formatNumber(val, false);
}
state.textNum = val.length;
- // input.value = val;
- //state.curretvalue = val;
emitChange([
{
eventName: 'update:value',
@@ -243,7 +193,6 @@ export default create({
placeholder,
label,
disabled,
- rows,
state,
styles,
active,
@@ -252,6 +201,7 @@ export default create({
valueFocus,
valueBlur,
handleClear,
+ classes,
emitChange
};
}
diff --git a/src/packages/picker/Column.vue b/src/packages/picker/Column.vue
index b6df996e68c492aab9c8ddea3f241681a5fb0474..99adabbf5db39e7f1c8bcd8a218097ff608d20da 100644
--- a/src/packages/picker/Column.vue
+++ b/src/packages/picker/Column.vue
@@ -12,17 +12,23 @@
{{ dataType === 'cascade' ? item.text : item }}
+
+
diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md
new file mode 100644
index 0000000000000000000000000000000000000000..fb672911b7d3ec558d5e262f1bdf582f329051bb
--- /dev/null
+++ b/src/packages/textarea/doc.md
@@ -0,0 +1,69 @@
+# Input 输入框组件
+
+### 介绍
+
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { input } from '@nutui/nutui';
+
+const app = createApp();
+app.use(input);
+
+```
+## 代码演示
+
+### 基础用法
+
+
+```html
+
+```
+
+### 显示字数统计
+
+
+```html
+
+```
+
+
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------------|----------------------------------|--------|------------------|
+| value | 输入值,双向绑定 | String | - |
+| placeholder | 为空时占位符 | String | - |
+| label | 左侧文案 | string | - |
+| maxlength | 限制最长输入字符 | string/number | - |
+| rows | textarea时高度 | string/number | 2 |
+| limit-show | textarea时是否展示输入字符。须设置maxlength | boolean | `false` |
+| change | 输入内容时触发 | function | - |
+| focus | 聚焦时触发 | function | - |
+| blur | 失焦时触发 | function | - |
+| clear | 点击清空时触发 | function | - |
+
+
+
+
+
+
+
+
diff --git a/src/packages/textarea/index.scss b/src/packages/textarea/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ffb8955acce5894558d16fecb7932cde45098cda
--- /dev/null
+++ b/src/packages/textarea/index.scss
@@ -0,0 +1,54 @@
+.nut-textarea {
+ position: relative;
+ width: 100%;
+ padding: 10px 0px 10px 25px;
+ display: flex;
+ background: rgba(255, 255, 255, 1);
+ border-bottom: 1px solid rgba(234, 240, 251, 1);
+ font-size: 14px;
+ input {
+ width: 230px;
+ flex: 1;
+ padding: 0 10px;
+ }
+ .nut-input-label {
+ width: 80px;
+ overflow: hidden;
+ display: inline-block;
+ text-align: left;
+ .label-string {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ .nut-textinput-clear {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ right: 15px;
+ }
+ .nut-text {
+ flex: 1;
+ padding: 0 10px;
+ .nut-text-limit {
+ float: right;
+ color: rgba(153, 153, 153, 1);
+ }
+ .nut-text-core {
+ outline: none;
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ color: #323233;
+ line-height: inherit;
+ text-align: left;
+ background-color: transparent;
+ border: 0;
+ resize: none;
+ }
+ }
+}
diff --git a/src/packages/textarea/index.vue b/src/packages/textarea/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b74ba9e0138e6169c49e85c5520768e16feaf89
--- /dev/null
+++ b/src/packages/textarea/index.vue
@@ -0,0 +1,192 @@
+
+
+
+ {{ props.label }}
+
+
+
+
+ {{
+ state.textNum
+ }}
+ /{{ maxLength }}
+
+
+
+
+
+
+