chore: tabpane 使用名称变更

src/packages/__VUE/cascader/cascader-item.vue

@@ -1,7 +1,7 @@
 <template>
   <nut-tabs class="nut-cascader" v-model="tabsCursor" @click="handleTabClick" title-scroll>
     <template v-if="!initLoading && panes.length">
-      <nut-tabpane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
+      <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
         <view role="menu" class="nut-cascader-pane">
           <template v-for="node in pane.nodes" :key="node.value">
             <view
@@ -19,12 +19,12 @@
             </view>
           </template>
         </view>
-      </nut-tabpane>
+      </nut-tab-pane>
     </template>
     <template v-else>
-      <nut-tabpane title="Loading...">
+      <nut-tab-pane title="Loading...">
         <view class="nut-cascader-pane"></view>
-      </nut-tabpane>
+      </nut-tab-pane>
     </template>
   </nut-tabs>
 </template>

src/packages/__VUE/empty/demo.vue

@@ -8,15 +8,15 @@
     <h2>{{ translate('imageType') }}</h2>
     <div class="show">
       <nut-tabs v-model="tabValue">
-        <nut-tabpane :title="translate('noContent')">
+        <nut-tab-pane :title="translate('noContent')">
           <nut-empty image="empty" :description="translate('noContent')"></nut-empty>
-        </nut-tabpane>
-        <nut-tabpane :title="translate('error')">
+        </nut-tab-pane>
+        <nut-tab-pane :title="translate('error')">
           <nut-empty image="error" :description="translate('error')"></nut-empty>
-        </nut-tabpane>
-        <nut-tabpane :title="translate('noNetWork')">
+        </nut-tab-pane>
+        <nut-tab-pane :title="translate('noNetWork')">
           <nut-empty image="network" :description="translate('noNetWork')"></nut-empty>
-        </nut-tabpane>
+        </nut-tab-pane>
       </nut-tabs>
     </div>
 

src/packages/__VUE/infiniteloading/demo.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="demo">
     <nut-tabs v-model="tabsValue" animatedTime="0" @change="chagetabs">
-      <nut-tabpane :title="translate('basic')">
+      <nut-tab-pane :title="translate('basic')">
         <ul class="infiniteUl">
           <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
             <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
-      </nut-tabpane>
+      </nut-tab-pane>
 
-      <nut-tabpane :title="translate('customTxt')">
+      <nut-tab-pane :title="translate('customTxt')">
         <ul class="infiniteUl">
           <nut-infinite-loading
             v-model="infinityValue2"
@@ -21,7 +21,7 @@
             <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
           </nut-infinite-loading>
         </ul>
-      </nut-tabpane>
+      </nut-tab-pane>
     </nut-tabs>
   </div>
 </template>

src/packages/__VUE/navbar/demo.vue

@@ -37,8 +37,8 @@
     <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" :desc="translate('desc2')">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tabpane :title="translate('tab1')"> </nut-tabpane>
-          <nut-tabpane :title="translate('tab2')"> </nut-tabpane>
+          <nut-tab-pane :title="translate('tab1')"> </nut-tab-pane>
+          <nut-tab-pane :title="translate('tab2')"> </nut-tab-pane>
         </nut-tabs>
       </template>
 
@@ -51,9 +51,9 @@
     <nut-navbar @on-click-back="back">
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tabpane :title="translate('tab1')"> </nut-tabpane>
-          <nut-tabpane :title="translate('tab2')"> </nut-tabpane>
-          <nut-tabpane :title="translate('tab3')"> </nut-tabpane>
+          <nut-tab-pane :title="translate('tab1')"> </nut-tab-pane>
+          <nut-tab-pane :title="translate('tab2')"> </nut-tab-pane>
+          <nut-tab-pane :title="translate('tab3')"> </nut-tab-pane>
         </nut-tabs>
       </template>
       <template #icons>

src/packages/__VUE/navbar/doc.en-US.md

@@ -98,8 +98,8 @@ app.use(TabPane);
   >
     <template #content>
       <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tabpane title="Title1"> </nut-tabpane>
-        <nut-tabpane title="Title2"> </nut-tabpane>
+        <nut-tab-pane title="Title1"> </nut-tab-pane>
+        <nut-tab-pane title="Title2"> </nut-tab-pane>
       </nut-tabs>
     </template>
 
@@ -147,9 +147,9 @@ export default {
   <nut-navbar @on-click-back="back" >
     <template #content>
       <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tabpane title="Title1"> </nut-tabpane>
-        <nut-tabpane title="Title2"> </nut-tabpane>
-        <nut-tabpane title="Title3"> </nut-tabpane>
+        <nut-tab-pane title="Title1"> </nut-tab-pane>
+        <nut-tab-pane title="Title2"> </nut-tab-pane>
+        <nut-tab-pane title="Title3"> </nut-tab-pane>
       </nut-tabs>
     </template>
     <template #icons>

src/packages/__VUE/navbar/doc.md

@@ -98,8 +98,8 @@ app.use(TabPane);
   >
     <template #content>
       <nut-tabs v-model="tab1value" @click="changeTab">
-        <nut-tabpane title="标题1"> </nut-tabpane>
-        <nut-tabpane title="标题2"> </nut-tabpane>
+        <nut-tab-pane title="标题1"> </nut-tab-pane>
+        <nut-tab-pane title="标题2"> </nut-tab-pane>
       </nut-tabs>
     </template>
 
@@ -147,9 +147,9 @@ export default {
   <nut-navbar @on-click-back="back" >
     <template #content>
       <nut-tabs v-model="tab2value" @click="changeTabList">
-        <nut-tabpane title="标题1"> </nut-tabpane>
-        <nut-tabpane title="标题2"> </nut-tabpane>
-        <nut-tabpane title="标题3"> </nut-tabpane>
+        <nut-tab-pane title="标题1"> </nut-tab-pane>
+        <nut-tab-pane title="标题2"> </nut-tab-pane>
+        <nut-tab-pane title="标题3"> </nut-tab-pane>
       </nut-tabs>
     </template>
     <template #icons>

src/packages/__VUE/pullrefresh/demo.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="demo">
     <nut-tabs v-model="tabsValue" animatedTime="0">
-      <nut-tabpane :title="translate('basic')">
+      <nut-tab-pane :title="translate('basic')">
         <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
           <div class="pull-block">{{ translate('content') }}</div>
         </nut-pullrefresh>
-      </nut-tabpane>
-      <nut-tabpane :title="translate('customTxt')">
+      </nut-tab-pane>
+      <nut-tab-pane :title="translate('customTxt')">
         <nut-pullrefresh
           v-model="refresh2"
           :loosingTxt="translate('loose')"
@@ -19,8 +19,8 @@
           </template>
           <div class="pull-block">{{ translate('content') }}</div>
         </nut-pullrefresh>
-      </nut-tabpane>
-      <nut-tabpane :title="translate('listenerTxt')">
+      </nut-tab-pane>
+      <nut-tab-pane :title="translate('listenerTxt')">
         <div class="parentpage">
           <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
             <div class="pull-letter" v-for="item in refreshList2">
@@ -28,7 +28,7 @@
             </div>
           </nut-pullrefresh>
         </div>
-      </nut-tabpane>
+      </nut-tab-pane>
     </nut-tabs>
   </div>
 </template>

src/packages/__VUE/tabpane/index.vue

@@ -6,7 +6,7 @@
 <script lang="ts">
 import { inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('tabpane');
+const { create } = createComponent('tab-pane');
 
 export default create({
   props: {

src/packages/__VUE/tabs/__tests__/index.spec.ts

@@ -35,7 +35,7 @@ test('base tabs props', async () => {
     },
     components: {
       'nut-tabs': Tabs,
-      'nut-tabpane': TabPane
+      'nut-tab-pane': TabPane
     }
   });
   await nextTick();
@@ -59,7 +59,7 @@ test('base other props', async () => {
     },
     components: {
       'nut-tabs': Tabs,
-      'nut-tabpane': TabPane
+      'nut-tab-pane': TabPane
     }
   });
   await nextTick();
@@ -75,7 +75,7 @@ test('base Tabs Slots', async () => {
   const wrapper = mount({
     components: {
       'nut-tabs': Tabs,
-      'nut-tabpane': TabPane
+      'nut-tab-pane': TabPane
     },
     template: `
     <nut-tabs v-model="state.tab7value">
@@ -92,9 +92,9 @@ test('base Tabs Slots', async () => {
           <span class="nut-tabs__titles-item__line"></span>
         </div>
       </template>
-      <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+      <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
         {{ item.title }}
-      </nut-tabpane>
+      </nut-tab-pane>
     </nut-tabs>
     `,
     setup() {
@@ -137,13 +137,13 @@ test('base Tabpane Props', async () => {
   const wrapper = mount({
     components: {
       'nut-tabs': Tabs,
-      'nut-tabpane': TabPane
+      'nut-tab-pane': TabPane
     },
     template: `
     <nut-tabs v-model="state.tab2value">
-      <nut-tabpane title="Tab 1" pane-key="0"> </nut-tabpane>
-      <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1" pane-key="0"> </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     `,
     setup() {
@@ -168,13 +168,13 @@ test('base click', async () => {
   const wrapper = mount({
     components: {
       'nut-tabs': Tabs,
-      'nut-tabpane': TabPane
+      'nut-tab-pane': TabPane
     },
     template: `
     <nut-tabs v-model="state.tab1value">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     `,
     setup() {

src/packages/__VUE/tabs/common.ts

@@ -80,7 +80,7 @@ export const component = (components: any) => {
         vnodes.forEach((vnode: VNode, index: number) => {
           let type = vnode.type;
           type = (type as any).name || type;
-          if (type == 'nut-tabpane') {
+          if (type == 'nut-tab-pane') {
             let title = new Title();
             if (vnode.props?.title || vnode.props?.['pane-key'] || vnode.props?.['paneKey']) {
               let paneKeyType = TypeOfFun(vnode.props?.['pane-key']);

src/packages/__VUE/tabs/demo.vue

@@ -2,65 +2,65 @@
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
     <nut-tabs v-model="state.tab1value">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title1') }}</h2>
     <nut-tabs v-model="state.tab11value" type="smile">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title2') }}</h2>
     <nut-tabs v-model="state.tab2value">
-      <nut-tabpane title="Tab 1" pane-key="0"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title9') }}</h2>
     <nut-tabs v-model="state.tab2value" :auto-height="true">
-      <nut-tabpane title="Tab 1" pane-key="0">
+      <nut-tab-pane title="Tab 1" pane-key="0">
         <p>Tab 1</p>
         <p>Tab 1</p>
         <p>Tab 1</p>
         <p>Tab 1</p>
-      </nut-tabpane>
-      <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+      </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title3') }}</h2>
     <nut-tabs v-model="state.tab3value">
-      <nut-tabpane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </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-tab-pane v-for="item in state.list4" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title5') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
-      <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title6') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
-      <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title7') }}</h2>
     <nut-tabs v-model="state.tab8value" size="large">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <nut-tabs v-model="state.tab8value" size="normal">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <nut-tabs v-model="state.tab8value" size="small">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>{{ translate('title8') }}</h2>
     <nut-tabs v-model="state.tab7value">
@@ -77,9 +77,9 @@
           <span class="nut-tabs__titles-item__line"></span>
         </div>
       </template>
-      <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+      <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
         {{ item.title }}
-      </nut-tabpane>
+      </nut-tab-pane>
     </nut-tabs>
   </div>
 </template>

src/packages/__VUE/tabs/doc.en-US.md

@@ -23,15 +23,15 @@ app.use(TabPane);
 ```html
 <template>
 <nut-tabs v-model="state.tab1value">
-  <nut-tabpane title="Tab 1">
+  <nut-tab-pane title="Tab 1">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -53,15 +53,15 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab11value" type="smile">
-  <nut-tabpane title="Tab 1">
+  <nut-tab-pane title="Tab 1">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -84,15 +84,15 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab2value">
-  <nut-tabpane title="Tab 1" pane-key="0">
+  <nut-tab-pane title="Tab 1" pane-key="0">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2" pane-key="1" :disabled="true">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3" pane-key="2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3" pane-key="2">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -111,20 +111,20 @@ export default {
 
 ### Tabpane height auto
 
-Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tabpane`.
+Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tab-pane`.
 
 :::demo
 ```html
 <template>
   <nut-tabs v-model="state.tab2value" :auto-height="true">
-    <nut-tabpane title="Tab 1" pane-key="0">
+    <nut-tab-pane title="Tab 1" pane-key="0">
       <p>Tab 1</p>
       <p>Tab 1</p>
       <p>Tab 1</p>
       <p>Tab 1</p>
-    </nut-tabpane>
-    <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
-    <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+    </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
   </nut-tabs>
 </template>
 <script lang="ts">
@@ -147,9 +147,9 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab3value">
-  <nut-tabpane v-for="item in state.list3" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list3" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -177,9 +177,9 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
-  <nut-tabpane v-for="item in state.list4" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list4" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -203,9 +203,9 @@ export default {
 ```html
 <template>
 <nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
-  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -229,9 +229,9 @@ export default {
 ```html
 <template>
 <nut-tabs style="height:300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
-  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -254,19 +254,19 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab1value" size="large">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 <nut-tabs v-model="state.tab1value" size="normal">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 <nut-tabs v-model="state.tab1value" size="small">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -296,9 +296,9 @@ export default {
       <span class="nut-tabs__titles-item__line"></span>
     </div>
   </template>
-  <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+  <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
     {{item.title}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -347,7 +347,7 @@ export default {
 | animated-time        | Switch animation duration, unit ms 0 means no animation                                                                            | number,string | 300        |
 | title-gutter         | Label gap                                                                                                                          | number,string | 0          |
 | size`v3.1.13`        | Tab bar font size optional value  `large` `normal` `small`                                                                         | string        | normal     |
-| auto-height`v3.1.21` | Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tabpane`. | boolean       | false      |
+| auto-height`v3.1.21` | Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tab-pane`. | boolean       | false      |
 | sticky`v3.2.3` `applet not supported` | Whether to use sticky mode| boolean       | false      |
 | top`v3.2.3` `applet not supported` | Sticky offset top | number       | 0      |
 

src/packages/__VUE/tabs/doc.md

@@ -23,15 +23,15 @@ app.use(TabPane);
 ```html
 <template>
 <nut-tabs v-model="state.tab1value">
-  <nut-tabpane title="Tab 1">
+  <nut-tab-pane title="Tab 1">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -53,15 +53,15 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab11value" type="smile">
-  <nut-tabpane title="Tab 1">
+  <nut-tab-pane title="Tab 1">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -84,15 +84,15 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab2value">
-  <nut-tabpane title="Tab 1" pane-key="0">
+  <nut-tab-pane title="Tab 1" pane-key="0">
     Tab 1
-  </nut-tabpane>
-  <nut-tabpane title="Tab 2" pane-key="1" :disabled="true">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true">
     Tab 2
-  </nut-tabpane>
-  <nut-tabpane title="Tab 3" pane-key="2">
+  </nut-tab-pane>
+  <nut-tab-pane title="Tab 3" pane-key="2">
     Tab 3
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -111,20 +111,20 @@ export default {
 
 ### Tabpane 自动高度
 
-自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tabpane 的高度而发生变化。
+自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化。
 
 :::demo
 ```html
 <template>
   <nut-tabs v-model="state.tab2value" :auto-height="true">
-    <nut-tabpane title="Tab 1" pane-key="0">
+    <nut-tab-pane title="Tab 1" pane-key="0">
       <p>Tab 1</p>
       <p>Tab 1</p>
       <p>Tab 1</p>
       <p>Tab 1</p>
-    </nut-tabpane>
-    <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
-    <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+    </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
   </nut-tabs>
 </template>
 <script lang="ts">
@@ -147,9 +147,9 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab3value">
-  <nut-tabpane v-for="item in state.list3" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list3" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -177,9 +177,9 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
-  <nut-tabpane v-for="item in state.list4" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list4" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -203,9 +203,9 @@ export default {
 ```html
 <template>
 <nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
-  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -229,9 +229,9 @@ export default {
 ```html
 <template>
 <nut-tabs style="height:300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
-  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+  <nut-tab-pane v-for="item in state.list5" :title="'Tab '+ item">
     Tab {{item}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -254,19 +254,19 @@ export default {
 ```html
 <template>
 <nut-tabs v-model="state.tab1value" size="large">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 <nut-tabs v-model="state.tab1value" size="normal">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 <nut-tabs v-model="state.tab1value" size="small">
-  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+  <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+  <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+  <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -296,9 +296,9 @@ export default {
       <span class="nut-tabs__titles-item__line"></span>
     </div>
   </template>
-  <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+  <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
     {{item.title}}
-  </nut-tabpane>
+  </nut-tab-pane>
 </nut-tabs>
 </template>
 <script lang="ts">
@@ -347,7 +347,7 @@ export default {
 | animated-time        | 切换动画时长,单位 ms 0 代表无动画                                                                 | number,string | 300        |
 | title-gutter         | 标签间隙                                                                                          | number,string | 0          |
 | size`v3.1.13`        | 标签栏字体尺寸大小 可选值  large normal small                                                     | string        | normal     |
-| auto-height`v3.1.21` | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tabpane 的高度而发生变化。 | boolean       | false      |
+| auto-height`v3.1.21` | 自动高度。设置为 true 时，nut-tabs 和 nut-tabs__content 会随着当前 nut-tab-pane 的高度而发生变化。 | boolean       | false      |
 | sticky`v3.2.3` `小程序不支持` | 是否使用粘性布局 | boolean       | false      |
 | top`v3.2.3` `小程序不支持` | 粘性布局下的吸顶距离 | number       | 0      |
 

src/sites/mobile-taro/vue/src/exhibition/pages/empty/index.vue

@@ -8,15 +8,15 @@
     <h2>图片类型，内置3个</h2>
     <div class="show">
       <nut-tabs v-model="tabValue">
-        <nut-tabpane title="无内容">
+        <nut-tab-pane title="无内容">
           <nut-empty image="empty" description="无内容"></nut-empty>
-        </nut-tabpane>
-        <nut-tabpane title="加载失败/错误">
+        </nut-tab-pane>
+        <nut-tab-pane title="加载失败/错误">
           <nut-empty image="error" description="加载失败/错误"></nut-empty>
-        </nut-tabpane>
-        <nut-tabpane title="无网络">
+        </nut-tab-pane>
+        <nut-tab-pane title="无网络">
           <nut-empty image="network" description="无网络"></nut-empty>
-        </nut-tabpane>
+        </nut-tab-pane>
       </nut-tabs>
     </div>
 

src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue

@@ -38,8 +38,8 @@
     <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="店铺"> </nut-tabpane>
+          <nut-tab-pane title="商品"> </nut-tab-pane>
+          <nut-tab-pane title="店铺"> </nut-tab-pane>
         </nut-tabs>
       </template>
 
@@ -52,10 +52,10 @@
     <nut-navbar @on-click-back="back">
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="评价"> </nut-tabpane>
-          <nut-tabpane title="详情"> </nut-tabpane>
-          <nut-tabpane title="推荐"> </nut-tabpane>
+          <nut-tab-pane title="商品"> </nut-tab-pane>
+          <nut-tab-pane title="评价"> </nut-tab-pane>
+          <nut-tab-pane title="详情"> </nut-tab-pane>
+          <nut-tab-pane title="推荐"> </nut-tab-pane>
         </nut-tabs>
       </template>
       <template #icons>

src/sites/mobile-taro/vue/src/nav/pages/tabs/index.vue

@@ -2,65 +2,65 @@
   <div class="demo full">
     <h2>基础用法</h2>
     <nut-tabs v-model="state.tab1value">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>基础用法-微笑曲线</h2>
     <nut-tabs v-model="state.tab11value" type="smile">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>通过 pane-key 匹配</h2>
     <nut-tabs v-model="state.tab2value">
-      <nut-tabpane title="Tab 1" pane-key="0"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>Tabpane 自动高度</h2>
     <nut-tabs v-model="state.tab2value" :auto-height="true">
-      <nut-tabpane title="Tab 1" pane-key="0">
+      <nut-tab-pane title="Tab 1" pane-key="0">
         <p>Tab 1</p>
         <p>Tab 1</p>
         <p>Tab 1</p>
         <p>Tab 1</p>
-      </nut-tabpane>
-      <nut-tabpane title="Tab 2" pane-key="1"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
+      </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>数据异步渲染 3s</h2>
     <nut-tabs v-model="state.tab3value">
-      <nut-tabpane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
 
     <h2>数量多,滚动操作</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-tab-pane v-for="item in state.list4" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>左右布局</h2>
     <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
-      <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>左右布局-微笑曲线</h2>
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
-      <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
+      <nut-tab-pane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
     </nut-tabs>
     <h2>标签栏字体尺寸 large normal small </h2>
     <nut-tabs v-model="state.tab1value" size="large">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <nut-tabs v-model="state.tab1value" size="normal">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <nut-tabs v-model="state.tab1value" size="small">
-      <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
-      <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
-      <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
+      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
     </nut-tabs>
     <h2>自定义标签栏</h2>
     <nut-tabs v-model="state.tab7value">
@@ -77,9 +77,9 @@
           <span class="nut-tabs__titles-item__line"></span>
         </div>
       </template>
-      <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+      <nut-tab-pane v-for="item in state.list6" :pane-key="item.paneKey">
         {{ item.title }}
-      </nut-tabpane>
+      </nut-tab-pane>
     </nut-tabs>
   </div>
 </template>