feat: 添加dialog组件

src/config.json

@@ -280,16 +280,6 @@
         },
         {
             "version": "1.0.0",
-            "name": "TextBox",
-            "chnName": "文本域",
-            "desc": "文本域",
-            "type": "component",
-            "sort": "1",
-            "showDemo": true,
-            "author": "guoxiaoxiao"
-        },
-        {
-            "version": "1.0.0",
             "name": "Popup",
             "chnName": "弹出层",
             "desc": "弹出层",
@@ -409,24 +399,24 @@
             "author": "guoxiaoxiao"
         },
         {
-          "version": "1.0.0",
-          "name": "Steps",
-          "chnName": "步骤条",
-          "desc": "步骤条",
-          "type": "component",
-          "sort": "0",
-          "showDemo": true,
-          "author": "undo"
-        },
-        {
-          "version": "1.0.0",
-          "name": "Card",
-          "chnName": "卡片",
-          "desc": "卡片组件",
-          "type": "component",
-          "sort": "0",
-          "showDemo": true,
-          "author": "xuhui"
+            "version": "1.0.0",
+            "name": "Steps",
+            "chnName": "步骤条",
+            "desc": "步骤条",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "undo"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Card",
+            "chnName": "卡片",
+            "desc": "卡片组件",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "xuhui"
         }
     ]
 }

src/nutui.js

@@ -59,7 +59,6 @@ import TextInput from './packages/textinput/index.js';
 import './packages/textinput/textinput.scss';
 import Avatar from './packages/avatar/index.js';
 import './packages/avatar/avatar.scss';
-import TextBox from './packages/textbox/index.js';
 import Popup from './packages/popup/index.js';
 import LeftSlip from './packages/leftslip/index.js';
 import './packages/leftslip/leftslip.scss';
@@ -88,50 +87,49 @@ import Card from "./packages/card/index.js";
 import "./packages/card/card.scss";
 
 const packages = {
-  Cell,
-  Dialog,
-  Icon,
-  Toast,
-  ActionSheet,
-  Tab,
-  TabPanel,
-  TabBar,
-  Calendar,
-  DatePicker,
-  NavBar,
-  NoticeBar,
-  Switch,
-  Range,
-  Picker,
-  Col,
-  Row,
-  Steps,
-  Button,
-  Rate,
-  Stepper,
-  SearchBar,
-  ImagePicker,
-  Radio,
-  RadioGroup,
-  CheckBox,
-  Skeleton,
-  Uploader,
-  TextInput,
-  TextBox,
-  Avatar,
-  Popup,
-  LeftSlip,
-  TabSelect: TabSelect,
-  SideNavBar: SideNavBar,
-  SubSideNavBar: SubSideNavBar,
-  SideNavBarItem: SideNavBarItem,
-  Address: Address,
-  Tag,
-  Swiper,
-  ImagePreview,
-  Badge,
-  Field: Field,
-  Card
+    Cell,
+    Dialog,
+    Icon,
+    Toast,
+    ActionSheet,
+    Tab,
+    TabPanel,
+    TabBar,
+    Calendar,
+    DatePicker,
+    NavBar,
+    NoticeBar,
+    Switch,
+    Range,
+    Picker,
+    Col,
+    Row,
+    Steps,
+    Button,
+    Rate,
+    Stepper,
+    SearchBar,
+    ImagePicker,
+    Radio,
+    RadioGroup,
+    CheckBox,
+    Skeleton,
+    Uploader,
+    TextInput,
+    Avatar,
+    Popup,
+    LeftSlip,
+    TabSelect: TabSelect,
+    SideNavBar: SideNavBar,
+    SubSideNavBar: SubSideNavBar,
+    SideNavBarItem: SideNavBarItem,
+    Address: Address,
+    Tag,
+    Swiper,
+    ImagePreview,
+    Badge,
+    Field: Field,
+    Card
 };
 
 const components = {};
@@ -139,73 +137,73 @@ const methods = {};
 const filters = {};
 const directives = {};
 pkgList.map(item => {
-  const pkg = packages[item.name];
-  if (!pkg) return;
+    const pkg = packages[item.name];
+    if (!pkg) return;
 
-  if (item.type == 'component') {
-    if (pkg.name) {
-      components[pkg.name] = pkg;
-    } else {
-      for (let n in pkg) {
-        components[n] = pkg[n];
-      }
+    if (item.type == 'component') {
+        if (pkg.name) {
+            components[pkg.name] = pkg;
+        } else {
+            for (let n in pkg) {
+                components[n] = pkg[n];
+            }
+        }
+    } else if (item.type == 'method') {
+        methods[item.name] = pkg;
+    } else if (item.type == 'filter') {
+        filters[item.name] = pkg;
+    } else if (item.type == 'directive') {
+        directives[item.name] = pkg;
     }
-  } else if (item.type == 'method') {
-    methods[item.name] = pkg;
-  } else if (item.type == 'filter') {
-    filters[item.name] = pkg;
-  } else if (item.type == 'directive') {
-    directives[item.name] = pkg;
-  }
 });
 
-const install = function (Vue, opts = {}) {
-  if (install.installed) return;
+const install = function(Vue, opts = {}) {
+    if (install.installed) return;
 
-  if (opts.locale) {
-    Vue.config.lang = opts.locale;
-  }
+    if (opts.locale) {
+        Vue.config.lang = opts.locale;
+    }
 
-  if (opts.lang) locale(Vue.config.lang, opts.lang);
+    if (opts.lang) locale(Vue.config.lang, opts.lang);
 
-  for (let cptName in methods) {
-    if (Array.isArray(methods[cptName])) {
-      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
-      Vue.component(methods[cptName][1].name, methods[cptName][1]);
-    } else {
-      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+    for (let cptName in methods) {
+        if (Array.isArray(methods[cptName])) {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+            Vue.component(methods[cptName][1].name, methods[cptName][1]);
+        } else {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+        }
     }
-  }
 
-  for (let cptName in components) {
-    if (components[cptName] && components[cptName].name) {
-      Vue.component(components[cptName].name, components[cptName]);
+    for (let cptName in components) {
+        if (components[cptName] && components[cptName].name) {
+            Vue.component(components[cptName].name, components[cptName]);
+        }
     }
-  }
 
-  for (let cptName in filters) {
-    if (filters[cptName] && filters[cptName].name) {
-      Vue.filter(cptName, filters[cptName]);
+    for (let cptName in filters) {
+        if (filters[cptName] && filters[cptName].name) {
+            Vue.filter(cptName, filters[cptName]);
+        }
     }
-  }
 
-  for (let cptName in directives) {
-    if (directives[cptName] && directives[cptName].name) {
-      Vue.directive(directives[cptName].name, directives[cptName]);
+    for (let cptName in directives) {
+        if (directives[cptName] && directives[cptName].name) {
+            Vue.directive(directives[cptName].name, directives[cptName]);
+        }
     }
-  }
 };
 
 if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
+    install(window.Vue);
 }
 
 export default {
-  version,
-  locale,
-  install,
-  ...components,
-  ...filters,
-  ...directives,
-  ...methods
+    version,
+    locale,
+    install,
+    ...components,
+    ...filters,
+    ...directives,
+    ...methods
 };

src/packages/dialog/dialog.scss

@@ -1,200 +1,178 @@
 @import '../../styles/animation/fade';
 @import '../../styles/animation/ease';
-
 body.dialog-open {
-	position: fixed;
+    position: fixed;
 }
 
 .nut-dialog-wrapper {
-	position: relative;
-	z-index: $zindex-mask;
-}
-
-.nut-dialog-box {
-	position: fixed;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: $normal-color;
+    position: relative;
+    z-index: $zindex-mask;
 }
 
-.nut-dialog-mask,
 .nut-dialog-box {
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
+    width: 85vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $normal-color;
 }
 
 .nut-dialog-mask {
-	position: fixed;
-	background: $mask-bg;
+    position: fixed;
+    background: $mask-bg;
 }
 
 .nut-dialog {
-	position: relative;
-	width: 86%;
-	max-height: 70vh;
-	background: #fff;
-	border-radius: $border-radius-base;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
+    position: relative;
+    width: 85vw;
+    max-height: 70vh;
+    background: #fff;
+    border-radius: $border-radius-base;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .nut-dialog-title {
-	display: block;
-	line-height: 1.5;
-	color: $title-color;
-	font-size: $font-size-large;
-	text-align: center;
-	flex-shrink: 0;
-
-	@include text-ellipsis;
-
-	padding-bottom: 8px; // &:only-child {
-	//     padding-bottom: 0;
-	// }
+    display: block;
+    line-height: 1.5;
+    color: $title-color;
+    font-size: $font-size-large;
+    text-align: center;
+    flex-shrink: 0;
+    @include text-ellipsis;
+    padding-bottom: 8px; // &:only-child {
+    //     padding-bottom: 0;
+    // }
 }
 
 .nut-dialog-close {
-	position: absolute;
-	right: 0;
-	top: 0;
-	width: 30px;
-	height: 30px;
-	font-size: 20px;
-	text-align: center;
-	text-decoration: none;
-	background:
-		url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(132,132,132)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E")
-		no-repeat center;
-	background-size: 13px 13px;
-
-	img {
-		height: 13px;
-	}
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    text-align: center;
+    text-decoration: none;
+    background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(132,132,132)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+    background-size: 13px 13px;
+    img {
+        height: 13px;
+    }
 }
 
 .nut-dialog-image-wrapper {
-	.nut-dialog {
-		width: auto;
-		max-width: 80%;
-		max-height: 75%;
-		background: transparent;
-		border-radius: none;
-		display: inline-block;
-		overflow: visible;
-	}
-
-	.nut-dialog-close {
-		position: absolute;
-		right: 0;
-		top: -40px;
-		width: 25px;
-		height: 25px;
-		font-size: 20px;
-		text-align: center;
-		text-decoration: none;
-		border: 2px solid #fff;
-		border-radius: 50%;
-		background:
-			url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(255,255,255)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E")
-			no-repeat center;
-		background-size: 13px 13px;
-
-		img {
-			height: 13px;
-		}
-	}
+    .nut-dialog {
+        width: auto;
+        max-width: 80%;
+        max-height: 75%;
+        background: transparent;
+        border-radius: none;
+        display: inline-block;
+        overflow: visible;
+    }
+    .nut-dialog-close {
+        position: absolute;
+        right: 0;
+        top: -40px;
+        width: 25px;
+        height: 25px;
+        font-size: 20px;
+        text-align: center;
+        text-decoration: none;
+        border: 2px solid #fff;
+        border-radius: 50%;
+        background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(255,255,255)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+        background-size: 13px 13px;
+        img {
+            height: 13px;
+        }
+    }
 }
 
 .nut-dialog-link {
-	display: inline-block;
+    display: inline-block;
 }
 
 .nut-dialog-image {
-	max-width: 100%;
-	max-height: 100%;
-	vertical-align: bottom;
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: bottom;
 }
 
 .nut-dialog-body {
-	box-sizing: border-box;
-	padding: 30px 20px 20px;
-	display: flex;
-	flex-direction: column;
-	flex: 0 1 auto;
+    box-sizing: border-box;
+    padding: 30px 20px 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
 }
 
 .nut-dialog-content {
-	flex: 1;
-	justify-content: center;
-	overflow: auto;
-	font-size: $font-size-base;
-	word-break: break-all;
-	padding-bottom: 10px;
-	-webkit-overflow-scrolling: touch;
+    flex: 1;
+    justify-content: center;
+    overflow: auto;
+    font-size: $font-size-base;
+    word-break: break-all;
+    padding-bottom: 10px;
+    -webkit-overflow-scrolling: touch;
 }
 
 .nut-dialog-footer {
-	height: 50px;
-	width: 100%;
-	line-height: 50px;
-	display: flex;
-	flex-shrink: 0;
-	border-radius: 0 0 5px 5px;
-	overflow: hidden;
-	flex-direction: row;
+    height: 50px;
+    width: 100%;
+    line-height: 50px;
+    display: flex;
+    flex-shrink: 0;
+    border-radius: 0 0 5px 5px;
+    overflow: hidden;
+    flex-direction: row;
 }
 
 .nut-dialog-btn {
-	display: block;
-	width: 100%;
-	height: 100%;
-	position: relative;
-	flex: 1;
-	font-size: $font-size-base;
-	border: none;
-	background: transparent;
-	appearance: none;
-	outline: none;
-	user-select: none;
-
-	&.disabled {
-		background: $btn-disable-bg;
-		background-origin: border-box;
-		color: $btn-disable-color;
-	}
-
-	&:only-child {
-		border-radius: 0 0 5px 5px;
-		background: transparent;
-		color: $primary-color;
-		border-top: 1px solid $light-color;
-	}
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    flex: 1;
+    font-size: $font-size-base;
+    border: none;
+    background: transparent;
+    appearance: none;
+    outline: none;
+    user-select: none;
+    &.disabled {
+        background: $btn-disable-bg;
+        background-origin: border-box;
+        color: $btn-disable-color;
+    }
+    &:only-child {
+        border-radius: 0 0 5px 5px;
+        background: transparent;
+        color: $primary-color;
+        border-top: 1px solid $light-color;
+    }
 }
 
 .nut-dialog-ok {
-	border-radius: 0 0 5px 0;
-	background: $btn-gradient-bg;
-	background-origin: border-box;
-	color: $btn-gradient-color;
-	margin-right: -1px;
-
-	&:active {
-		background: $btn-gradient-active-bg;
-	}
+    border-radius: 0 0 5px 0;
+    background: $btn-gradient-bg;
+    background-origin: border-box;
+    color: $btn-gradient-color;
+    margin-right: -1px;
+    &:active {
+        background: $btn-gradient-active-bg;
+    }
 }
 
 .nut-dialog-cancel {
-	border-radius: 0 0 0 5px;
-	border-top: 1px solid $light-color;
-	background: #fff;
-	background-origin: border-box;
-
-	&:active {
-		border-top: 1px solid #ccc;
-		background: #ccc;
-	}
-}
+    border-radius: 0 0 0 5px;
+    border-top: 1px solid $light-color;
+    background: #fff;
+    background-origin: border-box;
+    &:active {
+        border-top: 1px solid #ccc;
+        background: #ccc;
+    }
+}

src/packages/dialog/dialog.vue

@@ -1,9 +1,13 @@
 <template>
-  <div v-if="destroy" :class="['nut-dialog-wrapper', customClass, { 'nut-dialog-image-wrapper': type === 'image' }]" :id="id">
-    <transition :name="animation ? 'nutFade' : ''">
-      <div :class="'nut-dialog-mask'" :style="{ background: maskBgStyle }" @click="modalClick" v-show="curVisible"></div>
-    </transition>
-    <transition :name="animation ? 'nutEase' : ''">
+   <transition name="toastfade">
+    <nut-popup
+      :overlay='cover'
+      :class="customClass"
+      v-model="curVisible"
+      :overlayStyle='{backgroundColor:maskBgStyle}'
+      class="nut-dialog"
+      @click="clickCover"
+    >
       <div class="nut-dialog-box" v-show="curVisible" @click="modalClick">
         <div class="nut-dialog" @click.stop>
           <a href="javascript:;" v-if="closeBtn" @click="closeBtnClick" class="nut-dialog-close"></a>
@@ -36,33 +40,19 @@
           </template>
         </div>
       </div>
-    </transition>
-  </div>
+    </nut-popup>
+  </transition>
 </template>
 <script>
 import locale from '../../mixins/locale';
-
-const lockMaskScroll = (bodyCls => {
-  let scrollTop;
-  return {
-    afterOpen: function() {
-      scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;
-      document.body.classList.add(bodyCls);
-      document.body.style.top = -scrollTop + 'px';
-    },
-    beforeClose: function() {
-      if (document.body.classList.contains(bodyCls)) {
-        document.body.classList.remove(bodyCls);
-        document.scrollingElement.scrollTop = scrollTop;
-      }
-    }
-  };
-})('dialog-open');
-
 export default {
   name: 'nut-dialog',
   mixins: [locale],
   props: {
+    cover:{
+        type:Boolean,
+        default:true
+    },
     id: {
       type: String,
       default: ''
@@ -182,6 +172,11 @@ export default {
     this.destroy = true;
   },
   methods: {
+    clickCover() {
+      if (this.closeOnClickOverlay) {
+        this.hide();
+      }
+    },
     modalClick() {
       if (!this.closeOnClickModal) {
         return;

src/packages/dialog/doc.md

@@ -112,7 +112,6 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | id | 标识符，相同者共享一个实例 | String/Number | nut-dialog-default-id
-| canDestroy | 是否关闭弹窗时销毁实例 | Boolean | true
 | title | 标题 | String | -
 | content | 内容，支持HTML | String | -
 | type | 弹窗类型，值为**image**时为图片弹窗 | String | -

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

@@ -1,29 +0,0 @@
-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

@@ -1,55 +0,0 @@
-<template>
-  <div class="textbox-demo">
-    <!-- <h4>示例</h4> -->
-    <h4>默认用法 支持异步回显数据</h4>
-    <nut-textbox v-model="val"></nut-textbox>
-    <h4>自定义高度:100px</h4>
-    <nut-textbox :txtAreaH="100" :maxNum="300" :value="val"></nut-textbox>
-
-    <h4>自定义提示语</h4>
-    <nut-textbox :placeText="'请填写详细情况请填写详细情况'"></nut-textbox>
-
-    <h4>自定义字数限制</h4>
-    <nut-textbox :maxNum="100"></nut-textbox>
-
-    <h4>限制字数不可超出</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef"></nut-textbox>
-
-    <h4>字数超出报错</h4>
-    <nut-textbox :maxNum="10" :txtAreaH="100" @errorFunc="overLength"></nut-textbox>
-
-    <h4>自定义文本框背景色</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef"></nut-textbox>
-
-    <h4>不显示字数限制</h4>
-    <nut-textbox :limitShow="false" :maxNum="10"></nut-textbox>
-
-    <h4>输入回调返回文字</h4>
-    <nut-textbox :maxNum="10" txtAreaH="100" @inputFunc="inputText"></nut-textbox>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      val: ''
-    };
-  },
-  methods: {
-    overLength() {
-      alert('字数超出');
-    },
-    inputText(val) {
-      alert(val);
-    }
-  },
-  mounted() {
-    var that = this;
-    this.val = '初始测试数据';
-    setTimeout(function() {
-      that.val = '异步测试数据123';
-    }, 1000);
-  }
-};
-</script>

src/packages/textbox/doc.md

@@ -1,97 +0,0 @@
-# TextBox 文本域输入
-
-多行文本输入框，支持字数提示、字数限制等功能。
-
-## 基本用法
-
-```html
-<nut-textbox v-model="val"></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: {
-    inputText(val) {
-      alert(val)
-    }
-  }
-}
-```
-
-## Prop
-
-| 字段        | 说明                                                        | 类型    | 默认值     |
-| ----------- | ----------------------------------------------------------- | ------- | ---------- |
-| value       | 当前 input 值，可使用 v-model 双向绑定数据                  | String  | ''         |
-| txtAreaH    | 文本框高度                                                  | Number  | 1rem       |
-| placeText   | 自定义 placeholder 文案提示                                 | String  | 请您在此输 |
-| maxNum      | 最大字数                                                    | Number  | 50         |
-| switchMax   | 控制字数超出是否不可输入，注意：最大字数限制，请设置 maxNum | Boolean | false      |
-| textBgColor | 设置输入框背景色                                            | String  | #fff       |
-| limitShow   | 不显示字数限制                                              | Boolean | true       |
-
-## Event
-
-| 字段      | 说明                               | 回调参数 |
-| --------- | ---------------------------------- | -------- |
-| errorFunc | 输入字数超过限定字数时触发事件     | --       |
-| inputFunc | 文字输入事件回调，默认传回输入文本 | --       |

src/packages/textbox/index.js

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

src/packages/textbox/textbox.scss

@@ -1,40 +0,0 @@
-.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

@@ -1,87 +0,0 @@
-<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="value"
-        @input="txtIptLength"
-        :switchMax="switchMax"
-        :maxlength="iptMaxlength"
-      ></textarea>
-      <span v-show="limitShow">{{ txtNum }}/{{ maxNum }}</span>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'nut-textbox',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    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 {
-      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(event) {
-      const data = event.target.value;
-      console.log(data);
-      const txtLength = data.length;
-      this.txtNum = txtLength;
-      if (txtLength > this.maxNum) {
-        this.errorState = true;
-        this.$emit('errorFunc');
-      } else {
-        this.errorState = false;
-      }
-      this.$emit('inputFunc', data);
-      this.$emit('input', data);
-    }
-  }
-};
-</script>

types/nutui.d.ts

@@ -60,7 +60,6 @@ export declare class Scroller extends UIComponent {}
 export declare class CountDown extends UIComponent {}
 export declare class Uploader extends UIComponent {}
 export declare class TextInput extends UIComponent {}
-export declare class TextBox extends UIComponent {}
 export declare class Avatar extends UIComponent {}
 export declare class Infiniteloading extends UIComponent {}
 export declare class Lazyload extends UIComponent {}