Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/address/demo.vue

@@ -67,7 +67,7 @@
       :is-show-custom-address="false"
       @selected="selected"
     >
-      <template #unselectedIcon>
+      <template #unselected-icon>
         <Heart1 style="margin-right: 8px"></Heart1>
       </template>
       <template #icon>

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

@@ -323,7 +323,7 @@ If you want to select a province, you need to set the region ID in the order of
       :is-show-custom-address="false"
       @selected="selected3"
   >
-    <template #unselectedIcon>
+    <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
     </template>
     <template #icon>
@@ -589,9 +589,9 @@ If you want to select a province, you need to set the region ID in the order of
 |----- | ----- |  
 | bottom | Bottom slot |  
 | icon | Selected icon slot |  
-| unselectedIcon | Unselected icon slot |  
-| closeIcon | Close icon slot |  
-| backIcon | Change icon slot |  
+| unselected-icon | Unselected icon slot |  
+| close-icon | Close icon slot |  
+| back-icon | Change icon slot |  
     
 ## Theming
 

src/packages/__VUE/address/doc.md

@@ -325,7 +325,7 @@ app.use(Address);
       :is-show-custom-address="false"
       @selected="selected3"
   >
-    <template #unselectedIcon>
+    <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
     </template>
     <template #icon>
@@ -615,9 +615,9 @@ app.use(Address);
 |----- | ----- |  
 | bottom | 可自定义底部 |  
 | icon | 自定义选中项的图标 |  
-| unselectedIcon | 未选中地址时的图标 |  
-| closeIcon | 关闭弹层的图标 |  
-| backIcon | 自定义地址与已有地址切换时返回的图标 | 
+| unselected-icon | 未选中地址时的图标 |  
+| close-icon | 关闭弹层的图标 |  
+| back-icon | 自定义地址与已有地址切换时返回的图标 | 
 
 
 ## 主题定制

src/packages/__VUE/address/doc.taro.md

@@ -325,7 +325,7 @@ app.use(Address);
       :is-show-custom-address="false"
       @selected="selected3"
   >
-    <template #unselectedIcon>
+    <template #unselected-icon>
       <Heart1 style="margin-right:8px"></Heart1>
     </template>
     <template #icon>
@@ -616,9 +616,9 @@ app.use(Address);
 |----- | ----- |  
 | bottom | 可自定义底部 |  
 | icon | 自定义选中项的图标 |  
-| unselectedIcon | 未选中地址时的图标 |  
-| closeIcon | 关闭弹层的图标 |  
-| backIcon | 自定义地址与已有地址切换时返回的图标 | 
+| unselected-icon | 未选中地址时的图标 |  
+| close-icon | 关闭弹层的图标 |  
+| back-icon | 自定义地址与已有地址切换时返回的图标 | 
 
 ## 主题定制
 

src/packages/__VUE/address/index.taro.vue

@@ -10,7 +10,7 @@
     <view class="nut-address">
       <view class="nut-address__header">
         <view class="nut-address__header-back" @click="switchModule">
-          <slot name="backIcon">
+          <slot name="back-icon">
             <Left v-show="type == 'exist' && privateType == 'custom'"></Left>
           </slot>
         </view>
@@ -24,7 +24,7 @@
         </view>
 
         <view class="nut-address__header-close" @click="handClose('cross')">
-          <slot name="closeIcon">
+          <slot name="close-icon">
             <Close color="#cccccc" size="18px"></Close>
           </slot>
         </view>
@@ -85,7 +85,7 @@
               :key="index"
               @click="selectedExist(item)"
             >
-              <slot name="unselectedIcon" v-if="!item.selectedAddress">
+              <slot name="unselected-icon" v-if="!item.selectedAddress">
                 <Location2 class="nut-address-select-icon" width="13px"></Location2>
               </slot>
 

src/packages/__VUE/address/index.vue

@@ -12,7 +12,7 @@
     <view class="nut-address">
       <view class="nut-address__header">
         <view class="nut-address__header-back" @click="switchModule">
-          <slot name="backIcon">
+          <slot name="back-icon">
             <Left v-show="type == 'exist' && privateType == 'custom'"></Left>
           </slot>
         </view>
@@ -26,7 +26,7 @@
         </view>
 
         <view class="nut-address__header-close" @click="handClose('cross')">
-          <slot name="closeIcon">
+          <slot name="close-icon">
             <Close color="#cccccc" size="18px"></Close>
           </slot>
         </view>
@@ -86,7 +86,7 @@
               :key="index"
               @click="selectedExist(item)"
             >
-              <slot name="unselectedIcon" v-if="!item.selectedAddress">
+              <slot name="unselected-icon" v-if="!item.selectedAddress">
                 <Location2 class="nut-address-select-icon" width="13px"></Location2>
               </slot>
 

src/packages/__VUE/addresslist/components/GeneralShell.taro.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="nut-address-list-general" v-if="!swipeEdition">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
-      <template v-slot:contentTop>
-        <slot name="contentInfo"></slot>
+      <template #content-top>
+        <slot name="content-info"></slot>
       </template>
-      <template v-slot:contentIcon>
-        <slot name="contentIcons"></slot>
+      <template #content-icon>
+        <slot name="content-icons"></slot>
       </template>
-      <template v-slot:contentAddr>
-        <slot name="contentAddrs"></slot>
+      <template #content-addr>
+        <slot name="content-addrs"></slot>
       </template>
     </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
-      <slot name="longpressAll">
+      <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
@@ -23,19 +23,19 @@
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">
       <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
+        <template #content-top>
+          <slot name="content-info"></slot>
         </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
+        <template #content-icon>
+          <slot name="content-icons"></slot>
         </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
+        <template #content-addr>
+          <slot name="content-addrs"></slot>
         </template>
       </component>
     </div>
     <template #right>
-      <slot name="swiperightbtn">
+      <slot name="swipe-right-btn">
         <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
       </slot>
     </template>

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="nut-address-list-general" v-if="!swipeEdition">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
-      <template v-slot:contentTop>
-        <slot name="contentInfo"></slot>
+      <template #content-top>
+        <slot name="content-info"></slot>
       </template>
-      <template v-slot:contentIcon>
-        <slot name="contentIcons"></slot>
+      <template #content-icon>
+        <slot name="content-icons"></slot>
       </template>
-      <template v-slot:contentAddr>
-        <slot name="contentAddrs"></slot>
+      <template #content-addr>
+        <slot name="content-addrs"></slot>
       </template>
     </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
-      <slot name="longpressAll">
+      <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
@@ -23,19 +23,19 @@
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">
       <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
+        <template #content-top>
+          <slot name="content-info"></slot>
         </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
+        <template #content-icon>
+          <slot name="content-icons"></slot>
         </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
+        <template #content-addr>
+          <slot name="content-addrs"></slot>
         </template>
       </component>
     </div>
     <template #right>
-      <slot name="swiperightbtn">
+      <slot name="swipe-right-btn">
         <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
       </slot>
     </template>

src/packages/__VUE/addresslist/components/ItemContents.taro.vue

@@ -2,7 +2,7 @@
   <div class="nut-address-list-item" @click="contentsClick">
     <div class="nut-address-list-item__info">
       <div class="nut-address-list-item__info-contact">
-        <slot name="contentTop">
+        <slot name="content-top">
           <div class="nut-address-list-item__info-contact-name">{{ item.addressName }}</div>
           <div class="nut-address-list-item__info-contact-tel">{{ item.phone }}</div>
           <div class="nut-address-list-item__info-contact-default" v-if="item.defaultAddress">{{
@@ -11,14 +11,14 @@
         </slot>
       </div>
       <div class="nut-address-list-item__info-handle">
-        <slot name="contentIcon">
+        <slot name="content-icon">
           <Del name="del" class="nut-address-list-item__info-handle-del" @click="delClick"></Del>
           <Edit name="edit" class="nut-address-list-item__info-handle-edit" @click="editClick"></Edit>
         </slot>
       </div>
     </div>
     <div class="nut-address-list-item__addr">
-      <slot name="contentAddr">
+      <slot name="content-addr">
         {{ item.fullAddress }}
       </slot>
     </div>

src/packages/__VUE/addresslist/components/ItemContents.vue

@@ -2,7 +2,7 @@
   <div class="nut-address-list-item" @click="contentsClick">
     <div class="nut-address-list-item__info">
       <div class="nut-address-list-item__info-contact">
-        <slot name="contentTop">
+        <slot name="content-top">
           <div class="nut-address-list-item__info-contact-name">{{ item.addressName }}</div>
           <div class="nut-address-list-item__info-contact-tel">{{ item.phone }}</div>
           <div class="nut-address-list-item__info-contact-default" v-if="item.defaultAddress">{{
@@ -11,14 +11,14 @@
         </slot>
       </div>
       <div class="nut-address-list-item__info-handle">
-        <slot name="contentIcon">
+        <slot name="content-icon">
           <Del name="del" class="nut-address-list-item__info-handle-del" @click="delClick"></Del>
           <Edit name="edit" class="nut-address-list-item__info-handle-edit" @click="editClick"></Edit>
         </slot>
       </div>
     </div>
     <div class="nut-address-list-item__addr">
-      <slot name="contentAddr">
+      <slot name="content-addr">
         {{ item.fullAddress }}
       </slot>
     </div>

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

@@ -261,11 +261,11 @@ The `AddressList` component is divided into several areas by default, and these
 
 | Name          | Description                                     | Illustrate  |
 | ------------- | ----------------------------------------------- | ----------- |
-| iteminfos     | Address list item name/contact/default one line | public      |
+| item-infos     | Address list item name/contact/default one line | public      |
 | itemicon      | address list item icon                          | public      |
 | itemaddr      | Address list item detailed address              | public      |
-| swiperight    | Address list item right swipe area              | Use with swipe |
-| longpressbtns | Address list item long press to mask content    | Use with long press |
+| swipe-right    | Address list item right swipe area              | Use with swipe |
+| longpress-btns | Address list item long press to mask content    | Use with long press |
 
 ### Each item in the data array is smoothed with the parameters of the dataOptions object
 

src/packages/__VUE/addresslist/doc.md

@@ -262,11 +262,11 @@ export default {
 
 | 名称        | 说明                             | 说明           |
 | ------------- | -------------------------------- | -------------- |
-| iteminfos     | 地址列表项姓名/联系方式/默认一行 | 公共           |
+| item-infos     | 地址列表项姓名/联系方式/默认一行 | 公共           |
 | itemicon      | 地址列表项图标                   | 公共           |
 | itemaddr      | 地址列表项详细地址               | 公共           |
-| swiperight    | 地址列表项右滑区域               | 滑动功能下使用 |
-| longpressbtns | 地址列表项长按遮罩内容           | 长按功能下使用 |
+| swipe-right    | 地址列表项右滑区域               | 滑动功能下使用 |
+| longpress-btns | 地址列表项长按遮罩内容           | 长按功能下使用 |
 
 ### data 数组中每一项 与 dataOptions 对象的参数磨平
 

src/packages/__VUE/addresslist/doc.taro.md

@@ -262,11 +262,11 @@ export default {
 
 | 名称          | 说明                             | 说明           |
 | ------------- | -------------------------------- | -------------- |
-| iteminfos     | 地址列表项姓名/联系方式/默认一行 | 公共           |
+| item-infos     | 地址列表项姓名/联系方式/默认一行 | 公共           |
 | itemicon      | 地址列表项图标                   | 公共           |
 | itemaddr      | 地址列表项详细地址               | 公共           |
-| swiperight    | 地址列表项右滑区域               | 滑动功能下使用 |
-| longpressbtns | 地址列表项长按遮罩内容           | 长按功能下使用 |
+| swipe-right    | 地址列表项右滑区域               | 滑动功能下使用 |
+| longpress-btns | 地址列表项长按遮罩内容           | 长按功能下使用 |
 
 ### data 数组中每一项 与 dataOptions 对象的参数磨平
 

src/packages/__VUE/addresslist/index.taro.vue

@@ -14,20 +14,20 @@
       @longSet="clickLongSet"
       @longDel="clickLongDel"
     >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
+      <template #content-info>
+        <slot name="item-infos"></slot>
       </template>
-      <template v-slot:contentIcons>
-        <slot name="itemicon"></slot>
+      <template #content-icons>
+        <slot name="item-icon"></slot>
       </template>
-      <template v-slot:contentAddrs>
-        <slot name="itemaddr"></slot>
+      <template #content-addrs>
+        <slot name="item-addr"></slot>
       </template>
-      <template v-slot:longpressAll v-if="longPress">
-        <slot name="longpressbtns"></slot>
+      <template #longpress-all v-if="longPress">
+        <slot name="longpress-btns"></slot>
       </template>
-      <template v-slot:swiperightbtn v-if="swipeEdition">
-        <slot name="swiperight"></slot>
+      <template #swipe-right-btn v-if="swipeEdition">
+        <slot name="swipe-right"></slot>
       </template>
     </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">

src/packages/__VUE/addresslist/index.vue

@@ -14,20 +14,20 @@
       @longSet="clickLongSet"
       @longDel="clickLongDel"
     >
-      <template v-slot:contentInfo>
-        <slot name="iteminfos"></slot>
+      <template #content-info>
+        <slot name="item-infos"></slot>
       </template>
-      <template v-slot:contentIcons>
+      <template #content-icons>
         <slot name="itemicon"></slot>
       </template>
-      <template v-slot:contentAddrs>
+      <template #content-addrs>
         <slot name="itemaddr"></slot>
       </template>
-      <template v-slot:longpressAll v-if="longPress">
-        <slot name="longpressbtns"></slot>
+      <template #longpress-all v-if="longPress">
+        <slot name="longpress-btns"></slot>
       </template>
-      <template v-slot:swiperightbtn v-if="swipeEdition">
-        <slot name="swiperight"></slot>
+      <template #swipe-right-btn v-if="swipeEdition">
+        <slot name="swipe-right"></slot>
       </template>
     </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">

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

@@ -181,7 +181,7 @@ app.use(InfiniteLoading);
 |--------|----------------|
 | default  | Custom content |
 | loading  | Loading text |
-| loadingIcon  | Custom loading icon |
+| loading-icon  | Custom loading icon |
 | finished  | Finished text |
 
 ## Theming

src/packages/__VUE/infiniteloading/doc.md

@@ -182,7 +182,7 @@ app.use(InfiniteLoading);
 |--------|----------------|
 | default  | 自定义加载内容 |
 | loading  | 自定义底部加载中提示 |
-| loadingIcon  | 自定义底部加载中图标 |
+| loading-icon  | 自定义底部加载中图标 |
 | finished  | 自定义加载完成后的提示文案 |
 
 

src/packages/__VUE/infiniteloading/index.vue

@@ -8,7 +8,7 @@
       <template v-if="isInfiniting">
         <view class="nut-infinite__bottom-box">
           <slot name="loading">
-            <slot name="loadIcon"><Loading class="nut-icon-loading nut-infinite__bottom-box__img"></Loading></slot>
+            <slot name="loading-icon"><Loading class="nut-icon-loading nut-infinite__bottom-box__img"></Loading></slot>
             <view class="nut-infinite__bottom-box__text">{{ loadTxt || translate('loading') }}</view>
           </slot>
         </view>

src/packages/__VUE/noticebar/demo.vue

@@ -66,7 +66,7 @@
     <h2>{{ translate('customRightIcon') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
-        <template v-slot:rightIcon>
+        <template #right-icon>
           <Fabulous />
         </template>
       </nut-noticebar>

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

@@ -40,7 +40,7 @@ Scrolling is automatically enabled when the content length of the notification b
 
 ```html
 <template>
-  <nut-noticebar text="Nutui is a mobile terminal component library." :scrollable="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+  <nut-noticebar text="Nutui is a mobile terminal component library." :scrollable="true" ></nut-noticebar>
 
   <nut-noticebar
       text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
@@ -60,16 +60,13 @@ Scrolling is automatically enabled when the content length of the notification b
 
 ```html
 <template>
-  <nut-noticebar :close-mode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+  <nut-noticebar :close-mode="true" >
     Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
   </nut-noticebar>
  
   <nut-noticebar
       :close-mode="true"
-      right-icon="circle-close"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-      >
+      right-icon="circle-close">
       Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
   </nut-noticebar>
 
@@ -100,9 +97,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
   <nut-noticebar
       text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
       wrapable
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    ></nut-noticebar>
+      ></nut-noticebar>
 </template>
 ```
 
@@ -120,9 +115,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
       :speed='10' 
       :standTime='1000' 
       @click='go' 
-      :close-mode="true" 
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`">
+      :close-mode="true">
   </nut-noticebar>
 </template>
 
@@ -148,7 +141,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 ```html
 <template>
-  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true' ></nut-noticebar>
 </template>
 
 <script>
@@ -170,7 +163,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 ```html
 <template>
-    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]"  :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" >
       <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
     </nut-noticebar>
 </template>
@@ -194,8 +187,8 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 ```html
 <template>
-    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
-      <template v-slot:rightIcon>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
+      <template #right-icon>
         <Fabulous />
       </template>
     </nut-noticebar>

src/packages/__VUE/noticebar/doc.md

@@ -42,14 +42,11 @@ app.use(Noticebar);
 
 ```html
 <template>
-  <nut-noticebar text="华为畅享9新品即将上市" :scrollable="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+  <nut-noticebar text="华为畅享9新品即将上市" :scrollable="true" ></nut-noticebar>
 
   <nut-noticebar
       text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
-      :scrollable="false"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    ></nut-noticebar>
+      :scrollable="false"></nut-noticebar>
 </template>
 
 ```
@@ -66,12 +63,7 @@ app.use(Noticebar);
     NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
  
-  <nut-noticebar
-      :close-mode="true"
-      right-icon="circle-close"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-      >
+  <nut-noticebar :close-mode="true">
       NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
 </template>
@@ -110,8 +102,6 @@ app.use(Noticebar);
   <nut-noticebar
       text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       wrapable
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
     ></nut-noticebar>
 </template>
 ```
@@ -127,9 +117,7 @@ app.use(Noticebar);
       :speed='10' 
       :standTime='1000' 
       @click='go' 
-      :close-mode="true" 
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`">
+      :close-mode="true" >
   </nut-noticebar>
 </template>
 
@@ -154,7 +142,7 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true'></nut-noticebar>
 </template>
 
 <script>
@@ -174,7 +162,7 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]">
       <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
     </nut-noticebar>
 </template>
@@ -196,8 +184,8 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
-      <template v-slot:rightIcon>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
+      <template #right-icon>
         <Fabulous />
       </template>
     </nut-noticebar>
@@ -242,7 +230,7 @@ app.use(Noticebar);
 | stand-time         | 停留时间(毫秒) | number | `1000`                |
 | complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
 | height          | 每一个滚动列的高度(px)，注意：在使用 `slot` 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
-| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=rightIcon]` 自定义图标                                   | boolean      | `false`  |
+| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]` 自定义图标                                   | boolean      | `false`  |
 
 ### Slots
 

src/packages/__VUE/noticebar/doc.taro.md

@@ -47,8 +47,6 @@ app.use(Noticebar);
   <nut-noticebar
       text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       :scrollable="false"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
     ></nut-noticebar>
 </template>
 
@@ -69,8 +67,6 @@ app.use(Noticebar);
   <nut-noticebar
       :closeMode="true"
       right-icon="circle-close"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
       >
       NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
@@ -110,9 +106,7 @@ app.use(Noticebar);
   <nut-noticebar
       text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       wrapable
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    ></nut-noticebar>
+       ></nut-noticebar>
 </template>
 ```
 :::
@@ -127,9 +121,7 @@ app.use(Noticebar);
       :speed='10' 
       :standTime='1000' 
       @click='go' 
-      :closeMode="true" 
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`">
+      :closeMode="true" >
   </nut-noticebar>
 </template>
 
@@ -154,7 +146,7 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true'></nut-noticebar>
 </template>
 
 <script>
@@ -174,7 +166,7 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" >
       <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
     </nut-noticebar>
 </template>
@@ -196,8 +188,8 @@ app.use(Noticebar);
 :::demo
 ```html
 <template>
-    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
-      <template v-slot:rightIcon>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
+      <template #right-icon>
         <Fabulous />
       </template>
     </nut-noticebar>
@@ -242,7 +234,7 @@ app.use(Noticebar);
 | stand-time         | 停留时间(毫秒) | number | `1000`                |
 | complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
 | height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
-| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=rightIcon]`自定义图标                                   | boolean      | `false`  |
+| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]`自定义图标                                   | boolean      | `false`  |
 
 ### Slots
 

src/packages/__VUE/noticebar/index.taro.vue

@@ -64,7 +64,7 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <slot name="rightIcon">
+        <slot name="right-icon">
           <CircleClose v-if="closeMode" :color="color" size="11px" />
         </slot>
       </view>
@@ -215,10 +215,10 @@ export default create({
     const barStyle = computed(() => {
       let style: {
         [props: string]: any;
-      } = {
-        color: props.color,
-        background: props.background
-      };
+      } = {};
+
+      props.color && (style.color = props.color);
+      props.background && (style.background = props.background);
 
       if (props.direction == 'vertical') {
         style.height = `${props.height}px`;

src/packages/__VUE/noticebar/index.vue

@@ -64,7 +64,7 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <slot name="rightIcon">
+        <slot name="right-icon">
           <CircleClose v-if="closeMode" :color="color" size="11px" />
         </slot>
       </view>

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

@@ -197,7 +197,7 @@ app.use(Progress);
 ### Slots
 | Name  | Description     | 
 |-------|----------|
-| iconName | Right icon content |
+| icon-name | Right icon content |
 
 ## Theming
 

src/packages/__VUE/progress/doc.md

@@ -191,7 +191,7 @@ app.use(Progress);
 ### Slots
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| iconName | 右侧 `icon` 内容 |  |
+| icon-name | 右侧 `icon` 内容 |  |
 
 ## 主题定制
 

src/packages/__VUE/progress/doc.taro.md

@@ -191,7 +191,7 @@ app.use(Progress);
 ### Slots
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| iconName | 右侧icon内容 |  |
+| icon-name | 右侧icon内容 |  |
 
 ## 主题定制
 

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

@@ -340,8 +340,8 @@ export default {
 | Name   | Description           |
 |---------|--------------|
 | default | Custom popover content |
-| prevStep | Custom prev strep content|
-| nextStep |  Custom prev strep content |
+| prev-step | Custom prev strep content|
+| next-step |  Custom prev strep content |
 
 ### Events
 

src/packages/__VUE/tour/doc.md

@@ -255,7 +255,7 @@ export default {
   ></nut-tour>
 </template>
 
-<script lang="ts">
+<script>
 import { reactive, toRefs } from 'vue';
 export default {
   setup() {
@@ -339,8 +339,8 @@ export default {
 | 名称    | 说明         |
 |---------|--------------|
 | default | 自定义气泡层内容|
-|prevStep | 自定义上一步内容|
-|nextStep | 自定义下一步内容 |
+|prev-step | 自定义上一步内容|
+|next-step | 自定义下一步内容 |
 
 ### Events
 

src/packages/__VUE/tour/doc.taro.md

@@ -348,8 +348,8 @@ page{
 | 名称    | 说明         |
 |---------|--------------|
 | default | 自定义气泡层内容 |
-|prevStep | 自定义上一步内容|
-|nextStep | 自定义下一步内容 |
+|prev-step | 自定义上一步内容|
+|next-step | 自定义下一步内容 |
 
 ### Events
 

src/packages/__VUE/tour/index.taro.vue

@@ -34,7 +34,7 @@
               <view class="nut-tour-content-bottom">
                 <view class="nut-tour-content-bottom-init">{{ active + 1 }}/{{ steps.length }}</view>
                 <view class="nut-tour-content-bottom-operate">
-                  <slot name="prevStep">
+                  <slot name="prev-step">
                     <view
                       class="nut-tour-content-bottom-operate-btn"
                       @click="changeStep('prev')"
@@ -49,7 +49,7 @@
                     >{{ completeTxt }}</view
                   >
 
-                  <slot name="nextStep">
+                  <slot name="next-step">
                     <view
                       class="nut-tour-content-bottom-operate-btn active"
                       @click="changeStep('next')"

src/packages/__VUE/tour/index.vue

@@ -35,7 +35,7 @@
                 <div class="nut-tour-content-bottom">
                   <div class="nut-tour-content-bottom-init">{{ active + 1 }}/{{ steps.length }}</div>
                   <div class="nut-tour-content-bottom-operate">
-                    <slot name="prevStep">
+                    <slot name="prev-step">
                       <div
                         class="nut-tour-content-bottom-operate-btn"
                         @click="changeStep('prev')"
@@ -50,7 +50,7 @@
                       v-if="steps.length - 1 == active"
                       >{{ completeTxt }}</div
                     >
-                    <slot name="nextStep">
+                    <slot name="next-step">
                       <div
                         class="nut-tour-content-bottom-operate-btn active"
                         @click="changeStep('next')"

src/sites/mobile-taro/vue/src/business/pages/address/index.vue

@@ -73,7 +73,7 @@
       :selected-icon="selectedIcon"
       :close-btn-icon="closeBtnIcon"
     >
-      <template #unselectedIcon>
+      <template #unselected-icon>
         <Heart1 style="margin-right: 8px"></Heart1>
       </template>
       <template #icon>