docs: 文档修改 (#2040)

* feat: tour更新 * feat: 文档修改
jdf2e · Jan 11, 2023 · 7ccc393 · 7ccc393
1 parent 0bf7106
commit 7ccc393
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 57 deletions.
diff --git a/src/packages/__VUE/comment/doc.taro.md b/src/packages/__VUE/comment/doc.taro.md
@@ -32,7 +32,7 @@ app.use(Comment);
   >
     <template #comment-labels>
       <img
-        class="nut-comment-header__labels--item"
+        style="height:15px;width:50px"
         src="https://img11.360buyimg.com/imagetools/jfs/t1/211858/17/4258/12101/618e6f78Ed0edcadc/e83a673555edf59f.jpg"
       />
     </template>

diff --git a/src/packages/__VUE/noticebar/demo.vue b/src/packages/__VUE/noticebar/demo.vue
@@ -157,7 +157,6 @@ export default createDemo({
   padding-bottom: 30px !important;
 
   .interstroll-list {
-    padding: 0 10px;
     background: rgba(251, 248, 220, 1);
     color: #d9500b;
   }

diff --git a/src/packages/__VUE/noticebar/doc.en-US.md b/src/packages/__VUE/noticebar/doc.en-US.md
@@ -223,7 +223,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 | direction  | Rolling direction                                  | string        | `across`  |
 | text       | Notice text content                                | string        |  -      |
 | close-mode  | Whether to enable the off mode                     | boolean       | `false`   |
-| left-icon   | Left Icon                                          | string        | -       |
+| left-icon   | Show left Icon | boolean, Scroll direction 'across' takes effect        | `true`    |
 | color      | Text Color                                         | string        | -       |
 | background | Background                                         | string        | -       |
 | delay      | Delay time                                         | string \| number | `1`       |
@@ -248,7 +248,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 |-------------------|----------------------------------|
 | default           | Notice text content              |
 | right-icon        | Custom right icon                |
-| left-icon         | Custom left icon                 |
+| left-icon         | Custom left icon, Scroll direction 'across' takes effect                |
 
 ### Events
 
@@ -268,10 +268,8 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
 | --nut-noticebar-color| _#d9500b_ |
 | --nut-noticebar-font-size| _14px_ |
-| --nut-noticebar-height| _40px_ |
-| --nut-noticebar-line-height| _24px_ |
-| --nut-noticebar-left-icon-width| _16px_ |
-| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-across-height| _40px_ |
+| --nut-noticebar-across-line-height| _24px_ |
 | --nut-noticebar-box-padding| _0 16px_ |
 | --nut-noticebar-wrapable-padding| _16px_ |
 | --nut-noticebar-lefticon-margin| _0px 10px_ |

diff --git a/src/packages/__VUE/noticebar/doc.md b/src/packages/__VUE/noticebar/doc.md
@@ -225,7 +225,7 @@ app.use(Noticebar);
 | direction       | 滚动的方向，可选 `across`、`vertical`                         | string        | `across`     |
 | text       | 提示的信息                                                 | string        | -     |
 | close-mode  | 是否启用关闭模式                                           | boolean       | `false`  |
-| left-icon   | `close` 为没有左边 `icon`,其他为自定义的图片链接，没有为默认图片 | string        | -     |
+| left-icon   | 是否展示左侧图标, 滚动方向为 `across` 生效 | boolean        | `true`    |
 | color      | 导航栏的文字颜色                                           | string        | -     |
 | background | 导航栏的背景颜色                                           | string        | -     |
 | delay      | 延时多少秒                                                 | string \| number | `1`      |
@@ -250,7 +250,7 @@ app.use(Noticebar);
 |--------------|----------------------------------|
 | default         | 通知文本的内容               | 
 | right-icon        | 自定义右侧图标    | 
-| left-icon        | 自定义左侧图标    | 
+| left-icon        | 自定义左侧图标, 滚动方向为 `across` 生效    | 
 ### Events
 
 | 事件名  | 说明             | 回调参数     |
@@ -269,10 +269,8 @@ app.use(Noticebar);
 | --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
 | --nut-noticebar-color| _#d9500b_ |
 | --nut-noticebar-font-size| _14px_ |
-| --nut-noticebar-height| _40px_ |
-| --nut-noticebar-line-height| _24px_ |
-| --nut-noticebar-left-icon-width| _16px_ |
-| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-across-height| _40px_ |
+| --nut-noticebar-across-line-height| _24px_ |
 | --nut-noticebar-box-padding| _0 16px_ |
 | --nut-noticebar-wrapable-padding| _16px_ |
 | --nut-noticebar-lefticon-margin| _0px 10px_ |

diff --git a/src/packages/__VUE/noticebar/doc.taro.md b/src/packages/__VUE/noticebar/doc.taro.md
@@ -225,7 +225,7 @@ app.use(Noticebar);
 | direction       | 滚动的方向，可选 `across`、`vertical `                        | string        | `across`     |
 | text       | 提示的信息                                                 | string        | -     |
 | close-mode  | 是否启用关闭模式                                           | boolean       | `false`  |
-| left-icon   | `close` 为没有左边 `icon` ,其他为自定义的图片链接，没有为默认图片 | string        | -     |
+| left-icon   | 是否展示左侧图标, 滚动方向为 `across` 生效 | boolean        | `true`    |
 | color      | 导航栏的文字颜色                                           | string        | -     |
 | background | 导航栏的背景颜色                                           | string        | -     |
 | delay      | 延时多少秒                                                 | string \| number | `1`      |
@@ -238,7 +238,7 @@ app.use(Noticebar);
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | list         | 纵向滚动数据列表               | array | `[]`               |
-| speed        | 滚动的速度                         | `number` | `50`               |
+| speed        | 滚动的速度                         | number | `50`               |
 | stand-time         | 停留时间(毫秒) | number | `1000`                |
 | complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
 | height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
@@ -250,7 +250,7 @@ app.use(Noticebar);
 |--------------|----------------------------------|
 | default         | 通知文本的内容               | 
 | right-icon        | 自定义右侧图标    | 
-| left-icon        | 自定义左侧图标    | 
+| left-icon        | 自定义左侧图标, 滚动方向为 `across` 生效    | 
 ### Events
 
 | 事件名  | 说明             | 回调参数     |
@@ -270,10 +270,8 @@ app.use(Noticebar);
 | --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
 | --nut-noticebar-color| _#d9500b_ |
 | --nut-noticebar-font-size| _14px_ |
-| --nut-noticebar-height| _40px_ |
-| --nut-noticebar-line-height| _24px_ |
-| --nut-noticebar-left-icon-width| _16px_ |
-| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-across-height| _40px_ |
+| --nut-noticebar-across-line-height| _24px_ |
 | --nut-noticebar-box-padding| _0 16px_ |
 | --nut-noticebar-wrapable-padding| _16px_ |
 | --nut-noticebar-lefticon-margin| _0px 10px_ |

diff --git a/src/packages/__VUE/noticebar/index.scss b/src/packages/__VUE/noticebar/index.scss
@@ -13,7 +13,7 @@
 .nut-noticebar__page {
   display: flex;
   padding: $noticebar-box-padding;
-  height: $noticebar-height;
+  height: $noticebar-across-height;
   font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
@@ -39,23 +39,20 @@
   .nut-noticebar__page-lefticon {
     display: flex;
     align-items: center;
-    height: $noticebar-left-icon-width;
-    min-width: $noticebar-left-icon-width;
     margin: $noticebar-lefticon-margin;
     background-size: 100% 100%;
   }
   .nut-noticebar__page-righticon {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $noticebar-right-icon-width;
     margin: $noticebar-righticon-margin;
   }
   .nut-noticebar__page-wrap {
     display: flex;
     flex: 1;
-    height: $noticebar-line-height;
-    line-height: $noticebar-line-height;
+    height: $noticebar-across-line-height;
+    line-height: $noticebar-across-line-height;
     overflow: hidden;
     position: relative;
   }
@@ -96,7 +93,7 @@
 // 垂直方向的滚动
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY($noticebar-height);
+    transform: translateY($noticebar-across-height);
   }
 }
 
@@ -105,10 +102,12 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: $noticebar-height;
+  height: $noticebar-across-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
   padding: $noticebar-box-padding;
+  background: $noticebar-background;
+  color: $noticebar-color;
 
   .nut-noticebar__vertical-list {
     margin: 0;
@@ -118,11 +117,12 @@
     .nut-noticebar__vertical-item {
       display: flex;
       align-items: center;
-      height: $noticebar-height;
+      height: $noticebar-across-height;
     }
   }
 
   .go {
+    margin: $noticebar-righticon-margin;
     align-self: center;
     display: flex;
   }

diff --git a/src/packages/__VUE/noticebar/index.taro.vue b/src/packages/__VUE/noticebar/index.taro.vue
@@ -13,8 +13,9 @@
       v-if="direction == 'across'"
     >
       <view class="nut-noticebar__page-lefticon">
-        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
-        <component :is="renderIcon(leftIcon)" v-else></component>
+        <slot name="left-icon">
+          <Notice v-if="leftIcon" size="16px"></Notice>
+        </slot>
       </view>
       <view ref="wrap" :class="`nut-noticebar__page-wrap wrap${id}`">
         <view
@@ -131,7 +132,10 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: Object || String, default: () => Notice },
+    leftIcon: {
+      type: Boolean,
+      default: true
+    },
     color: {
       type: String,
       default: '#F9911B'

diff --git a/src/packages/__VUE/noticebar/index.vue b/src/packages/__VUE/noticebar/index.vue
@@ -13,8 +13,9 @@
       v-if="direction == 'across'"
     >
       <view class="nut-noticebar__page-lefticon">
-        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
-        <component :is="renderIcon(leftIcon)" v-else></component>
+        <slot name="left-icon">
+          <Notice size="16px" v-if="leftIcon"></Notice>
+        </slot>
       </view>
       <view ref="wrap" class="nut-noticebar__page-wrap">
         <view
@@ -85,7 +86,7 @@ import {
   Slots
 } from 'vue';
 import { Notice, CircleClose } from '@nutui/icons-vue';
-import { createComponent, renderIcon } from '@/packages/utils/create';
+import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('noticebar');
 import { pxCheck } from '@/packages/utils/pxCheck';
 
@@ -141,7 +142,7 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: Object || String, default: () => Notice },
+    leftIcon: { type: Boolean, default: true },
     color: {
       type: String,
       default: ''
@@ -410,8 +411,7 @@ export default create({
       handleClickIcon,
       slots,
       pxCheck,
-      wrapContentClass,
-      renderIcon
+      wrapContentClass
     };
   }
 });

diff --git a/src/packages/styles/variables-jdb.scss b/src/packages/styles/variables-jdb.scss
@@ -532,10 +532,8 @@ $fixednav-item-active-color: $primary-color !default;
 $noticebar-background: rgba(251, 248, 220, 1) !default;
 $noticebar-color: #d9500b !default;
 $noticebar-font-size: 14px !default;
-$noticebar-height: 40px !default;
-$noticebar-line-height: 24px !default;
-$noticebar-left-icon-width: 16px !default;
-$noticebar-right-icon-width: 16px !default;
+$noticebar-across-height: 40px !default;
+$noticebar-across-line-height: 24px !default;
 $noticebar-box-padding: 0 16px !default;
 $noticebar-wrapable-padding: 16px !default;
 $noticebar-lefticon-margin: 0px 10px !default;

diff --git a/src/packages/styles/variables-jddkh.scss b/src/packages/styles/variables-jddkh.scss
@@ -464,10 +464,8 @@ $fixednav-item-active-color: $primary-color !default;
 $noticebar-background: rgba(255, 252, 217, 1) !default;
 $noticebar-color: #d9500b !default;
 $noticebar-font-size: $font-size-1 !default;
-$noticebar-height: 40px !default;
-$noticebar-line-height: 24px !default;
-$noticebar-left-icon-width: 12px !default;
-$noticebar-right-icon-width: 10px !default;
+$noticebar-across-height: 40px !default;
+$noticebar-across-line-height: 24px !default;
 $noticebar-box-padding: 0 12px !default;
 $noticebar-wrapable-padding: 16px !default;
 $noticebar-lefticon-margin: 0 6px 0 0 !default;

diff --git a/src/packages/styles/variables-jdt.scss b/src/packages/styles/variables-jdt.scss
@@ -472,10 +472,8 @@ $fixednav-item-active-color: var(--nut-fixednav-item-active-color, $primary-colo
 $noticebar-background: var(--nut-noticebar-background, #f2f8ff) !default;
 $noticebar-color: var(--nut-noticebar-color, #2c68ff) !default;
 $noticebar-font-size: var(--nut-noticebar-font-size, 14px) !default;
-$noticebar-height: var(--nut-noticebar-height, 40px) !default;
-$noticebar-line-height: var(--nut-noticebar-line-height, 24px) !default;
-$noticebar-left-icon-width: var(--nut-noticebar-left-icon-width, 16px) !default;
-$noticebar-right-icon-width: var(--nut-noticebar-right-icon-width, 16px) !default;
+$noticebar-across-height: var(--nut-noticebar-across-height, 40px) !default;
+$noticebar-across-line-height: var(--nut-noticebar-across-line-height, 24px) !default;
 $noticebar-box-padding: var(--nut-noticebar-box-padding, 0 16px) !default;
 $noticebar-wrapable-padding: var(--nut-noticebar-wrapable-padding, 16px) !default;
 $noticebar-lefticon-margin: var(--nut-noticebar-lefticon-margin, 0px 10px) !default;

diff --git a/src/packages/styles/variables.scss b/src/packages/styles/variables.scss
@@ -510,10 +510,8 @@ $fixednav-item-active-color: var(--nut-fixednav-item-active-color, $primary-colo
 $noticebar-background: var(--nut-noticebar-background, rgba(251, 248, 220, 1)) !default;
 $noticebar-color: var(--nut-noticebar-color, #d9500b) !default;
 $noticebar-font-size: var(--nut-noticebar-font-size, 14px) !default;
-$noticebar-height: var(--nut-noticebar-height, 40px) !default;
-$noticebar-line-height: var(--nut-noticebar-line-height, 24px) !default;
-$noticebar-left-icon-width: var(--nut-noticebar-left-icon-width, 16px) !default;
-$noticebar-right-icon-width: var(--nut-noticebar-right-icon-width, 16px) !default;
+$noticebar-across-height: var(--nut-noticebar-across-height, 40px) !default;
+$noticebar-across-line-height: var(--nut-noticebar-across-line-height, 24px) !default;
 $noticebar-box-padding: var(--nut-noticebar-box-padding, 0 16px) !default;
 $noticebar-wrapable-padding: var(--nut-noticebar-wrapable-padding, 16px) !default;
 $noticebar-lefticon-margin: var(--nut-noticebar-lefticon-margin, 0px 10px) !default;

diff --git a/src/sites/mobile-taro/vue/src/business/pages/address/index.vue b/src/sites/mobile-taro/vue/src/business/pages/address/index.vue
@@ -72,7 +72,19 @@
       :default-icon="defaultIcon"
       :selected-icon="selectedIcon"
       :close-btn-icon="closeBtnIcon"
-    ></nut-address>
+    >
+      <template #unselectedIcon>
+        <Heart1 style="margin-right: 8px"></Heart1>
+      </template>
+      <template #icon>
+        <HeartFill style="margin-right: 8px" color="#f00"></HeartFill>
+      </template>
+      <template #bottom>
+        <div class="nut-address-custom-buttom">
+          <div class="btn">自定义按钮</div>
+        </div>
+      </template>
+    </nut-address>
 
     <h2>自定义地址与已有地址切换</h2>
     <nut-cell title="选择地址" :desc="four" is-link @click="showAddressOther"></nut-cell>
@@ -99,6 +111,7 @@
 import { reactive, ref, toRefs, defineComponent } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
+import { HeartFill, Heart1, Close } from '@nutui/icons-vue-taro';
 interface CalBack {
   next: string;
   value: string;
@@ -130,7 +143,7 @@ interface AddressResult extends AddressList {
   town: RegionData[];
 }
 export default defineComponent({
-  components: { Header },
+  components: { Header, HeartFill, Heart1, Close },
   setup() {
     const env = Taro.getEnv();
     const address = reactive({
@@ -354,5 +367,23 @@ export default defineComponent({
       margin-right: 8px;
     }
   }
+
+  .nut-address-custom-buttom {
+    width: 100%;
+    height: 54px;
+    padding: 6px 0px 0;
+    border-top: 1px solid #f2f2f2;
+    .btn {
+      width: 90%;
+      height: 42px;
+      line-height: 42px;
+      margin: auto;
+      text-align: center;
+      background: $button-primary-background-color;
+      border-radius: 21px;
+      font-size: 15px;
+      color: $white;
+    }
+  }
 }
 </style>