fix: slot修改 (jd-opensource#2046)

* feat: tour更新 * feat: 文档修改 * feat: 插槽修改 * feat: noticebar发布
yangbinji · Jan 11, 2023 · f62d470 · f62d470
1 parent c73ed1c
commit f62d470
Show file tree

Hide file tree

Showing 21 changed files with 66 additions and 93 deletions.
diff --git a/src/packages/__VUE/address/demo.vue b/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>

diff --git a/src/packages/__VUE/address/doc.en-US.md b/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
 

diff --git a/src/packages/__VUE/address/doc.md b/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 | 自定义地址与已有地址切换时返回的图标 | 
 
 
 ## 主题定制

diff --git a/src/packages/__VUE/address/doc.taro.md b/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 | 自定义地址与已有地址切换时返回的图标 | 
 
 ## 主题定制
 

diff --git a/src/packages/__VUE/address/index.taro.vue b/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>
 

diff --git a/src/packages/__VUE/address/index.vue b/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>
 

diff --git a/src/packages/__VUE/infiniteloading/doc.en-US.md b/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

diff --git a/src/packages/__VUE/infiniteloading/doc.md b/src/packages/__VUE/infiniteloading/doc.md
@@ -182,7 +182,7 @@ app.use(InfiniteLoading);
 |--------|----------------|
 | default  | 自定义加载内容 |
 | loading  | 自定义底部加载中提示 |
-| loadingIcon  | 自定义底部加载中图标 |
+| loading-icon  | 自定义底部加载中图标 |
 | finished  | 自定义加载完成后的提示文案 |
 
 

diff --git a/src/packages/__VUE/infiniteloading/index.vue b/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>

diff --git a/src/packages/__VUE/noticebar/demo.vue b/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>

diff --git a/src/packages/__VUE/noticebar/doc.en-US.md b/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>

diff --git a/src/packages/__VUE/noticebar/doc.md b/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