fix(tabs): text word-break #1344

Author: richard1015

demo.html

@@ -20,18 +20,5 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="./src/sites/mobile/main.ts"></script>
-    <script type="text/javascript">
-      var jaq = jaq || [];
-      jaq.push(["account", "JA2018_1831300"]);
-      jaq.push(["domain", "jd.com"]);
-      (function() {
-        var ja = document.createElement("script");
-        ja.type = "text/javascript";
-        ja.async = true;
-        ja.src = "//wl.jd.com/joya.js";
-        var s = document.getElementsByTagName("script")[0];
-        s.parentNode.insertBefore(ja, s);
-      })();
-    </script>
   </body>
 </html>

src/packages/__VUE/tabpane/index.scss

@@ -7,6 +7,7 @@
   box-sizing: border-box;
   overflow: auto;
   height: 100%;
+  word-break: break-all;
   &.inactive {
     overflow: visible;
     height: 0;

src/packages/__VUE/tabs/demo.vue

@@ -35,8 +35,10 @@
     </nut-tabs>
 
     <h2>{{ translate('title4') }}</h2>
-    <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
-      <nut-tabpane v-for="item in state.list4" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+    <nut-tabs v-model="state.tab4value" :auto-height="true" title-scroll title-gutter="10">
+      <nut-tabpane v-for="(item, index) in state.list4" :pane-key="index" :title="'Tab ' + item">
+        Tab {{ item }}
+      </nut-tabpane>
     </nut-tabs>
     <h2>{{ translate('title5') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
@@ -130,7 +132,7 @@ export default createDemo({
       tab5value: '0',
       tab6value: '0',
       tab7value: 'c1',
-      list3: Array.from(new Array(2).keys()),
+      list3: ['1', '2'],
       list4: Array.from(new Array(10).keys()),
       list5: Array.from(new Array(2).keys()),
       list6: computed(() => [
@@ -151,7 +153,9 @@ export default createDemo({
       ])
     });
     setTimeout(() => {
-      state.list3.push(999);
+      state.list3.push(
+        '999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999'
+      );
       state.tab3value = '2';
     }, 3000);