fix: slot修改 (#2046)

* feat: tour更新

* feat: 文档修改

* feat: 插槽修改

* feat: noticebar发布

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/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/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>