feat: address/countdown/infiniteloading/noticebar 增加代码调试 (#946)

Co-authored-by: yangxiaolu3 <yangxiaolu1993@qq.com>

src/packages/__VUE/address/doc.md

@@ -24,7 +24,9 @@ app.use(Elevator);
 
 ### 选择自定义地址
 
+:::demo
 ```html
+<template>
 <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
 <nut-address
     v-model:visible="showPopup"
@@ -36,118 +38,133 @@ app.use(Elevator);
     @close="close"
     custom-address-title="请选择所在地区"
 ></nut-address>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup() {
+        const showPopup = ref(false);
+        const address = reactive({
+          province:[
+            { id: 1, name: '北京' },
+            { id: 2, name: '广西' },
+            { id: 3, name: '江西' },
+            { id: 4, name: '四川' }
+          ],
+          city:[
+            { id: 7, name: '朝阳区' },
+            { id: 8, name: '崇文区' },
+            { id: 9, name: '昌平区' },
+            { id: 6, name: '石景山区' }
+          ],
+          country:[
+            { id: 3, name: '八里庄街道' },
+            { id: 9, name: '北苑' },
+            { id: 4, name: '常营乡' }
+          ],
+          town:[]
+        })
+
+        const text = ref('请选择地址')
+
+        const showAddress = () => {
+          showPopup.value = !showPopup.value;
+        };
+
+        const onChange = (cal) => {
+          const name = address[cal.next]
+          if (name.length < 1) {
+            showPopup.value = false;
+          }
+        };
+        const close = val => {
+          console.log(val);
+          text.value = val.data.addressStr;
+        };
+
+        return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
+    }
+  }
+</script>
+
 ```
-```javascript
-setup() {
-    const showPopup = ref(false);
-    const address = reactive({
-      province:[
-        { id: 1, name: '北京' },
-        { id: 2, name: '广西' },
-        { id: 3, name: '江西' },
-        { id: 4, name: '四川' }
-      ],
-      city:[
-        { id: 7, name: '朝阳区' },
-        { id: 8, name: '崇文区' },
-        { id: 9, name: '昌平区' },
-        { id: 6, name: '石景山区' }
-      ],
-      country:[
-        { id: 3, name: '八里庄街道' },
-        { id: 9, name: '北苑' },
-        { id: 4, name: '常营乡' }
-      ],
-      town:[]
-    })
-
-    const text = ref('请选择地址')
-
-    const showAddress = () => {
-      showPopup.value = !showPopup.value;
-    };
-
-    const onChange = (cal) => {
-      const name = address[cal.next]
-      if (name.length < 1) {
-        showPopup.value = false;
-      }
-    };
-    const close = val => {
-      console.log(val);
-      text.value = val.data.addressStr;
-    };
-
-    return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
-}
-```
+:::
 
 ### 选择自定义地址2
 
+:::demo
 ```html
-<nut-cell title="选择地址" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
-<nut-address
-    v-model:visible="showPopup"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
-    @change="onChange"
-    @close="close"
-    custom-address-title="请选择所在地区"
-></nut-address>
-```
-```javascript
-setup() {
-    const showPopup = ref(false);
-    const address = reactive({
-      province: [
-        { id: 1, name: '北京', title: 'B' },
-        { id: 2, name: '广西', title: 'G' },
-        { id: 3, name: '江西', title: 'J' },
-        { id: 4, name: '四川', title: 'S' },
-        { id: 5, name: '浙江', title: 'Z' }
-      ],
-      city: [
-        { id: 7, name: '朝阳区', title: 'C' },
-        { id: 8, name: '崇文区', title: 'C' },
-        { id: 9, name: '昌平区', title: 'C' },
-        { id: 6, name: '石景山区', title: 'S' },
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' }
-      ],
-      country: [
-        { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' },
-        { id: 4, name: '常营乡', title: 'C' }
-      ],
-      town:[]
-    })
-
-    const text = ref('请选择地址')
-
-    const showAddress = () => {
-      showPopup.value = !showPopup.value;
-    };
-
-    const onChange = (cal) => {
-      const name = address[cal.next]
-      if (name.length < 1) {
-        showPopup.value = false;
-      }
-    };
-    const close = val => {
-      console.log(val);
-      text.value = val.data.addressStr;
-    };
-
-    return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
-}
+<template>
+  <nut-cell title="选择地址" :desc="text" type="custom2" is-link @click="showAddress"></nut-cell>
+  <nut-address
+      v-model:visible="showPopup"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      @change="onChange"
+      @close="close"
+      custom-address-title="请选择所在地区"
+  ></nut-address>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup() {
+        const showPopup = ref(false);
+        const address = reactive({
+          province: [
+            { id: 1, name: '北京', title: 'B' },
+            { id: 2, name: '广西', title: 'G' },
+            { id: 3, name: '江西', title: 'J' },
+            { id: 4, name: '四川', title: 'S' },
+            { id: 5, name: '浙江', title: 'Z' }
+          ],
+          city: [
+            { id: 7, name: '朝阳区', title: 'C' },
+            { id: 8, name: '崇文区', title: 'C' },
+            { id: 9, name: '昌平区', title: 'C' },
+            { id: 6, name: '石景山区', title: 'S' },
+            { id: 3, name: '八里庄街道', title: 'B' },
+            { id: 9, name: '北苑', title: 'B' }
+          ],
+          country: [
+            { id: 3, name: '八里庄街道', title: 'B' },
+            { id: 9, name: '北苑', title: 'B' },
+            { id: 4, name: '常营乡', title: 'C' }
+          ],
+          town:[]
+        })
+
+        const text = ref('请选择地址')
+
+        const showAddress = () => {
+          showPopup.value = !showPopup.value;
+        };
+
+        const onChange = (cal) => {
+          const name = address[cal.next]
+          if (name.length < 1) {
+            showPopup.value = false;
+          }
+        };
+        const close = val => {
+          console.log(val);
+          text.value = val.data.addressStr;
+        };
+
+        return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
+    }
+  }
+</script>
 ```
+:::
 
 ### 选择已有地址
 
+:::demo
 ```html
+<template>
 <nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
 <nut-address
     v-model:visible="showPopupExist"
@@ -158,270 +175,287 @@ setup() {
     @selected="selected"
     exist-address-title="配送至"
 ></nut-address>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup() {
+        const showPopupExist = ref(false);
+        const existAddress = ref([
+          {
+            id: 1,
+            addressDetail: 'th ',
+            cityName: '石景山区',
+            countyName: '城区',
+            provinceName: '北京',
+            selectedAddress: true,
+            townName: ''
+          },{
+            id: 2,
+            addressDetail: '12_ ',
+            cityName: '电饭锅',
+            countyName: '扶绥县',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          },{
+            id: 3,
+            addressDetail: '发大水比 ',
+            cityName: '放到',
+            countyName: '广宁街道',
+            provinceName: '钓鱼岛全区',
+            selectedAddress: false,
+            townName: ''
+          },{
+            id: 4,
+            addressDetail: '还是想吧百度吧 ',
+            cityName: '研发',
+            countyName: '八里庄街道',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          }
+        ]);
+
+        const text = ref('请选择地址')
+
+        const showAddressExist = () => {
+          showPopupExist.value = true;
+        };
+
+        const close = val => {
+          if (val.type == 'exist') {
+            const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+            text.value = provinceName + cityName + countyName + townName + addressDetail;
+          } else {
+            text.value = val.data.addressStr;
+          }
+        };
+
+        const selected = (prevExistAdd, nowExistAdd, arr) => {
+          console.log(prevExistAdd);
+          console.log(nowExistAdd);
+        };
+
+        return { showPopupExist, existAddress, showAddressExist, text, close, selected };
+    }
+  }
+  </script>
 ```
-```javascript
-setup() {
-    const showPopupExist = ref(false);
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: 'th ',
-        cityName: '石景山区',
-        countyName: '城区',
-        provinceName: '北京',
-        selectedAddress: true,
-        townName: ''
-      },{
-        id: 2,
-        addressDetail: '12_ ',
-        cityName: '电饭锅',
-        countyName: '扶绥县',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      },{
-        id: 3,
-        addressDetail: '发大水比 ',
-        cityName: '放到',
-        countyName: '广宁街道',
-        provinceName: '钓鱼岛全区',
-        selectedAddress: false,
-        townName: ''
-      },{
-        id: 4,
-        addressDetail: '还是想吧百度吧 ',
-        cityName: '研发',
-        countyName: '八里庄街道',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      }
-    ]);
-
-    const text = ref('请选择地址')
-
-    const showAddressExist = () => {
-      showPopupExist.value = true;
-    };
-
-    const close = val => {
-      if (val.type == 'exist') {
-        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
-        text.value = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.value = val.data.addressStr;
-      }
-    };
-
-    const selected = (prevExistAdd, nowExistAdd, arr) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
-
-    return { showPopupExist, existAddress, showAddressExist, text, close, selected };
-}
-```
+:::
 ### 自定义图标
-
+:::demo
 ```html
-<nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
-<nut-address
-    v-model:visible="showPopupCustomImg"
-    type="exist"
-    :existAddress="existAddress"
-    @close="close"
-    :is-show-custom-address="false"
-    @selected="selected3"
-    :default-icon="defaultIcon"
-    :selected-icon="selectedIcon"
-    :close-btn-icon="closeBtnIcon"
-></nut-address>
-```
-```javascript
-setup() {
-    const showPopupCustomImg = ref(false);
-    const icon = reactive({
-      selectedIcon: 'heart-fill',
-      defaultIcon: 'heart1',
-      closeBtnIcon: 'close',
-      backBtnIcon: 'left'
-    });
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: 'th ',
-        cityName: '石景山区',
-        countyName: '城区',
-        provinceName: '北京',
-        selectedAddress: true,
-        townName: ''
-      },{
-        id: 2,
-        addressDetail: '12_ ',
-        cityName: '电饭锅',
-        countyName: '扶绥县',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      },{
-        id: 3,
-        addressDetail: '发大水比 ',
-        cityName: '放到',
-        countyName: '广宁街道',
-        provinceName: '钓鱼岛全区',
-        selectedAddress: false,
-        townName: ''
-      },{
-        id: 4,
-        addressDetail: '还是想吧百度吧 ',
-        cityName: '研发',
-        countyName: '八里庄街道',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      }
-    ]);
-
-    const text = ref('请选择地址')
-
-    const showCustomImg = () => {
-      showPopupCustomImg.value = true;
-    };
-
-    const close = val => {
-      if (val.type == 'exist') {
-        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
-        text.value = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.value = val.data.addressStr;
-      }
-    };
-
-    const selected = (prevExistAdd, nowExistAdd, arr) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
-
-    return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
-}
+<template>
+  <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
+  <nut-address
+      v-model:visible="showPopupCustomImg"
+      type="exist"
+      :existAddress="existAddress"
+      @close="close"
+      :is-show-custom-address="false"
+      @selected="selected3"
+      :default-icon="defaultIcon"
+      :selected-icon="selectedIcon"
+      :close-btn-icon="closeBtnIcon"
+  ></nut-address>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup() {
+        const showPopupCustomImg = ref(false);
+        const icon = reactive({
+          selectedIcon: 'heart-fill',
+          defaultIcon: 'heart1',
+          closeBtnIcon: 'close',
+          backBtnIcon: 'left'
+        });
+        const existAddress = ref([
+          {
+            id: 1,
+            addressDetail: 'th ',
+            cityName: '石景山区',
+            countyName: '城区',
+            provinceName: '北京',
+            selectedAddress: true,
+            townName: ''
+          },{
+            id: 2,
+            addressDetail: '12_ ',
+            cityName: '电饭锅',
+            countyName: '扶绥县',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          },{
+            id: 3,
+            addressDetail: '发大水比 ',
+            cityName: '放到',
+            countyName: '广宁街道',
+            provinceName: '钓鱼岛全区',
+            selectedAddress: false,
+            townName: ''
+          },{
+            id: 4,
+            addressDetail: '还是想吧百度吧 ',
+            cityName: '研发',
+            countyName: '八里庄街道',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          }
+        ]);
+
+        const text = ref('请选择地址')
+
+        const showCustomImg = () => {
+          showPopupCustomImg.value = true;
+        };
+
+        const close = val => {
+          if (val.type == 'exist') {
+            const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+            text.value = provinceName + cityName + countyName + townName + addressDetail;
+          } else {
+            text.value = val.data.addressStr;
+          }
+        };
+
+        const selected = (prevExistAdd, nowExistAdd, arr) => {
+          console.log(prevExistAdd);
+          console.log(nowExistAdd);
+        };
+
+        return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
+    }
+  }
+</script>
 ```
+:::
 ### 自定义地址与已有地址切换
-
+:::demo
 ```html
-<nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
-<nut-address
-    v-model:visible="showPopupOther"
-    type="exist"
-    :exist-address="existAddress"
-    :province="province"
-    :city="city"
-    :country="country"
-    :town="town"
-    :back-btn-icon="backBtnIcon"
-    @close="close"
-    @selected="selected"
-    custom-and-exist-title="选择其他地址"
-    @switch-module="switchModule"
-    @close-mask="closeMask"
-></nut-address>
-```
-```javascript
-setup() {
-    const showPopupOther = ref(false);
-    const address = reactive({
-      province:[
-        { id: 1, name: '北京' },
-        { id: 2, name: '广西' },
-        { id: 3, name: '江西' },
-        { id: 4, name: '四川' }
-      ],
-      city:[
-        { id: 7, name: '朝阳区' },
-        { id: 8, name: '崇文区' },
-        { id: 9, name: '昌平区' },
-        { id: 6, name: '石景山区' }
-      ],
-      country:[
-        { id: 3, name: '八里庄街道' },
-        { id: 9, name: '北苑' },
-        { id: 4, name: '常营乡' }
-      ],
-      town:[]
-    })
-    const existAddress = ref([
-      {
-        id: 1,
-        addressDetail: 'th ',
-        cityName: '石景山区',
-        countyName: '城区',
-        provinceName: '北京',
-        selectedAddress: true,
-        townName: ''
-      },
-      {
-        id: 2,
-        addressDetail: '12_ ',
-        cityName: '电饭锅',
-        countyName: '扶绥县',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 3,
-        addressDetail: '发大水比 ',
-        cityName: '放到',
-        countyName: '广宁街道',
-        provinceName: '钓鱼岛全区',
-        selectedAddress: false,
-        townName: ''
-      },
-      {
-        id: 4,
-        addressDetail: '还是想吧百度吧 ',
-        cityName: '研发',
-        countyName: '八里庄街道',
-        provinceName: '北京',
-        selectedAddress: false,
-        townName: ''
-      }
-    ]);
-    const backBtnIcon = ref('left')
-    const text = ref('请选择地址')
-
-    const showAddressOther = () => {
-      showPopupOther.value = true;
-    };
-
-    const close = val => {
-      if (val.type == 'exist') {
-        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
-        text.value = provinceName + cityName + countyName + townName + addressDetail;
-      } else {
-        text.value = val.data.addressStr;
-      }
-    };
-
-    const selected = (prevExistAdd, nowExistAdd, arr) => {
-      console.log(prevExistAdd);
-      console.log(nowExistAdd);
-    };
-
-    const switchModule = cal => {
-      if (cal.type == 'custom') {
-        console.log('点击了“选择其他地址”按钮');
-      } else {
-        console.log('点击了自定义地址左上角的返回按钮');
-      }
-    };
-
-    const closeMask = val => {
-      console.log('关闭弹层', val);
-    };
-
-    return { showPopupOther, text, showAddressOther, switchModule, closeMask, close, selected, backBtnIcon, ...toRefs(address) };
-}
+<template>
+  <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
+  <nut-address
+      v-model:visible="showPopupOther"
+      type="exist"
+      :exist-address="existAddress"
+      :province="province"
+      :city="city"
+      :country="country"
+      :town="town"
+      :back-btn-icon="backBtnIcon"
+      @close="close"
+      @selected="selected"
+      custom-and-exist-title="选择其他地址"
+      @switch-module="switchModule"
+      @close-mask="closeMask"
+  ></nut-address>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup() {
+        const showPopupOther = ref(false);
+        const address = reactive({
+          province:[
+            { id: 1, name: '北京' },
+            { id: 2, name: '广西' },
+            { id: 3, name: '江西' },
+            { id: 4, name: '四川' }
+          ],
+          city:[
+            { id: 7, name: '朝阳区' },
+            { id: 8, name: '崇文区' },
+            { id: 9, name: '昌平区' },
+            { id: 6, name: '石景山区' }
+          ],
+          country:[
+            { id: 3, name: '八里庄街道' },
+            { id: 9, name: '北苑' },
+            { id: 4, name: '常营乡' }
+          ],
+          town:[]
+        })
+        const existAddress = ref([
+          {
+            id: 1,
+            addressDetail: 'th ',
+            cityName: '石景山区',
+            countyName: '城区',
+            provinceName: '北京',
+            selectedAddress: true,
+            townName: ''
+          },
+          {
+            id: 2,
+            addressDetail: '12_ ',
+            cityName: '电饭锅',
+            countyName: '扶绥县',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          },
+          {
+            id: 3,
+            addressDetail: '发大水比 ',
+            cityName: '放到',
+            countyName: '广宁街道',
+            provinceName: '钓鱼岛全区',
+            selectedAddress: false,
+            townName: ''
+          },
+          {
+            id: 4,
+            addressDetail: '还是想吧百度吧 ',
+            cityName: '研发',
+            countyName: '八里庄街道',
+            provinceName: '北京',
+            selectedAddress: false,
+            townName: ''
+          }
+        ]);
+        const backBtnIcon = ref('left')
+        const text = ref('请选择地址')
+
+        const showAddressOther = () => {
+          showPopupOther.value = true;
+        };
+
+        const close = val => {
+          if (val.type == 'exist') {
+            const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+            text.value = provinceName + cityName + countyName + townName + addressDetail;
+          } else {
+            text.value = val.data.addressStr;
+          }
+        };
+
+        const selected = (prevExistAdd, nowExistAdd, arr) => {
+          console.log(prevExistAdd);
+          console.log(nowExistAdd);
+        };
+
+        const switchModule = cal => {
+          if (cal.type == 'custom') {
+            console.log('点击了“选择其他地址”按钮');
+          } else {
+            console.log('点击了自定义地址左上角的返回按钮');
+          }
+        };
+
+        const closeMask = val => {
+          console.log('关闭弹层', val);
+        };
+
+        return { showPopupOther, text, existAddress,showAddressOther, switchModule, closeMask, close, selected, backBtnIcon, ...toRefs(address) };
+    }
+  }
+  </script>
 ```
+:::
 # API
 
 | 字段 | 说明 | 类型 | 默认值

src/packages/__VUE/countdown/doc.md

@@ -19,141 +19,244 @@ app.use(CountDown);
 
 ### 基础用法
 
+:::demo
 ```html
-<nut-countdown :end-time="end" ></nut-countdown>
-```
+<template>
+  <nut-cell>
+    <nut-countdown :end-time="end" ></nut-countdown>
+  </nut-cell>
+</template>
+
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+        end: Date.now() + 50 * 1000,
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
 
-``` javascript
-setup() {
-  const state = reactive({
-      end: Date.now() + 50 * 1000,
-    });
-  return {
-    ...toRefs(state)
-  };
-}
 ```
+:::
 
 ### 显示天
 
+:::demo
 ```html
-<nut-countdown :end-time="end" show-days ></nut-countdown>
+<template>
+  <nut-cell>
+    <nut-countdown :end-time="end" show-days ></nut-countdown>
+  </nut-cell>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+        end: Date.now() + 50 * 1000,
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
 ```
+:::
+
+
 
 ### 以服务端的时间为准
 
+:::demo
 ```html
-<nut-countdown  :start-time="serverTime" :end-time="end" show-days ></nut-countdown>
-```
+<template>
+  <nut-cell>
+    <nut-countdown  :start-time="serverTime" :end-time="end" show-days ></nut-countdown>
+  </nut-cell>
+</template>
 
-``` javascript
-setup() {
-  const state = reactive({
-      serverTime: Date.now() - 30 * 1000,
-      end: Date.now() + 50 * 1000,
-    });
-  return {
-    ...toRefs(state)
-  };
-}
-```
 
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+          serverTime: Date.now() - 30 * 1000,
+          end: Date.now() + 50 * 1000,
+        });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
+```
+:::
 ### 显示为 天时分秒
 
+:::demo
 ```html
-<nut-countdown show-days show-plain-text  :end-time="end"></nut-countdown>
-```
-``` javascript
-setup() {
-  const state = reactive({
-      end: Date.now() + 50 * 1000,
-    });
-  return {
-    ...toRefs(state)
-  };
-}
+<template>
+  <nut-cell>
+    <nut-countdown show-days show-plain-text  :end-time="end"></nut-countdown>
+  </nut-cell>
+</template>
+
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+          end: Date.now() + 50 * 1000,
+        });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
 ```
+:::
 
 ### 异步更新结束时间
 
+:::demo
 ```html
-<nut-countdown  show-days show-plain-text  :end-time="asyncEnd" ></nut-countdown>
-```
-``` javascript
-setup() {
-  const state = reactive({
-      asyncEnd: 0,
-    });
-  return {
-    ...toRefs(state)
-  };
-}
+<template>
+  <nut-cell>
+    <nut-countdown  show-days show-plain-text  :end-time="asyncEnd" ></nut-countdown>
+  </nut-cell>
+</template>
+
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+          asyncEnd: 0,
+        });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
 ```
+:::
 
 ### 控制开始和暂停的倒计时
 
+:::demo
 ```html
-<nut-cell>
-    <nut-countdown  :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
-    <div style="position:absolute;right:10px;top:9px">
-        <nut-button type="primary" size='small' @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
-    </div>
-</nut-cell>
-```
-``` javascript
-setup() {
-  const state = reactive({
-      paused: false,
-      end: Date.now() + 50 * 1000,
-    });
-
-    const toggle = ()=> {
-      state.paused = !state.paused;
-    }
-    const onpaused = (v)=> {
-      console.log('paused: ', v);
-    }
-    const onrestart = (v)=> {
-      console.log('restart: ', v);
+<template>
+  <nut-cell>
+      <nut-countdown  :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
+      <div style="position:absolute;right:10px;top:9px">
+          <nut-button type="primary" size='small' @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+      </div>
+  </nut-cell>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+        paused: false,
+        end: Date.now() + 50 * 1000,
+      });
+
+      const toggle = ()=> {
+        state.paused = !state.paused;
+      }
+      const onpaused = (v)=> {
+        console.log('paused: ', v);
+      }
+      const onrestart = (v)=> {
+        console.log('restart: ', v);
+      }
+      return {
+          toggle,
+          onpaused,
+          onrestart,
+        ...toRefs(state)
+      };
     }
-  return {
-      toggle,
-      onpaused,
-      onrestart,
-    ...toRefs(state)
-  };
-}
+  }
+</script>
+
 ```
+:::
+
 ### 自定义展示
 
+:::demo
 ```html
-<nut-countdown v-model="resetTime" :endTime="end">
-    <div class="countdown-part-box">
-        <div class="part-item-symbol"> resetTime.d 天</div>
-        <div class="part-item h"> resetTime.h </div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item m"> resetTime.m </div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item s"> resetTime.s </div>
-    </div>
-</nut-countdown>
-```
-``` javascript
-setup() {
-  const state = reactive({
-      end: Date.now() + 50 * 1000,
-      resetTime: {
-        d: '1',
-        h: '00',
-        m: '00',
-        s: '00'
-      }
-    });
-  return {
-    ...toRefs(state)
-  };
+<template>
+  <nut-cell>
+      <nut-countdown v-model="resetTime" :endTime="end">
+          <div class="countdown-part-box">
+              <div class="part-item-symbol">{{ resetTime.d }}天</div>
+            <div class="part-item h">{{ resetTime.h }}</div>
+            <span class="part-item-symbol">:</span>
+            <div class="part-item m">{{ resetTime.m }}</div>
+            <span class="part-item-symbol">:</span>
+            <div class="part-item s">{{ resetTime.s }}</div>
+          </div>
+      </nut-countdown>
+  </nut-cell>
+</template>
+<script>
+  import { ref,reactive,toRefs } from 'vue';
+  export default {
+    setup(props) {
+      const state = reactive({
+          end: Date.now() + 50 * 1000,
+          resetTime: {
+            d: '1',
+            h: '00',
+            m: '00',
+            s: '00'
+          }
+        });
+      return {
+        ...toRefs(state)
+      };
+    }
+  }
+</script>
+<style lang="scss" scoped>
+.countdown-part-box {
+  display: flex;
+  align-items: center;
+
+  .part-item {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 25px;
+    background: #e8220e;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 6px;
+  }
+
+  .part-item-symbol {
+    margin: 0 5px;
+  }
 }
+</style>
+
 ```
+:::
+
 
 ### API
 

src/packages/__VUE/infiniteloading/doc.md

@@ -18,8 +18,12 @@
     
 ### 基础用法
 
+
+:::demo
+
 ```html
-<ul class="infiniteUl" id="scroll"  style='height: 300px;'>
+<template>
+  <ul class="infiniteUl" id="scroll"  style='height: 300px;'>
     <nut-infiniteloading
         containerId = 'scroll'
         :use-window='false'
@@ -28,142 +32,213 @@
     >
         <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
     </nut-infiniteloading>
-</ul>
-```
-```javascript
-setup() {
-    const hasMore = ref(true);
-    const data = reactive({
-      defultList: []
-    });
-    const loadMore = done => {  
-      setTimeout(() => {
-        const curLen = data.defultList.length;
-        for (let i = curLen; i < curLen + 10; i++) {
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  export default {
+    setup(props) {
+      const hasMore = ref(true);
+      const data = reactive({
+        defultList: []
+      });
+      const loadMore = done => {  
+        setTimeout(() => {
+          const curLen = data.defultList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.defultList.push(`${i}`);
+          }
+          if (data.defultList.length > 30) hasMore.value = false;
+          done()
+        }, 500);
+      };
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
           data.defultList.push(`${i}`);
         }
-        if (data.defultList.length > 30) hasMore.value = false;
-        done()
-      }, 500);
-    };
-    const init = () => {
-      for (let i = 0; i < 10; i++) {
-        data.defultList.push(`${i}`);
       }
+      onMounted(() => {
+        init()
+      });
+      return { loadMore, hasMore, ...toRefs(data) };
     }
-    onMounted(() => {
-      init()
-    });
-    return { loadMore, hasMore, ...toRefs(data) };
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
 }
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+</style>
 ```
+:::
 ### 下拉刷新
 
+:::demo
+
 ```html
-<ul class="infiniteUl" id="refreshScroll" style='height: 300px;'>
-  <nut-infiniteloading
-    pull-icon="JD"
-    container-id="refreshScroll"
-    :use-window="false"
-    :is-open-refresh="true"
-    :has-more="refreshHasMore"
-    @load-more="refreshLoadMore"
-    @refresh="refresh"
-  >
-    <li
-      class="infiniteLi"
-      v-for="(item, index) in refreshList"
-      :key="index"
-      >{{ item }}</li
+<template>
+  <ul class="infiniteUl" id="refreshScroll" style='height: 300px;'>
+    <nut-infiniteloading
+      pull-icon="JD"
+      container-id="refreshScroll"
+      :use-window="false"
+      :is-open-refresh="true"
+      :has-more="refreshHasMore"
+      @load-more="refreshLoadMore"
+      @refresh="refresh"
     >
-  </nut-infiniteloading>
-</ul>
-```
-```javascript
-setup() {
-    const refreshHasMore = ref(true);
-    const data = reactive({
-      refreshList: []
-    });
-    const refreshLoadMore = done => {
-      setTimeout(() => {
-        const curLen = data.refreshList.length;
-        for (let i = curLen; i < curLen + 10; i++) {
-          data.refreshList.push(
-            `${i}`
-          );
+      <li
+        class="infiniteLi"
+        v-for="(item, index) in refreshList"
+        :key="index"
+        >{{ item }}</li
+      >
+    </nut-infiniteloading>
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  export default {
+    setup(props) {
+      const refreshHasMore = ref(true);
+      const data = reactive({
+        refreshList: []
+      });
+      const refreshLoadMore = done => {
+        setTimeout(() => {
+          const curLen = data.refreshList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.refreshList.push(
+              `${i}`
+            );
+          }
+          if (data.refreshList.length > 30) refreshHasMore.value = false;
+          done()
+        }, 500);
+      };
+
+      const refresh = (done) => {
+        setTimeout(()=>{
+          Toast.success('刷新成功');
+          done()
+        },1000)
+      }
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
+          data.refreshList.push(`${i}`);
         }
-        if (data.refreshList.length > 30) refreshHasMore.value = false;
-        done()
-      }, 500);
-    };
-
-    const refresh = (done) => {
-      setTimeout(()=>{
-        Toast.success('刷新成功');
-        done()
-      },1000)
-    }
-    const init = () => {
-      for (let i = 0; i < 10; i++) {
-        data.refreshList.push(`${i}`);
       }
+      onMounted(() => {
+        init()
+      });
+      return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };
     }
-    onMounted(() => {
-      init()
-    });
-    return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
 }
+</style>
 ```
+:::
 ### 自定义加载文案
+:::demo
 
 ```html
-<ul class="infiniteUl" id="customScroll" style='height: 300px;'>
+<template>
+  <ul class="infiniteUl" id="customScroll">
     <nut-infiniteloading
-        container-id = 'customScroll'
-        :use-window='false'
-        :has-more="customHasMore"
-        @load-more="customLoadMore"
+      load-txt="loading"
+      load-more-txt="没有啦～"
+      container-id="customScroll"
+      :use-window="false"
+      :has-more="customHasMore"
+      @load-more="customLoadMore"
     >
-        <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{item}}</li>
-        <template v-slot:loading>
-            <div class="loading">
-                <span>加载中...</span>
-            </div>
-        </template>
-        <template v-slot:unloadMore>
-            <div class="unload-more">没有数据啦 ~~</div>
-        </template>
+      <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
     </nut-infiniteloading>
-</ul>
-```
-```javascript
-setup() {
-    const customHasMore = ref(true);
-    const data = reactive({
-      customList: ['']
-    });
-    const customLoadMore = done => {
-      setTimeout(() => {
-        const curLen = data.customList.length;
-        for (let i = curLen; i < curLen + 10; i++) {
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  export default {
+    setup(props) {
+      const customHasMore = ref(true);
+      const data = reactive({
+        customList: ['']
+      });
+      const customLoadMore = done => {
+        setTimeout(() => {
+          const curLen = data.customList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.customList.push(`${i}`);
+          }
+          if (data.customList.length > 30) customHasMore.value = false;
+          done()
+        }, 500);
+      };
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
           data.customList.push(`${i}`);
         }
-        if (data.customList.length > 30) customHasMore.value = false;
-        done()
-      }, 500);
-    };
-    const init = () => {
-      for (let i = 0; i < 10; i++) {
-        data.customList.push(`${i}`);
       }
+      onMounted(() => {
+        init()
+      });
+      return { customHasMore, customLoadMore,...toRefs(data) };
     }
-    onMounted(() => {
-      init()
-    });
-    return { customHasMore, customLoadMore,...toRefs(data) };
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
 }
+</style>
 ```
+:::
 
 ## API
 

src/packages/__VUE/noticebar/doc.md

@@ -21,111 +21,158 @@ app.use(NoticeBar);
 
 ```
 
-#
+
 ### 基本用法
 
+:::demo
+
 ```html
-    <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-    ></nut-noticebar>
+<template>
+  <nut-noticebar text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"></nut-noticebar>
+</template>
+
 ```
+:::
 ### 禁用滚动
 文字内容多于一行时，可通过scrollable参数控制是否开启滚动
+
+:::demo
+
 ```html
-    <nut-noticebar
+<template>
+  <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
       :scrollable="false"
     ></nut-noticebar>
+</template>
+
 ```
+:::
+
 ### 通告栏模式--关闭模式
+
+:::demo
+
 ```html
-    <nut-noticebar
+<template>
+  <nut-noticebar
       :closeMode="true"
       @click="hello"
     >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
     </nut-noticebar>
+</template>
+
 ```
+:::
+
+
 ### 通告栏模式--链接模式
+
+:::demo
 ```html
+<template>
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :scrollable="false"
     >
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
+</template>
 ```
-
+:::
 ### 纵向滚动
-
+:::demo
 ```html
-<nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000'  @click='go' :closeMode="true"></nut-noticebar>
-```
-```javascript
-data() {
-    return {
-        horseLamp1: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-    };
-},
-
-methods:{
-    go(item){
+<template>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000'  @click='go' :closeMode="true"></nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp1 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      const go = (item) => {
         console.log(item)
+      }
+      return { horseLamp1 };
     }
-}
+  }
+</script>
 ```
 
+:::
 
 ### 复杂滚动动画
 
+:::demo
 ```html
-<nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true'></nut-noticebar>
-```
-```javascript
-data() {
-    return {
-        horseLamp2: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-    };
-}
+<template>
+    <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true'></nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp2 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      return { horseLamp2 };
+    }
+  }
+</script>
 ```
+:::
 
 ### 自定义滚动内容
 
+:::demo
 ```html
-<nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]"  @close='go'>
-  <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
-</nut-noticebar>
-```
-```javascript
-data() {
-    return {
-        horseLamp3: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-    };
-}
+<template>
+    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]"  @close='go'>
+      <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
+    </nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp3 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      return { horseLamp3 };
+    }
+  }
+</script>
 ```
-
+:::
 
 ### 纵向自定义右侧图标
 
+:::demo
 ```html
-<nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
-  <template v-slot:rightIcon>
-    <nut-icon 
-      type="trolley" 
-      color="#f0250f"
-    >
-    </nut-icon>
-
-  </template>
-</nut-noticebar>
-```
-```javascript
-data() {
-    return {
-        horseLamp1: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-    };
-}
+<template>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
+      <template v-slot:rightIcon>
+        <nut-icon 
+          type="trolley" 
+          color="#f0250f"
+        >
+        </nut-icon>
+
+      </template>
+    </nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp1 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      return { horseLamp1 };
+    }
+  }
+</script>
 ```
-
+:::
 
 
 ### Prop

src/packages/__VUE/noticebar/index.vue

@@ -20,7 +20,7 @@
           @animationend="onAnimationEnd"
           @webkitAnimationEnd="onAnimationEnd"
         >
-          <slot>1{{ text }}</slot>
+          <slot>{{ text }}</slot>
         </view>
       </view>
       <view v-if="closeMode" class="right-icon" @click.stop="onClickIcon">