docs: overlay 文档

src/packages/navbar/demo.vue

@@ -16,7 +16,7 @@
       desc="清空"
     ></nut-navbar>
     <nut-navbar
-      :leftShow="false"
+      :left-show="false"
       @on-click-title="title"
       @on-click-icon="icon"
       @on-click-clear="edit"

src/packages/navbar/doc.md

@@ -24,7 +24,7 @@ app.use(Navbar);
 ```html
   <nut-navbar  @on-click-back="back" @on-click-title="title" @on-click-send="send" title="订单详情" icon="share"></nut-navbar>
   <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="clear"  title="浏览记录" desc="清空"></nut-navbar>
-  <nut-navbar :leftShow="false" @on-click-title="title" @on-click-icon="icon" @on-click-clear="edit"  @on-click-send="more" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
+  <nut-navbar :left-show="false" @on-click-title="title" @on-click-icon="icon" @on-click-clear="edit"  @on-click-send="more" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
 
 ```
 
@@ -66,15 +66,13 @@ app.use(Navbar);
 |-----------------|------------------------------------------------------------------------------------------------|---------|---------|
 | title           | 标题名称                                                                                       | String  | -       |
 | desc            | 右侧描述                                                                                       | String  | -       |
-| leftShow        | 是否展示左侧箭头                                                                              | Boolean | false   |
+| left-show        | 是否展示左侧箭头                                                                              | Boolean | false   |
 | icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
-| titIcon         | 标题带icon                                                         | String  | -       |                                          
+| tit-icon         | 标题带icon                                                         | String  | -       |                                          
 
 ### Event
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| back | 点击返回上一页事件 | event:Event |
 | title | 点击页面标题事件 | event:Event |
 | right | 点击右侧按钮事件 | event:Event |
-| back | 点击返回上一页事件 | event:Event |
 | back | 点击返回上一页事件 | event:Event |

src/packages/navbar/index.scss

@@ -13,7 +13,6 @@
     opacity: 0.1;
   }
   &--clickable {
-    cursor: pointer;
     &::before {
       position: absolute;
       content: ' ';
@@ -63,7 +62,6 @@
         box-sizing: border-box;
         text-align: center;
         font-size: 14px;
-        font-family: PingFangSC-Regular;
         color: rgba(26, 26, 26, 1);
         margin-left: 10px;
       }

src/packages/navbar/index.vue

@@ -10,9 +10,8 @@
     </view>
     <view
       class="nut-navbar__title"
-      :class="{ icon: icon }"
+      :class="{ icon }"
       v-if="title || titIcon || tabs"
-      ref="navlist"
     >
       <view v-if="title" @click="handleCenter">{{ title }}</view>
       <nut-icon
@@ -29,13 +28,13 @@
           ]"
           @click="switchTitle(item.id, item.name)"
           v-for="(item, index) in tabs"
-          :key="index"
+          :key="item.id"
         >
           {{ item.name }}
         </view>
       </view>
     </view>
-    <view class="nut-navbar__right" :class="{ icon: icon }" v-if="desc || icon">
+    <view class="nut-navbar__right" :class="{ icon }" v-if="desc || icon">
       <view
         v-if="desc"
         :style="{ 'text-align': descTextAlign }"
@@ -43,7 +42,9 @@
         >{{ desc }}</view
       >
       <template v-if="icon">
-        <view @click="handleSends"><slot name="icons"></slot></view>
+        <view @click="handleSends">
+          <slot name="icons"></slot>
+        </view>
       </template>
       <view>
         <nut-icon
@@ -51,8 +52,8 @@
           class="rightIcon"
           :name="icon"
           @click="handleSend"
-        ></nut-icon
-      ></view>
+        ></nut-icon>
+      </view>
     </view>
   </view>
 </template>
@@ -97,7 +98,6 @@ export default create({
     'switch-tab'
   ],
   setup(props, { emit }) {
-    const { tabs } = props;
     const activeIndex = ref(props.defaultIndex);
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -128,9 +128,6 @@ export default create({
       emit('on-click-clear');
     }
 
-    function handleRight() {
-      emit('on-click-right');
-    }
     function handleMore() {
       emit('on-click-more');
     }
@@ -152,12 +149,10 @@ export default create({
       handleLeft,
       handleCenter,
       handleCenterIcon,
-      handleRight,
       handleClear,
       handleSend,
       handleSlot,
       handleSends,
-      tabs,
       switchTitle,
       activeIndex
     };

src/packages/overlay/doc.md

@@ -38,14 +38,13 @@ app.use(OverLay);
 
 | 参数                   | 说明             | 类型           | 默认值 |
 | ---------------------- | ---------------- | -------------- | ------ |
-| show                   | 当前组件是否显示 | Boolean        | false  |
-| z-index                | 遮罩层级         | String、Number | 2000   |
-| duration               | 动画时长，单位秒 | String、Number | 0.3    |
+| show                   | 当前组件是否显示 | Boolean        | `false`  |
+| z-index                | 遮罩层级         | String, Number | `2000`   |
+| duration               | 动画时长，单位秒 | String, Number | `0.3`    |
 | overlay-class          | 自定义遮罩类名   | String         | -      |
 | overlay-style          | 自定义遮罩样式   | CSSProperties  | -      |
-| lock-scroll            | 背景是否锁定     | Boolean        | false  |
-| overlay                | 是否显示遮罩     | Boolean        | true   |
-| close-on-click-overlay | 是否点击遮罩关闭 | Boolean        | true   |
+| lock-scroll            | 背景是否锁定     | Boolean        | `false`  |
+| close-on-click-overlay | 是否点击遮罩关闭 | Boolean        | `true`   |
 
 ### Events
 

src/packages/overlay/index.scss

@@ -12,7 +12,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: $overlay-bg-color;
 }
 
 @keyframes nut-fade-in {

src/packages/overlay/index.vue

@@ -1,11 +1,11 @@
 <template>
   <Transition name="overlay-fade">
     <view
+      :class="classes"
       @touchmove.stop="touchmove"
       @click="onClick"
-      :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
+      :style="style"
       v-show="show"
-      :class="classes"
     >
       <slot></slot>
     </view>
@@ -21,7 +21,8 @@ const overlayProps = {
     default: false
   },
   zIndex: {
-    type: [Number, String]
+    type: [Number, String],
+    default: 2000
   },
   duration: {
     type: [Number, String],
@@ -38,10 +39,6 @@ const overlayProps = {
   overlayStyle: {
     type: Object as PropType<CSSProperties>
   },
-  overlay: {
-    type: Boolean,
-    default: true
-  },
   closeOnClickOverlay: {
     type: Boolean,
     default: true
@@ -61,20 +58,27 @@ export default create({
         [props.overlayClass]: true
       };
     });
-    const touchmove = e => {
-      if (props.lockScroll) {
-        e.preventDefault();
-      }
+
+    const style = computed(() => {
+      return {
+        animationDuration: `${props.duration}s`,
+        zIndex: props.zIndex,
+        ...props.overlayStyle
+      };
+    });
+
+    const touchmove = (e: TouchEvent) => {
+      if (props.lockScroll) e.preventDefault();
     };
 
-    const onClick = e => {
+    const onClick = (e: MouseEvent) => {
       emit('click', e);
       if (props.closeOnClickOverlay) {
         emit('update:show', false);
       }
     };
 
-    return { classes, touchmove, onClick };
+    return { classes, style, touchmove, onClick };
   }
 });
 </script>

src/packages/popup/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport :to="teleport">
     <nut-overlay
-      :show="show && overlay"
+      :show="show"
       :class="overlayClass"
       :style="overlayStyle"
       :zIndex="state.zIndex"

src/packages/switch/doc.md

@@ -65,7 +65,7 @@ export default {
 | disable         | 禁用状态               | Boolean | `false` |
 | active-color        | 开关打开时的背景颜色  | String | `rgb(250,63,25,1)`                |
 | inactive-color         | 开关关闭时的背景颜色 | String | `rgba(235,235,235,1)`         |
-| label         | 支持内嵌文字 | String | -         |
+| label         | 支持内嵌文字,两种状态使用空格隔开 | String | -         |
 
 
 ### Events

src/styles/variables.scss

@@ -154,8 +154,11 @@ $calendar-title-font: $font-size-4;
 $calendar-base-font: $font-size-3;
 $calendar-text-font: $font-size-1;
 $calendar-day-font: 18px;
-//popup
 
+//overlay
+$overlay-bg-color: rgba(0, 0, 0, 0.7);
+
+//popup
 $popup-close-icon-margin: 16px;
 $popup-border-radius: 20px;
 // ---- Animation ----