chore(elevator): use icon-vue component (#1936)

* chore(elevator): use icon-vue component

* feat(elevator): update demo in mobile-taro

* docs(elevator): update doc.en-US.md

src/packages/__VUE/elevator/demo.vue

@@ -28,7 +28,7 @@
     <div class="elevator-wrapper">
       <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex">
         <template v-slot:default="slotProps">
-          <nut-icon name="JD" size="12"></nut-icon>
+          <Jd width="12px"></Jd>
           <span :style="{ marginLeft: '15px' }">{{ slotProps.item.name }}</span>
         </template>
       </nut-elevator>
@@ -41,6 +41,7 @@ import { computed, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('elevator');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Jd } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -137,6 +138,9 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    Jd
+  },
   setup() {
     initTranslate();
     const state = reactive({

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

@@ -21,7 +21,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -99,7 +99,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList2" :height="220" :acceptKey="acceptKey" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -232,7 +232,7 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList3" :is-sticky="true" :height="220"  @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 </template>
@@ -377,18 +377,22 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
       <template v-slot:default="slotProps">
-        <nut-icon name='JD' size="12"></nut-icon>
+        <Jd width="12px"></Jd>
         <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
       </template>
   </nut-elevator>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Jd } from '@nutui/icons-vue'
   export default {
+    components: {
+      Jd,
+    },
     setup() {
       const state = reactive({
         acceptKey: 'num',

src/packages/__VUE/elevator/doc.md

@@ -377,18 +377,22 @@ app.use(Elevator);
 
 :::demo
 
-``` html
+```vue
 <template>
   <nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex">
       <template v-slot:default="slotProps">
-        <nut-icon name='JD' size="12"></nut-icon>
+        <Jd width="12px"></Jd>
         <span :style="{marginLeft: '15px'}">{{ slotProps.item.name }}</span>
       </template>
   </nut-elevator>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Jd } from '@nutui/icons-vue'
   export default {
+    components: {
+      Jd,
+    },
     setup() {
       const state = reactive({
         acceptKey: 'num',

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

@@ -2,22 +2,50 @@
   <div class="demo elevator-demo">
     <h2>基本用法</h2>
     <div class="elevator-wrapper">
+      <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
+    </div>
+    <h2>自定义索引key</h2>
+    <div class="elevator-wrapper">
       <nut-elevator
-        :index-list="dataList"
+        :index-list="dataList2"
+        :height="220"
+        :acceptKey="acceptKey"
+        @click-item="clickItem"
+        @click-index="clickIndex"
+      ></nut-elevator>
+    </div>
+    <h2>索引吸顶</h2>
+    <div class="elevator-wrapper">
+      <nut-elevator
+        :index-list="dataList3"
         :is-sticky="true"
-        height="500px"
+        :height="220"
         @click-item="clickItem"
         @click-index="clickIndex"
       ></nut-elevator>
     </div>
+    <h2>自定义内容</h2>
+    <div class="elevator-wrapper">
+      <nut-elevator :index-list="temp" :height="260" @click-item="clickItem" @click-index="clickIndex">
+        <template v-slot:default="slotProps">
+          <Jd width="12px"></Jd>
+          <span :style="{ marginLeft: '15px' }">{{ slotProps.item.name }}</span>
+        </template>
+      </nut-elevator>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+import { computed, reactive, toRefs, defineComponent } from 'vue';
+import { Jd } from '@nutui/icons-vue';
 export default defineComponent({
+  components: {
+    Jd
+  },
   setup() {
     const state = reactive({
+      acceptKey: 'num',
       dataList: [
         {
           title: 'A',
@@ -38,6 +66,153 @@ export default defineComponent({
           ]
         },
         {
+          title: 'G',
+          list: [
+            {
+              name: '广西',
+              id: 5
+            },
+            {
+              name: '广东',
+              id: 6
+            }
+          ]
+        },
+        {
+          title: 'H',
+          list: [
+            {
+              name: '湖南',
+              id: 9
+            },
+            {
+              name: '湖北',
+              id: 10
+            }
+          ]
+        }
+      ],
+      dataList2: [
+        {
+          num: '一',
+          list: [
+            {
+              name: '北京',
+              id: 1
+            },
+            {
+              name: '上海',
+              id: 2
+            },
+            {
+              name: '深圳',
+              id: 3
+            },
+            {
+              name: '广州',
+              id: 4
+            },
+            {
+              name: '杭州',
+              id: 5
+            }
+          ]
+        },
+        {
+          num: '二',
+          list: [
+            {
+              name: '成都',
+              id: 6
+            },
+            {
+              name: '西安',
+              id: 7
+            },
+            {
+              name: '天津',
+              id: 8
+            },
+            {
+              name: '武汉',
+              id: 9
+            },
+            {
+              name: '长沙',
+              id: 10
+            },
+            {
+              name: '重庆',
+              id: 11
+            },
+            {
+              name: '苏州',
+              id: 12
+            },
+            {
+              name: '南京',
+              id: 13
+            }
+          ]
+        },
+        {
+          num: '三',
+          list: [
+            {
+              name: '西宁',
+              id: 14
+            },
+            {
+              name: '兰州',
+              id: 15
+            },
+            {
+              name: '石家庄',
+              id: 16
+            },
+            {
+              name: '秦皇岛',
+              id: 17
+            },
+            {
+              name: '大连',
+              id: 18
+            },
+            {
+              name: '哈尔滨',
+              id: 19
+            },
+            {
+              name: '长春',
+              id: 20
+            },
+            {
+              name: '太原',
+              id: 21
+            }
+          ]
+        }
+      ],
+      dataList3: [
+        {
+          title: 'A',
+          list: [
+            {
+              name: '安徽',
+              id: 1
+            }
+          ]
+        },
+        {
+          title: 'B',
+          list: [
+            {
+              name: '北京',
+              id: 2
+            }
+          ]
+        },
+        {
           title: 'C',
           list: [
             {
@@ -134,6 +309,10 @@ export default defineComponent({
       ]
     });
 
+    const temp = computed(() => {
+      return state.dataList;
+    });
+
     const clickItem = (key: string, item: any) => {
       console.log(key, JSON.stringify(item));
     };
@@ -142,7 +321,7 @@ export default defineComponent({
       console.log(key);
     };
 
-    return { ...toRefs(state), clickItem, clickIndex };
+    return { ...toRefs(state), temp, clickItem, clickIndex };
   }
 });
 </script>