chore(card): optimize (#2438)

jdf2e · Jul 19, 2023 · 51b69e8 · 51b69e8
1 parent 195a191
commit 51b69e8
Show file tree

Hide file tree

Showing 9 changed files with 298 additions and 428 deletions.
diff --git a/packages/nutui-taro-demo/src/business/pages/card/index.vue b/packages/nutui-taro-demo/src/business/pages/card/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="demo" :class="{ web: env === 'WEB' }">
-    <Header v-if="env === 'WEB'" />
+    <DocHeader />
     <h2>基础用法</h2>
     <nut-card
       :img-url="state.imgUrl"
@@ -86,33 +86,22 @@
   </view>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from 'vue';
 import Taro from '@tarojs/taro';
-import Header from '../../../components/header.vue';
+import DocHeader from '../../../components/header.vue';
 
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const state = reactive({
-      imgUrl:
-        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-      title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
-      price: '388',
-      vipPrice: '378',
-      shopDesc: '自营',
-      delivery: '厂商配送',
-      shopName: '阳澄湖大闸蟹自营店>'
-    });
-    return {
-      state,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
+  price: '388',
+  vipPrice: '378',
+  shopDesc: '自营',
+  delivery: '厂商配送',
+  shopName: '阳澄湖大闸蟹自营店>'
+});
 </script>
 
 <style lang="scss">

diff --git a/src/packages/__VUE/card/demo.vue b/src/packages/__VUE/card/demo.vue
@@ -70,8 +70,8 @@
   </view>
 </template>
 
-<script lang="ts">
-import { computed, reactive, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('card');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -108,24 +108,16 @@ const initTranslate = () =>
       question: 'inquiry'
     }
   });
-export default defineComponent({
-  setup() {
-    initTranslate();
-    const state = reactive({
-      imgUrl:
-        '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-      title: computed(() => translate('title')),
-      price: '388',
-      vipPrice: '378',
-      shopDesc: computed(() => translate('desc')),
-      delivery: computed(() => translate('delivery')),
-      shopName: computed(() => translate('shopName'))
-    });
-    return {
-      state,
-      translate
-    };
-  }
+initTranslate();
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: computed(() => translate('title')),
+  price: '388',
+  vipPrice: '378',
+  shopDesc: computed(() => translate('desc')),
+  delivery: computed(() => translate('delivery')),
+  shopName: computed(() => translate('shopName'))
 });
 </script>
 

diff --git a/src/packages/__VUE/card/doc.en-US.md b/src/packages/__VUE/card/doc.en-US.md
@@ -6,7 +6,7 @@ Used to display product pictures, prices and other information.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Card } from '@nutui/nutui';
 
@@ -20,7 +20,7 @@ app.use(Card);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-card
     :img-url="state.imgUrl"
@@ -33,25 +33,18 @@ app.use(Card);
   >
   </nut-card>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        imgUrl:
-          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-        title: 'title',
-        price: '388',
-        vipPrice: '378',
-        shopDesc: 'desc',
-        delivery: 'delivery',
-        shopName: 'shopName>'
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: 'title',
+  price: '388',
+  vipPrice: '378',
+  shopDesc: 'desc',
+  delivery: 'delivery',
+  shopName: 'shopName>'
+});
 </script>
 ```
 
@@ -61,7 +54,7 @@ app.use(Card);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-card
     :img-url="state.imgUrl"
@@ -81,43 +74,36 @@ app.use(Card);
     </template>
   </nut-card>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        imgUrl:
-          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-        title: 'title',
-        price: '388',
-        vipPrice: '378',
-        shopDesc: 'desc',
-        delivery: 'delivery',
-        shopName: 'shopName>'
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: 'title',
+  price: '388',
+  vipPrice: '378',
+  shopDesc: 'desc',
+  delivery: 'delivery',
+  shopName: 'shopName>'
+});
 </script>
 <style>
-  .search_prolist_attr {
-    margin: 3px 0 1px;
-    height: 15px;
-    overflow: hidden;
-  }
-  .search_prolist_attr > span {
-    float: left;
-    padding: 0 5px;
-    border-radius: 1px;
-    font-size: 10px;
-    height: 15px;
-    line-height: 15px;
-    color: #999;
-    background-color: #f2f2f7;
-    margin-right: 5px;
-  }
+.search_prolist_attr {
+  margin: 3px 0 1px;
+  height: 15px;
+  overflow: hidden;
+}
+.search_prolist_attr > span {
+  float: left;
+  padding: 0 5px;
+  border-radius: 1px;
+  font-size: 10px;
+  height: 15px;
+  line-height: 15px;
+  color: #999;
+  background-color: #f2f2f7;
+  margin-right: 5px;
+}
 </style>
 ```
 
@@ -127,7 +113,7 @@ app.use(Card);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-card
     :img-url="state.imgUrl"
@@ -153,30 +139,23 @@ app.use(Card);
     </template>
   </nut-card>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        imgUrl:
-          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-        title: 'title',
-        shopName: 'shopName>'
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: 'title',
+  shopName: 'shopName>'
+});
 </script>
 <style>
-  .tag {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 5px;
-    margin-left: 2px;
-    height: 14px;
-  }
+.tag {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  margin-left: 2px;
+  height: 14px;
+}
 </style>
 ```
 
@@ -186,7 +165,7 @@ app.use(Card);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-card
     :img-url="state.imgUrl"
@@ -202,30 +181,23 @@ app.use(Card);
     </template>
   </nut-card>
 </template>
-<script>
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        imgUrl:
-          '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
-        title: 'title',
-        price: '388',
-        vipPrice: '378',
-        shopDesc: 'desc',
-        delivery: 'delivery',
-        shopName: 'shopName>'
-      });
-      return {
-        state
-      };
-    }
-  };
+<script setup>
+import { reactive } from 'vue';
+const state = reactive({
+  imgUrl:
+    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
+  title: 'title',
+  price: '388',
+  vipPrice: '378',
+  shopDesc: 'desc',
+  delivery: 'delivery',
+  shopName: 'shopName>'
+});
 </script>
 <style>
-  .customize {
-    font-size: 12px;
-  }
+.customize {
+  font-size: 12px;
+}
 </style>
 ```