Merge branch 'v3-dev' of https://github.com/jdf2e/nutui into v3-dev

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/demo.vue

@@ -38,6 +38,15 @@
         </span>
       </nut-cell>
     </div>
+    <h4>多行按钮</h4>
+
+    <div>
+       <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog10">
+        <span slot="title">
+          <label>多行按钮</label>
+        </span>
+      </nut-cell>
+    </div>
     <h4>图片弹窗</h4>
     <p
       >type值为“image”时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发onClickImageLink事件，返回false可阻止默认的跳转链接行为。</p
@@ -102,22 +111,32 @@ export default {
   methods: {
     showDialog1: function() {
       const options = {
-        title: '确定删除此订单？',
-        content: '删除后将从你的记录里消失，无法找回'
+        title: '标题',
+        content: '我想用艺术感动人们的内心。我希望他们这样说到：他的感受深刻而温柔。',
+        noCloseBtn: false,
+        noOkBtn: true,
+        cancelBtnTxt:"确认",
+        textAlign:"left",
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        }
       };
 
       this.$dialog(options);
     },
     showDialog2: function() {
       const options = {
-        title: '确定要加入购物车吗？'
+        title: '确定要加入购物车吗？',
+         onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       };
 
       this.$dialog(options);
     },
     showDialog3: function() {
       const options = {
-        content: '点击返回将中断注册，确定返回？<br>删除后您可以在回收站还原。',
+        content: '我想用艺术感动人们的内心。我希望他们这样说到：他的感受深刻而温柔。',
         noCloseBtn: false,
         noOkBtn: true,
         cancelBtnTxt: '我知道了'
@@ -166,14 +185,20 @@ export default {
         animation: false, //禁用弹出动效
         title: '注册说明',
         canDestroy: false,
-        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。'
+        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。',
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       });
     },
     showDialog7: function() {
       this.$dialog({
         maskBgStyle: 'rgba(0,0,0,0)', //设置遮罩层背景透明
         title: '注册说明',
-        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。'
+        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。',
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       });
     },
     showDialog8: function() {
@@ -195,6 +220,32 @@ export default {
         cancelBtnTxt: '我知道了'
       });
     },
+    showDialog10: function() {
+      this.$dialog({
+        content: '我认为，大多数设计师只是试图从他们已经做过的事情中努力，在讲故事方面并没有什么特别之处，而我的回归，将伴随着一个伟大的演讲',
+        multiButton:true,
+        textAlign:"left",
+        multiButtonText:[{
+          name: '主要操作1(禁止)',
+          value: 0,
+          disabled:true
+        },
+        {
+          name: '主要操作2',
+          value: 1,
+          disabled:false,
+        },{
+          name: '主要操作3',
+          value:2,
+          disabled:false,
+        }],
+        chooseBtn(item,index){
+          console.log(index)
+          alert(`我点击了第${index + 1}个按钮`)
+          this.close()
+        },    
+      });
+    },
     showImageDialog: function() {
       this.$dialog({
         type: 'image',

src/packages/dialog/dialog.scss

@@ -1,200 +1,219 @@
 @import '../../styles/animation/fade';
 @import '../../styles/animation/ease';
-
 body.dialog-open {
-	position: fixed;
+    position: fixed;
 }
 
 .nut-dialog-wrapper {
-	position: relative;
-	z-index: $zindex-mask;
+    position: relative;
+    z-index: $zindex-mask;
 }
 
 .nut-dialog-box {
-	position: fixed;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: $normal-color;
-}
-
-.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;
+    border-bottom: 1px solid rgba(230, 230, 230, 1);
 }
 
 .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;
+    line-height: 21px;
+    font-family: PingFang-SC-Medium;
+    font-size: 14px;
+    color: rgba(100, 100, 100, 1);
+    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;
+    min-height: 50px;
+    width: 100%;
+    line-height: 50px;
+    display: flex;
+    flex-shrink: 0;
+    border-radius: 0 0 5px 5px;
+    overflow: hidden;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.nut-dialog-multi-button {
+    width: 100vw;
+    height: 50px;
+    box-sizing: border-box;
+    line-height: 50px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(245, 22, 22, 1);
+    text-align: center;
+    border-bottom: 1px solid rgba(230, 230, 230, 1);
+}
+
+.nut-dialog-multi-disabled {
+    color: rgba(150, 150, 150, 1);
+}
+
+.nut-dialog-multi-cancel {
+    width: 100vw;
+    height: 50px;
+    box-sizing: border-box;
+    line-height: 50px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(150, 150, 150, 1);
+    text-align: center;
 }
 
 .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%;
+    position: relative;
+    flex: 1;
+    font-size: $font-size-base;
+    border: none;
+    background: transparent;
+    appearance: none;
+    outline: none;
+    user-select: none;
+    font-size: 16px;
+    font-weight: 00;
+    5 &.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;
+        line-height: 23px;
+        font-family: PingFangSC-Regular;
+        font-size: 16px;
+    }
 }
 
 .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: #fff;
+    background-origin: border-box;
+    color: $btn-gradient-color;
+    font-family: PingFangSC-Regular;
+    border-left: 1px solid rgba(230, 230, 230, 1);
+    color: rgba(245, 22, 22, 1);
+    &: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;
+    color: rgba(150, 150, 150, 1);
+    background-origin: border-box;
+    &:active {
+        border-top: 1px solid #ccc;
+        background: #ccc;
+    }
+}

src/packages/dialog/dialog.vue

@@ -1,9 +1,14 @@
 <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"
+      :lock-scroll="lockBgScroll"
+      :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>
@@ -21,51 +26,47 @@
               <div class="nut-dialog-content" v-html="content" v-else-if="content" :style="{ textAlign }"></div>
             </div>
             <div class="nut-dialog-footer" v-if="!noFooter">
-              <button class="nut-dialog-btn nut-dialog-cancel" v-if="!noCancelBtn" @click="cancelBtnClick(cancelAutoClose)">{{
-                cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')
-              }}</button>
-              <button
-                class="nut-dialog-btn nut-dialog-ok"
-                v-if="!noOkBtn"
-                :class="{ disabled: okBtnDisabled }"
-                :disabled="okBtnDisabled"
-                @click="okBtnClick"
-                >{{ okBtnTxt || nutTranslate('lang.okBtnTxt') }}</button
-              >
+              <template v-if="!multiButton">
+                <button class="nut-dialog-btn nut-dialog-cancel" v-if="!noCancelBtn" @click="cancelBtnClick(cancelAutoClose)">{{
+                  cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')
+                }}</button>
+                <button
+                  class="nut-dialog-btn nut-dialog-ok"
+                  v-if="!noOkBtn"
+                  :class="{ disabled: okBtnDisabled }"
+                  :disabled="okBtnDisabled"
+                  @click="okBtnClick"
+                  >{{ okBtnTxt || nutTranslate('lang.okBtnTxt') }}</button
+                >
+              </template>
+              <template v-else>
+                  <div v-for="(item , index ) in multiButtonText" 
+                    class="nut-dialog-multi-button"
+                    :key="index"
+                     :class="{ 'nut-dialog-multi-disabled': item.disabled }"
+                    @click="chooseItem(item, index)">
+                    {{item.name}}
+                  </div>
+                  <div class="nut-dialog-multi-cancel"   @click="cancelBtnClick(cancelAutoClose)">
+                     {{cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')}}
+                  </div>
+              </template>
             </div>
           </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: {
-    id: {
-      type: String,
-      default: ''
+    cover:{
+        type:Boolean,
+        default:true
     },
     title: {
       type: String,
@@ -95,6 +96,14 @@ export default {
       type: Boolean,
       default: false
     },
+    multiButton:{
+      type:Boolean,
+      default:false
+    },
+    multiButtonText:{
+      type: Array,
+      default: () => []
+    },
     visible: {
       type: Boolean,
       default: false
@@ -143,6 +152,10 @@ export default {
       type: Function,
       default: null
     },
+    chooseBtn:{
+       type: Function,
+      default: null
+    },
     onCloseBtn: {
       type: Function,
       default: null
@@ -182,6 +195,18 @@ export default {
     this.destroy = true;
   },
   methods: {
+    clickCover() {
+      if (this.closeOnClickOverlay) {
+        this.hide();
+      }
+    },
+    chooseItem(item, index) {
+      if(item.disabled){return;}
+      this.$emit('choose-btn',item,index);
+      if (typeof this.chooseBtn === 'function') {
+        this.chooseBtn.call(this,item,index);
+      }
+    },
     modalClick() {
       if (!this.closeOnClickModal) {
         return;
@@ -242,13 +267,8 @@ export default {
         this.curVisible = val;
       },
       immediate: true
-    },
-    curVisible(val) {
-      if (this.lockBgScroll) {
-        //锁定or解锁页面滚动
-        lockMaskScroll[val ? 'afterOpen' : 'beforeClose']();
-      }
     }
+  
   }
 };
 </script>

src/packages/dialog/doc.md

@@ -7,22 +7,12 @@
 ```javascript
 this.$dialog({
   title: "确定删除此订单？",
-  content: "删除后将从你的记录里消失，无法找回"
-});
-```
-
-## ID
-
-同一个页面中，id相同的Dialog的DOM只会同时存在一个，不指定id时，id的默认值为**nut-dialog-default-id**。
-
-```javascript
-this.$dialog({
-  id:'my-dialog',
-  title: "确定删除此订单？",
-  content: "删除后将从你的记录里消失，无法找回"
+  content: "删除后将从你的记录里消失，无法找回",
+  onOkBtn(event) {
+    this.close(); //关闭对话框
+  }
 });
 ```
-> 如果希望同时弹出多个Dialog，请给不同的Dialog设置不同的id。
 
 ## 事件
 ```javascript
@@ -48,6 +38,34 @@ this.$dialog({
 });
         
 ```
+## 多行按钮
+```javascript
+this.$dialog({
+        content: '我认为，大多数设计师只是试图从他们已经做过的事情中努力，在讲故事方面并没有什么特别之处，而我的回归，将伴随着一个伟大的演讲',
+        multiButton:true,
+        textAlign:"left",
+        multiButtonText:[{
+          name: '主要操作1(禁止)',
+          value: 0,
+          disabled:true
+        },
+        {
+          name: '主要操作2',
+          value: 1,
+          disabled:false,
+        },{
+          name: '主要操作3',
+          value:2,
+          disabled:false,
+        }],
+        chooseBtn(item,index){
+          console.log(index)
+          alert(`我点击了第${index + 1}个按钮`)
+          this.close()
+        },    
+      });
+        
+```
 ## 关闭dialog不销毁实例
 ```javascript
  this.$dialog({
@@ -107,12 +125,10 @@ export default {
 }
 ```
 
-## API
+## prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| id | 标识符，相同者共享一个实例 | String/Number | nut-dialog-default-id
-| canDestroy | 是否关闭弹窗时销毁实例 | Boolean | true
 | title | 标题 | String | -
 | content | 内容，支持HTML | String | -
 | type | 弹窗类型，值为**image**时为图片弹窗 | String | -
@@ -124,15 +140,22 @@ export default {
 | okBtnTxt | 确定按钮文案 | String | ”确 定“
 | okBtnDisabled | 禁用确定按钮 | Boolean | false
 | cancelAutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true
-| textAlign | 文字对齐方向，可选值同css的text-align | String | "center"
-| onOkBtn | 确定按钮回调 | Function | -
-| onCancelBtn | 取消按钮回调 | Function | -
-| onCloseBtn | 关闭按钮回调 | Function | -
-| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
-| onClickImageLink | 图片链接点击回调，仅对图片类型弹窗有效 | Function | -
+| textAlign | 文字对齐方向，可选值同css的text-align | String | "left"-
 | maskBgStyle | 遮罩层样式（颜色、透明度） | String | -
 | customClass | 增加一个自定义class | String | -
 | link | 点击图片跳转的Url，仅对图片类型弹窗有效 | String | -
 | imgSrc | 图片Url，仅对图片类型弹窗有效 | String | -
 | animation | 是否开启默认动效 | Boolean | true
+| multiButton | 是否开启多行按钮 | Boolean | false
+| multiButtonText | 多行按钮内容。内容必须包含name,按钮显示的内容 | Array | -
 | lockBgScroll | 锁定遮罩层滚动，不影响弹窗内部滚动（实验性质）会给body添加posotion:fix属性，注意 | Boolean | false
+
+## event
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| onOkBtn | 确定按钮回调 | Function | -
+| onCancelBtn | 取消按钮回调 | Function | -
+| onCloseBtn | 关闭按钮回调 | Function | -
+| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
+| chooseBtn | 多行按钮内容。回调函数，返回参数为 点击的item和index | Function | -

src/packages/leftslip/doc.md

@@ -67,7 +67,7 @@ export default {
           <nut-cell class="cell-item" :title="item.title" :sub-title="item.subTitle">
             <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
             <div slot="desc">
-              <p class="timer">{{item.time}}</p>
+              <p class="timer">{{item.time} }</p>
               <p class="badge"><nut-badge :is-dot="item.isDot" :value="item.value" :max="99" top="0px" right="15px"></nut-badge></p>
             </div>
           </nut-cell>
@@ -107,7 +107,7 @@ export default {
 ###  禁止滑动
 ```html
 <div>
-    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'}}</button>
+    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'} }</button>
     <nut-leftslip :disabled="isDisable">
         <div slot="slip-main" class="slip-main">左滑触发删除</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>

src/packages/radio/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-list">
-    <h4>Radio基本用法</h4>
+    <!-- <h4>Radio基本用法</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -129,40 +129,66 @@
           <nut-radio class="my-radio" v-model="radioVal5" label="b">备选项2</nut-radio>
         </span>
       </nut-cell>
-    </div>    
-    <h4>标签样式</h4>
+    </div> -->
+    <h4>按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
-        <span slot="title">
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="1"
-          :checked="false"
-          >
-          备选项1
-          </nut-radio>
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="2"
-          :checked="false"
-          >
-          备选项2
-          </nut-radio>
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="3"
-          :checked="false"
-          >
-          备选项3
-          </nut-radio>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :name="'test'"
+            :styleType="'label'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="1"    
+            :reslout-attr="'value'"   
+            v-model="labelReslut"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 value: {{labelReslut}}</span>
+      </nut-cell>
+      <h4>按钮单选组输出属性为 text 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styleType="'label'"
+            :name="'test2'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut2"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut2}}</span>
+      </nut-cell>
+      <h4>列表单选组输出属性为 value 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styletype="'list'"
+            :name="'test3'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut3"                 
+          />
         </span>
       </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut3}}</span>
+      </nut-cell>
   </div>
 </template>
 
 <script>
+import group from './index.vue';
 export default {
   data() {
     return {
@@ -172,15 +198,63 @@ export default {
       radioVal3: 'b',
       radioVal4: 'b',
       radioVal5: 'a',
-      demo6value:1,
       demo6name:'test',
+      demo6value:1,     
+      test:'',
       radioGroupVal1: 'b',
       radioGroupVal2: '2',
       radioGroupVal3: '2',
-      radioGroupVal4: 'c'      
+      radioGroupVal4: 'c',
+      labelList:[
+        {
+          name:'test',
+          value:1,
+          text:'亚瑟'
+        },
+        {
+          name:'test',
+          value:2,
+          text:'廉颇'
+        },
+        {
+          name:'test',
+          value:3,
+          text:'东皇太一'
+        },
+        {
+          name:'test',
+          value:4,
+          text:'吕布'
+        },
+        {
+          name:'test',
+          value:5,
+          text:'黑切'
+        },
+        {
+          name:'test',
+          value:6,
+          text:'冰心'
+        }
+      ],
+      labelReslut:"",
+      labelReslut2:"",
+      labelReslut3:""   
     };
   },
-  methods: {}
+  components:{
+    group
+  },
+  watch:{
+    test(val){
+      console.log(val)
+    }
+  },
+  methods: {    
+  },
+  mounted(){
+    
+  }
 };
 </script>
 

src/packages/radio/index.scss

@@ -0,0 +1,10 @@
+.nut-radio{
+    .nut-label{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;        
+        .warper{
+            margin: 5px;
+        }
+    }
+}

src/packages/radio/index.vue

@@ -0,0 +1,69 @@
+<template >
+<div class="nut-radio">
+    <div    class="nut-label" 
+            v-if="list&&list.length>0">
+        <nut-radio   v-for="(item,index) in list" 
+            :key="item[effectKey]"
+            :type="'list'"           
+            :name="name" 
+            :text="item[effectText]"
+            :value="item[effectKey]"  
+            :radioData="item"          
+            :checked="checkedIndex===index"    
+            @radioChange="radioChange"
+            :disabled="disabledValue | disabledFilter"          
+            />
+    </div>
+</div>    
+</template>
+<script>
+export default {
+    name:"radio-group",    
+    props:{     
+        type:String, // radio 展示    
+        list:Array,  // radio 需要的数据信息 
+        checkedIndex:Number, // 初始化选中数组第几个从 0 开始
+        effectKey:String,    // 绑定有效值对应属性 key
+        effectText:String,   // 有效显示文案对应属性 key
+        resloutAttr:String,  // 选择结果展示属性值类型 key 
+        name:String, // radio 标签 name         
+        disabledValue:[String, Number, Boolean,Array] // 禁用的 radio 需要传一个数组
+    },    
+    mounted(){
+        if(this.list&&this.list.length>0){
+            this.$emit('input',this.list[this.checkedIndex][this.resloutAttr])
+        }
+        
+    },
+    methods:{
+        radioChange(obj){            
+            this.$emit('input',obj[this.resloutAttr])
+        }
+    },
+    watch:{
+        list(val){
+            if(val&&val.length>0){
+            this.$emit('input',val[this.checkedIndex][this.resloutAttr])
+        }
+        }
+    },
+    filters:{
+        disabledFilter(obj){
+            if( Object.prototype.toString.apply(obj) === '[object Number]' ) {
+
+            }else if( Object.prototype.toString.apply(obj) === '[object Array]' ) {
+                
+            }else if( Object.prototype.toString.apply(obj) === '[object String]' ) {
+                
+            }else if( Object.prototype.toString.apply(obj) === '[object Boolean]' ) {
+
+            }else{
+
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/packages/radio/radio.scss

@@ -100,7 +100,9 @@
 	line-height: 28px;
 	height: 28px;	
 	position: relative;
-	font-size: 14px;
+	font-size: 14px;	
+	padding:0 15px;
+	cursor: pointer;
 	label{
 		display: inline-block;		
 		padding:0 15px;
@@ -123,6 +125,7 @@
 		color:#969696;
 	}
 	.box-border{
+		box-sizing: border-box;
 		top:0;
 		left: 0;
 		position: absolute;
@@ -141,6 +144,5 @@
 	input:checked +.text-box + .box-border{
 		background: rgba(255,239,235,1);
 		border: 1px solid rgba(225,37,27,1);
-	}
-	
+	}	
 }

src/packages/radio/radio.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="warper">
-  <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
+  <!-- <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
     <input
       type="radio"
       :value="currentValue"
@@ -10,11 +10,12 @@
       :label="label"
     />
     <span class="nut-radio-label">
+      
       <slot></slot>
     </span>
-  </label>
+  </label> -->
   <div v-if="type === 'list'" class="nut-radio-list">
-      <label for="">
+     
           
           <input
             type="radio"
@@ -24,10 +25,11 @@
             :disabled="isDisabled"
             :label="label"
             :name="name"
+            @input="valChange"
           />
-          <div class="text-box"><slot></slot></div>
+          <div class="text-box">{{text}}<slot></slot></div>
           <div class="box-border"></div>
-      </label>
+      
   </div>
 </div>
   
@@ -40,7 +42,7 @@ export default {
   mixins: [findCptUpward],
   props: {
     value: {
-      type: [String, Number, Boolean],
+      type: [String, Number, Boolean,Function],
       default: false
     },
     checked:{
@@ -66,6 +68,13 @@ export default {
     },
     name:{
       type:String
+    },
+    text:String,
+    radioData:{
+      type:Object,
+      default(){
+
+      }
     }
   },
   data() {
@@ -102,6 +111,16 @@ export default {
         return false;
       }
       this.currentValue = this.label;
+    },
+    valChange(e){  
+
+      // {
+      //   el:e.target,
+      //   value:e.target.value,
+      //   name:e.target.name,
+      // }   
+      let radioData = this.radioData;      
+      this.$emit('radioChange',radioData)
     }
   }
 };

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 {}