chore: popup dep 'show' replace 'visible'

src/config.json

@@ -293,7 +293,7 @@
           "cName": "对话框",
           "desc": "模态对话框，在浮层中显示，引导用户进行相关操作，支持图片对话框。",
           "sort": 8,
-          "show": true,
+          "show": false,
           "author": "dsj"
         },
         {

src/packages/actionsheet/demo.vue

@@ -29,13 +29,14 @@
 
     <!-- demo 基础用法 -->
     <nut-actionsheet
-      :is-visible="state.isVisible1"
+      v-model:visible="state.isVisible1"
       :menu-items="menuItemsOne"
       @choose="chooseItem"
-    ></nut-actionsheet>
+    >
+    </nut-actionsheet>
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
-      :is-visible="state.isVisible2"
+      v-model:visible="state.isVisible2"
       cancel-txt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
@@ -43,7 +44,7 @@
     </nut-actionsheet>
     <!-- 展示描述信息 -->
     <nut-actionsheet
-      :is-visible="state.isVisible3"
+      v-model:visible="state.isVisible3"
       :description="state.desc"
       :menu-items="menuItemsTwo"
       @choose="chooseItemThree"
@@ -52,7 +53,7 @@
     </nut-actionsheet>
     <!-- demo 选项状态-->
     <nut-actionsheet
-      :is-visible="state.isVisible4"
+      v-model:visible="state.isVisible4"
       cancel-txt="取消"
       :menu-items="menuItemsThree"
       :choose-tag-value="state.chooseTagValue"

src/packages/actionsheet/doc.md

@@ -11,7 +11,7 @@
    <div class="selected-option" v-html="state.val"></div>
 </div>
 <nut-actionsheet
-  :is-visible="state.isVisible"
+  v-model:visible="state.isVisible"
   :menu-items="menuItems"
   @choose="chooseItem"
 ></nut-actionsheet>
@@ -23,7 +23,7 @@
   <span><label>展示取消按钮</label></span>
   <div class="selected-option" v-html="state.val"></div>
 </div>
-<nut-actionsheet :is-visible="isVisible" 
+<nut-actionsheet v-model:visible="isVisible" 
   @close="switchActionSheet"
   :menu-items="menuItems"
   @choose="chooseItem"
@@ -36,7 +36,7 @@
    <span><label>展示取消按钮</label></span>
     <div class="selected-option" v-html="state.val"></div>
 </div>
- <nut-actionsheet :is-visible="isVisible" 
+ <nut-actionsheet v-model:visible="isVisible" 
     @close="switchActionSheet"
     description="state.desc"
     :menu-items="menuItems"
@@ -53,7 +53,7 @@
 </div>
 <nut-actionsheet
 @close="switchActionSheet"
-  :is-visible="state.isVisible4"
+  v-model:visible="state.isVisible4"
   cancel-txt="取消"
   :menu-items="menuItemsThree"
 ></nut-actionsheet>
@@ -96,7 +96,7 @@ setup() {
 | cancel-txt       | 取消文案                               | String  | '取消'    |
 | menu-items       | 列表项                                 | Array   | [ ]       |
 | option-tag       | 设置列表项展示使用参数                 | String  | 'name'    |
-| is-visible       | 遮罩层可见                             | Boolean | false     |
+| v-model:visible       | 遮罩层可见                             | Boolean | false     |
 | option-sub-tag   | 设置列表项描述展示使用参数             | String  | 'subname' |
 | choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String  | ''        |
 | title            | 设置列表项标题                         | String  | ''        |

src/packages/actionsheet/index.vue

@@ -1,10 +1,11 @@
 <template>
   <view :class="classes">
     <nut-popup
-      v-model:show="state.maskIsVisible"
+      pop-class="popclass"
+      :visible="visible"
       position="bottom"
       round
-      @click-overlay="closeMask"
+      @click-overlay="close"
     >
       <view class="nut-actionsheet-panel">
         <view-block v-if="title" class="nut-actionsheet-title">{{
@@ -38,15 +39,12 @@
 </template>
 <script>
 import { createComponent } from '@/utils/create';
-import { watch, reactive, computed } from 'vue';
+import { computed } from 'vue';
 const { componentName, create } = createComponent('actionsheet');
-
+import { popupProps } from '@/packages/popup/index.vue';
 export default create({
   props: {
-    isVisible: {
-      type: Boolean,
-      default: false
-    },
+    ...popupProps,
     cancelTxt: {
       type: String,
       default: ''
@@ -80,13 +78,9 @@ export default create({
       default: () => []
     }
   },
-  emits: ['cancel', 'choose'],
+  emits: ['cancel', 'choose', 'update:visible'],
 
   setup(props, { emit }) {
-    const state = reactive({
-      maskIsVisible: false
-    });
-
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -100,39 +94,29 @@ export default create({
         ? props.color
         : '#1a1a1a';
     };
-    const closeActionSheet = () => {
-      state.maskIsVisible = false;
-    };
 
     const cancelActionSheet = () => {
-      closeActionSheet();
       emit('cancel');
+      emit('update:visible', false);
     };
 
     const chooseItem = (item, index) => {
       if (!item.disable) {
-        closeActionSheet();
         emit('choose', item, index);
+        emit('update:visible', false);
       }
     };
 
-    const closeMask = () => {
-      state.maskIsVisible = false;
+    const close = () => {
+      emit('close');
+      emit('update:visible', false);
     };
 
-    watch(
-      () => props.isVisible,
-      () => {
-        state.maskIsVisible = true;
-      }
-    );
     return {
       isHighlight,
-      closeActionSheet,
       cancelActionSheet,
       chooseItem,
-      closeMask,
-      state,
+      close,
       classes
     };
   }

src/packages/address/demo.vue

@@ -9,7 +9,7 @@
     ></nut-cell>
 
     <nut-address
-      v-model:show="normal"
+      v-model:visible="normal"
       :province="province"
       :city="city"
       :country="country"
@@ -28,7 +28,7 @@
     ></nut-cell>
 
     <nut-address
-      v-model:show="exist"
+      v-model:visible="exist"
       type="exist"
       :exist-address="existAddress"
       @change="cal => onChange(cal, 'exist')"
@@ -47,7 +47,7 @@
     ></nut-cell>
 
     <nut-address
-      v-model:show="customImg"
+      v-model:visible="customImg"
       type="exist"
       :exist-address="existAddress"
       @change="cal => onChange(cal, 'customImg')"
@@ -68,7 +68,7 @@
     ></nut-cell>
 
     <nut-address
-      v-model:show="other"
+      v-model:visible="other"
       type="exist"
       :exist-address="existAddress"
       :province="province"

src/packages/address/doc.md

@@ -24,7 +24,7 @@ app.use(Popup);
 ```html
 <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
 <nut-address
-    v-model:show="showPopup"
+    v-model:visible="showPopup"
     :province="province"
     :city="city"
     :country="country"
@@ -84,7 +84,7 @@ setup() {
 ```html
 <nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
 <nut-address
-    v-model:show="showPopupExist"
+    v-model:visible="showPopupExist"
     type="exist"
     :existAddress="existAddress"
     @close="close"
@@ -160,7 +160,7 @@ setup() {
 ```html
 <nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
 <nut-address
-    v-model:show="showPopupCustomImg"
+    v-model:visible="showPopupCustomImg"
     type="exist"
     :existAddress="existAddress"
     @close="close"
@@ -244,7 +244,7 @@ setup() {
 ```html
 <nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
 <nut-address
-    v-model:show="showPopupOther"
+    v-model:visible="showPopupOther"
     type="exist"
     :existAddress="existAddress"
     :province="province"
@@ -360,7 +360,7 @@ setup() {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| v-model:show | 是否打开地址选择 | String | ''
+| v-model:visible | 是否打开地址选择 | String | ''
 | type | 地址选择类型 exist/custom | String | 'custom'
 | province | 省，每个省的对象中，必须有 name 字段 | Array | []
 | city | 市，每个市的对象中，必须有 name 字段 | Array | []

src/packages/address/index.vue

@@ -4,7 +4,7 @@
     @close="close"
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
-    v-model:show="showPopup"
+    v-model:visible="showPopup"
   >
     <view-block class="nut-address">
       <view-block class="title">
@@ -145,7 +145,7 @@ interface AddressList {
 }
 export default create({
   props: {
-    show: {
+    visible: {
       type: Boolean,
       default: false
     },
@@ -211,7 +211,7 @@ export default create({
     }
   },
   emits: [
-    'update:show',
+    'update:visible',
     'change',
     'selected',
     'close',
@@ -405,7 +405,7 @@ export default create({
     };
 
     watch(
-      () => props.show,
+      () => props.visible,
       value => {
         showPopup.value = value;
       }
@@ -415,7 +415,8 @@ export default create({
       () => showPopup.value,
       value => {
         if (!value) {
-          emit('update:show', false);
+          close();
+          emit('update:visible', false);
         } else {
           showModule.value = props.type;
         }

src/packages/calendar/demo.vue

@@ -10,7 +10,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :is-visible="isVisible"
+        :visible="isVisible"
         :default-value="date"
         @close="closeSwitch('isVisible')"
         @choose="setChooseValue"
@@ -29,7 +29,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :is-visible="isVisible1"
+        :visible="isVisible1"
         :default-value="date1"
         type="range"
         :start-date="`2019-12-22`"
@@ -50,7 +50,7 @@
       >
       </nut-cell>
       <nut-calendar
-        :is-visible="isVisible3"
+        :visible="isVisible3"
         @close="closeSwitch('isVisible3')"
         @choose="setChooseValue3"
         :default-value="date3"

src/packages/calendar/doc.md

@@ -27,7 +27,7 @@ app.use(Calendar);
 >
 </nut-cell>
 <nut-calendar
-  :is-visible="isVisible"
+  :visible="isVisible"
   :default-value="date"
   @close="closeSwitch('isVisible')"
   @choose="setChooseValue"
@@ -74,7 +74,7 @@ setup() {
 >
 </nut-cell>
 <nut-calendar
-  :is-visible="isVisible"
+  :visible="isVisible"
   :default-value="date"
   type="range"
   :start-date="`2019-12-22`"
@@ -120,7 +120,7 @@ setup() {
 >
 </nut-cell>
 <nut-calendar
-  :is-visible="isVisible"
+  :visible="isVisible"
   @close="closeSwitch('isVisible')"
   @choose="setChooseValue"
   :start-date="null"
@@ -194,20 +194,20 @@ setup() {
 
 ### Props
 
-| 字段              | 说明                                              | 类型           | 默认值          |
-| ----------------- | ------------------------------------------------- | -------------- | --------------- |
-| type              | 类型，日期选择'one'，区间选择'range'              | String         | 'one'           |
-| is-visible        | 是否可见                                          | Boolean        | false           |
-| poppable          | 是否弹窗状态展示                                  | Boolean        | true            |
-| is-auto-back-fill | 自动回填                                          | Boolean        | false           |
-| title             | 显示标题                                          | String         | ‘日期选择’      |
+| 字段              | 说明                                              | 类型            | 默认值          |
+|-------------------|---------------------------------------------------|-----------------|-----------------|
+| v-model:visible   | 是否可见                                          | Boolean         | false           |
+| type              | 类型，日期选择'one'，区间选择'range'              | String          | 'one'           |
+| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
+| is-auto-back-fill | 自动回填                                          | Boolean         | false           |
+| title             | 显示标题                                          | String          | ‘日期选择’      |
 | default-value     | 默认值，日期选择 String 格式，区间选择 Array 格式 | String 、 Array | null            |
-| start-date        | 开始日期， 如果不限制开始日期传 null              | String         | 今天            |
-| end-date          | 结束日期，如果不限制结束日期传 null               | String         | 距离今天 365 天 |
+| start-date        | 开始日期， 如果不限制开始日期传 null              | String          | 今天            |
+| end-date          | 结束日期，如果不限制结束日期传 null               | String          | 距离今天 365 天 |
 
 ### Events
 
-| 事件名 | 说明 | 回调参数 |
-| ----------------- | --------------------- | -------------- |
-| choose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期）
-| close | 关闭时触发 | -
+| 事件名 | 说明                         | 回调参数                     |
+|--------|------------------------------|------------------------------|
+| choose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
+| close  | 关闭时触发                   | -                            |

src/packages/calendar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <nut-popup
     v-if="poppable"
-    v-model:show="childIsVisible"
+    v-model:visible="childIsVisible"
     position="bottom"
     round
     :closeable="true"
@@ -61,7 +61,7 @@ export default create({
       type: Boolean,
       default: true
     },
-    isVisible: {
+    visible: {
       type: Boolean
     },
     title: {
@@ -80,7 +80,7 @@ export default create({
       default: Utils.getDay(365)
     }
   },
-  emits: ['choose', 'close'],
+  emits: ['choose', 'close', 'update:visible'],
   setup(props, { emit }) {
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);
@@ -96,6 +96,7 @@ export default create({
     };
 
     const close = () => {
+      emit('update:visible', false);
       emit('close');
     };
 
@@ -109,7 +110,7 @@ export default create({
     };
 
     watch(
-      () => props.isVisible,
+      () => props.visible,
       val => {
         if (val) {
           state.childIsVisible = true;

src/packages/datepicker/doc.md

@@ -144,23 +144,23 @@ export default createDemo({
     
 ### Props
     
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-|  v-model        |    初始值 | Date |`null`  |
-|  type        |    类型，日期'date'， 日期时间'datetime'，时间'time' | String |`'date'`  |
-|  visible     |     是否可见    |  Boolean | `false`  |
-|  is-use12-hours     | 是否十二小时制度，只限类型为'time'时使用 | Boolean | `false` |
-|  minute-step | 分钟步进值  | Number | `1` |
-|  is-show-chinese  | 每列是否展示中文 | Boolean | `false`           |
-|  title | 设置标题 | String | `null` |
-|  min-date | 开始日期 | Date | `十年前` |
-|  max-date | 结束日期 | Date | `十年后` |
+| 参数            | 说明                                              | 类型    | 默认值   |
+|-----------------|---------------------------------------------------|---------|----------|
+| v-model         | 初始值                                            | Date    | `null`   |
+| v-model:visible | 是否可见                                          | Boolean | `false`  |
+| type            | 类型，日期'date'， 日期时间'datetime'，时间'time' | String  | `'date'` |
+| is-use12-hours  | 是否十二小时制度，只限类型为'time'时使用          | Boolean | `false`  |
+| minute-step     | 分钟步进值                                        | Number  | `1`      |
+| is-show-chinese | 每列是否展示中文                                  | Boolean | `false`  |
+| title           | 设置标题                                          | String  | `null`   |
+| min-date        | 开始日期                                          | Date    | `十年前` |
+| max-date        | 结束日期                                          | Date    | `十年后` |
 
 
 
 ### Events
     
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| confirm  | 点击确定按钮时触发 | event: Event |
-| close  | 关闭时触发 | event: Event |
+| 事件名  | 说明               | 回调参数     |
+|---------|--------------------|--------------|
+| confirm | 点击确定按钮时触发 | event: Event |
+| close   | 关闭时触发         | event: Event |

src/packages/dialog/index.vue

@@ -15,7 +15,8 @@
           :style="{ background: maskBgStyle }"
           @click="modalClick"
           v-show="curVisible"
-        ></div>
+        >
+        </div>
       </transition>
       <transition :name="animation ? 'nutEase' : ''">
         <div class="nut-dialog-box" v-show="curVisible" @click="modalClick">
@@ -106,6 +107,10 @@ const lockMaskScroll = (bodyCls => {
 })('dialog-open');
 export default create({
   props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
     id: {
       type: String,
       default: ''
@@ -138,10 +143,7 @@ export default create({
       type: Boolean,
       default: false
     },
-    visible: {
-      type: Boolean,
-      default: false
-    },
+
     closeBtn: {
       type: Boolean,
       default: false

src/packages/input/doc.md

@@ -61,27 +61,27 @@ app.use(Input);
 
 ### Prop
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| type         | 类型，可选值为 `text` `number`  等 | String |`text`         |
-| value      | 输入值，双向绑定 | String |  -     |
-| placeholder         | 为空时占位符 | String |       -       |
-| label          | 	左侧文案                       | String | -             |
-| require-show          |左侧*号是否展示                       | Boolean | `false`           |
-| disabled          | 	是否禁用                       | Boolean | `false`              |
-| readonly          | 是否只读                        | Boolean | `false`               |
-| max-length          | 限制最长输入字符                   | String、Number | -               |
-| disable-clear          | 禁止展示清除icon                   | Boolean | `false`             |
-| text-align          | 文本位置,可选值`left`,`center`,`right`     | String | `left`             |
+| 参数          | 说明                                   | 类型           | 默认值  |
+|---------------|----------------------------------------|----------------|---------|
+| v-model         | 输入值，双向绑定                       | String         | -       |
+| type          | 类型，可选值为 `text` `number`  等     | String         | `text`  |
+| placeholder   | 为空时占位符                           | String         | -       |
+| label         | 左侧文案                               | String         | -       |
+| require-show  | 左侧*号是否展示                        | Boolean        | `false` |
+| disabled      | 是否禁用                               | Boolean        | `false` |
+| readonly      | 是否只读                               | Boolean        | `false` |
+| max-length    | 限制最长输入字符                       | String、Number | -       |
+| disable-clear | 禁止展示清除icon                       | Boolean        | `false` |
+| text-align    | 文本位置,可选值`left`,`center`,`right` | String         | `left`  |
 
 ### Event
 
-| 名称  | 说明     | 回调参数    |
-|-------|----------|-------------|
-| change | 输入内容时触发 | val |
-| focus | 聚焦时触发 | val |
-| blur | 失焦时触发 | val |
-| clear | 点击清空时触发 | val |
+| 名称   | 说明           | 回调参数 |
+|--------|----------------|----------|
+| change | 输入内容时触发 | val      |
+| focus  | 聚焦时触发     | val      |
+| blur   | 失焦时触发     | val      |
+| clear  | 点击清空时触发 | val      |
 
 
 

src/packages/menuitem/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view :class="classes">
-    <nut-popup v-model:show="showMask"></nut-popup>
+    <nut-popup v-model:visible="showMask"></nut-popup>
     <view class="nut-menu-title" @click="handleMenuPanel">
       <view class="title-name" v-html="menuTitle"></view>
       <nut-icon class-prefix="icon"></nut-icon>

src/packages/notify/index.vue

@@ -12,7 +12,7 @@
       <template v-else>{{ msg }}</template>
     </view>
   </Transition>
-  <!-- <nut-popup v-model:show="state.mounted" position="top" :style="{ color: color, background: background }" :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]" overlay="false">
+  <!-- <nut-popup v-model:visible="state.mounted" position="top" :style="{ color: color, background: background }" :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]" overlay="false">
     <template v-if="$slots.default">
       <slot></slot>
     </template>

src/packages/overlay/demo.vue

@@ -5,14 +5,14 @@
       <nut-button type="primary" @click="state.show = true"
         >显示遮罩层</nut-button
       >
-      <nut-overlay v-model:show="state.show" :z-index="2000"></nut-overlay>
+      <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
     </nut-cell>
     <h2>嵌套内容</h2>
     <nut-cell>
       <nut-button type="success" @click="state.show2 = true"
         >嵌套内容</nut-button
       >
-      <nut-overlay v-model:show="state.show2" :z-index="2000">
+      <nut-overlay v-model:visible="state.show2" :z-index="2000">
         <div class="wrapper">
           <div class="content">这里是正文</div>
         </div>

src/packages/overlay/doc.md

@@ -19,13 +19,13 @@ app.use(OverLay);
 ### 基础用法
 
 ```html
-<nut-overlay v-model:show="state.show" :z-index="2000"></nut-overlay>
+<nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
 ```
 
 ### 嵌套内容
 
 ```html
-<nut-overlay v-model:show="state.show2" :z-index="2000">
+<nut-overlay v-model:visible="state.show2" :z-index="2000">
   <div class="wrapper">
     <div class="content">这里是正文</div>
   </div>
@@ -38,7 +38,7 @@ app.use(OverLay);
 
 | 参数                   | 说明             | 类型           | 默认值 |
 | ---------------------- | ---------------- | -------------- | ------ |
-| show                   | 当前组件是否显示 | Boolean        | `false`  |
+| v-model:visible                   | 当前组件是否显示 | Boolean        | `false`  |
 | z-index                | 遮罩层级         | String, Number | `2000`   |
 | duration               | 动画时长，单位秒 | String, Number | `0.3`    |
 | overlay-class          | 自定义遮罩类名   | String         | -      |

src/packages/overlay/index.vue

@@ -5,7 +5,7 @@
       @touchmove.stop="touchmove"
       @click="onClick"
       :style="style"
-      v-show="show"
+      v-show="visible"
     >
       <slot></slot>
     </view>
@@ -16,7 +16,7 @@ import { CSSProperties, PropType, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('overlay');
 const overlayProps = {
-  show: {
+  visible: {
     type: Boolean,
     default: false
   },
@@ -49,7 +49,7 @@ export { overlayProps };
 
 export default create({
   props: overlayProps,
-  emits: ['click', 'update:show'],
+  emits: ['click', 'update:visible'],
   setup(props, { emit }) {
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -74,7 +74,7 @@ export default create({
     const onClick = (e: MouseEvent) => {
       emit('click', e);
       if (props.closeOnClickOverlay) {
-        emit('update:show', false);
+        emit('update:visible', false);
       }
     };
 

src/packages/picker/doc.md

@@ -162,7 +162,7 @@ export default createDemo({
     
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| visible   | 是否可见               | Boolean | false             |
+| v-model:visible   | 是否可见               | Boolean | false             |
 | title        | 设置标题                         | String | -                |
 | list-data         | 列表数据 | Array | -                |
 | default-value-index         | 初始选中项的索引，默认为 0 | number | 0                |

src/packages/picker/index.vue

@@ -3,7 +3,7 @@
     <nut-popup
       position="bottom"
       :style="{ height: height + 56 + 'px' }"
-      v-model:show="show"
+      v-model:visible="show"
       @close="close"
     >
       <view-block class="nut-picker__bar">

src/packages/popup/demo.vue

@@ -9,7 +9,7 @@
     <nut-popup
       pop-class="popclass"
       :style="{ padding: '30px 50px' }"
-      v-model:show="state.showBasic"
+      v-model:visible="state.showBasic"
       >正文</nut-popup
     >
     <h2>弹出位置</h2>
@@ -17,7 +17,7 @@
     <nut-popup
       position="top"
       :style="{ height: '20%' }"
-      v-model:show="state.showTop"
+      v-model:visible="state.showTop"
     ></nut-popup>
     <nut-cell
       title="底部弹出"
@@ -27,7 +27,7 @@
     <nut-popup
       position="bottom"
       :style="{ height: '20%' }"
-      v-model:show="state.showBottom"
+      v-model:visible="state.showBottom"
     ></nut-popup>
     <nut-cell
       title="左侧弹出"
@@ -37,7 +37,7 @@
     <nut-popup
       position="left"
       :style="{ width: '20%', height: '100%' }"
-      v-model:show="state.showLeft"
+      v-model:visible="state.showLeft"
     ></nut-popup>
     <nut-cell
       title="右侧弹出"
@@ -47,7 +47,7 @@
     <nut-popup
       position="right"
       :style="{ width: '20%', height: '100%' }"
-      v-model:show="state.showRight"
+      v-model:visible="state.showRight"
     ></nut-popup>
     <h2>关闭图标</h2>
     <nut-cell
@@ -59,7 +59,7 @@
       position="bottom"
       closeable
       :style="{ height: '20%' }"
-      v-model:show="state.showIcon"
+      v-model:visible="state.showIcon"
     ></nut-popup>
     <nut-cell
       title="图标位置"
@@ -71,7 +71,7 @@
       closeable
       close-icon-position="top-left"
       :style="{ height: '20%' }"
-      v-model:show="state.showIconPosition"
+      v-model:visible="state.showIconPosition"
     ></nut-popup>
     <nut-cell
       title="自定义图标"
@@ -84,7 +84,7 @@
       close-icon-position="top-left"
       close-icon="heart"
       :style="{ height: '20%' }"
-      v-model:show="state.showCloseIcon"
+      v-model:visible="state.showCloseIcon"
     ></nut-popup>
     <h2>圆角弹框</h2>
     <nut-cell
@@ -97,7 +97,7 @@
       closeable
       round
       :style="{ height: '30%' }"
-      v-model:show="state.showRound"
+      v-model:visible="state.showRound"
     ></nut-popup>
     <h2>指定挂载节点</h2>
     <nut-cell
@@ -108,7 +108,7 @@
     <nut-popup
       :style="{ padding: '30px 50px' }"
       teleport="#app"
-      v-model:show="state.showTeleport"
+      v-model:visible="state.showTeleport"
       >app</nut-popup
     >
   </div>

src/packages/popup/doc.md

@@ -18,10 +18,10 @@ app.use(Popup);
 
 ### 基础用法
 
-`show` 控制显示/隐藏
+`visible` 控制显示/隐藏
 
 ```html
-<nut-popup :style="{ padding: '30px' }" v-model:show="show">正文</nut-popup>
+<nut-popup :style="{ padding: '30px' }" v-model:visible="show">正文</nut-popup>
 ```
 
 ### 弹出位置
@@ -29,13 +29,13 @@ app.use(Popup);
 ```html
 <nut-popup
   position="top"
-  v-model:show="show"
+  v-model:visible="show"
   :style="{ height: '20% }"
 ></nut-popup>
 
 <nut-popup
   position="left"
-  v-model:show="show"
+  v-model:visible="show"
   :style="{ height: '100%', width: '20%' }"
 ></nut-popup>
 ```
@@ -47,7 +47,7 @@ app.use(Popup);
   position="bottom"
   closeable
   :style="{ height: '20%' }"
-  v-model:show="show"
+  v-model:visible="show"
 ></nut-popup>
 
 <nut-popup
@@ -55,7 +55,7 @@ app.use(Popup);
   closeable
   close-icon-position="top-left"
   :style="{ height: '20%' }"
-  v-model:show="show"
+  v-model:visible="show"
 ></nut-popup>
 
 <nut-popup
@@ -64,7 +64,7 @@ app.use(Popup);
   close-icon-position="top-left"
   close-icon="heart"
   :style="{ height: '20%' }"
-  v-model:show="show"
+  v-model:visible="show"
 ></nut-popup>
 ```
 
@@ -76,34 +76,34 @@ app.use(Popup);
   closeable
   round
   :style="{ height: '30%' }"
-  v-model:show="show"
+  v-model:visible="show"
 ></nut-popup>
 ```
 
 ### 指定挂载节点
 
 ```html
-<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:show="show">app</nut-popup
+<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:visible="show">app</nut-popup
 ```
 
 ## API
 
 ### Props
 
-| 参数                   | 说明                                                        | 类型           | 默认值      |
-| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
-| show                   | 当前组件是否显示                                            | Boolean        | `false`       |
+| 参数                   | 说明                                                        | 类型           | 默认值        |
+|------------------------|-------------------------------------------------------------|----------------|---------------|
+| v-model:visible        | 当前组件是否显示                                            | Boolean        | `false`       |
 | z-index                | 遮罩层级                                                    | String、Number | `2000`        |
 | duration               | 动画时长，单位秒                                            | String、Number | `0.3`         |
-| overlay-class          | 自定义遮罩类名                                              | String         | -           |
-| overlay-style          | 自定义遮罩样式                                              | CSSProperties  | -           |
+| overlay-class          | 自定义遮罩类名                                              | String         | -             |
+| overlay-style          | 自定义遮罩样式                                              | CSSProperties  | -             |
 | lock-scroll            | 背景是否锁定                                                | Boolean        | `false`       |
 | overlay                | 是否显示遮罩                                                | Boolean        | `true`        |
 | close-on-click-overlay | 是否点击遮罩关闭                                            | Boolean        | `true`        |
 | position               | 弹出位置（top,bottom,left,right,center）                    | String         | `"center"`    |
-| transition             | 动画名                                                      | String         | -           |
-| style                  | 自定义弹框样式                                              | CSSProperties  | -           |
-| pop-class               | 自定义弹框类名                    | String         | -    |
+| transition             | 动画名                                                      | String         | -             |
+| style                  | 自定义弹框样式                                              | CSSProperties  | -             |
+| pop-class              | 自定义弹框类名                                              | String         | -             |
 | closeable              | 是否显示关闭按钮                                            | Boolean        | `true`        |
 | close-icon-position    | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | String         | `"top-right"` |
 | close-icon             | 自定义 Icon                                                 | String         | `"close"`     |
@@ -113,12 +113,12 @@ app.use(Popup);
 
 ### Events
 
-| 事件名           | 说明                   | 回调参数     |
-| ---------------- | ---------------------- | ------------ |
+| 事件名           | 说明                   | 回调参数       |
+|------------------|------------------------|----------------|
 | click            | 点击弹框时触发         | `event: Event` |
 | click-close-icon | 点击关闭图标时触发     | `event: Event` |
-| open             | 打开弹框时触发         | -            |
-| close            | 关闭弹框时触发         | -            |
+| open             | 打开弹框时触发         | -              |
+| close            | 关闭弹框时触发         | -              |
 | opend            | 遮罩打开动画结束时触发 | `event: Event` |
 | closed           | 遮罩关闭动画结束时触发 | `event: Event` |
 | click-overlay    | 点击遮罩触发           | `event: Event` |

src/packages/popup/index.vue

@@ -1,7 +1,8 @@
 <template>
   <Teleport :to="teleport">
     <nut-overlay
-      :show="show && overlay"
+      v-if="overlay"
+      :visible="visible"
       :class="overlayClass"
       :style="overlayStyle"
       :z-index="zIndex"
@@ -13,7 +14,12 @@
       @after-enter="onOpened"
       @after-leave="onClosed"
     >
-      <view v-show="show" :class="classes" :style="popStyle" @click="onClick">
+      <view
+        v-show="visible"
+        :class="classes"
+        :style="popStyle"
+        @click="onClick"
+      >
         <slot v-if="showSlot"></slot>
         <nut-icon
           v-if="closeable"
@@ -50,7 +56,8 @@ const { componentName, create } = createComponent('popup');
 
 let _zIndex = 2000;
 
-const popupProps = {
+export const popupProps = {
+  ...overlayProps,
   position: {
     type: String,
     default: 'center'
@@ -105,7 +112,6 @@ const popupProps = {
 export default create({
   children: [overlay],
   props: {
-    ...overlayProps,
     ...popupProps
   },
   emits: [
@@ -115,18 +121,17 @@ export default create({
     'close',
     'opend',
     'closed',
-    'update:show',
+    'update:visible',
     'click-overlay'
   ],
 
   setup(props, { emit }) {
     const state = reactive({
-      zIndex: 0,
+      zIndex: 1,
       showSlot: true,
       transitionName: `popup-fade-${props.position}`,
       overLayCount: 1,
-      keepAlive: false,
-      opened: false
+      keepAlive: false
     });
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
@@ -150,26 +155,24 @@ export default create({
     });
 
     const open = () => {
-      if (!state.opened) {
+      if (!props.visible) {
         if (props.zIndex !== undefined) {
           _zIndex = Number(props.zIndex);
         }
-        state.opened = true;
+        emit('update:visible', true);
         lockScroll();
         state.zIndex = ++_zIndex;
-
-        if (props.destroyOnClose) {
-          state.showSlot = true;
-        }
+      }
+      if (props.destroyOnClose) {
+        state.showSlot = true;
       }
       emit('open');
     };
 
     const close = () => {
-      if (state.opened) {
-        state.opened = false;
+      if (props.visible) {
         unlockScroll();
-        emit('update:show', false);
+        emit('update:visible', false);
         if (props.destroyOnClose) {
           setTimeout(() => {
             state.showSlot = false;
@@ -208,35 +211,35 @@ export default create({
         ? (state.transitionName = props.transition)
         : (state.transitionName = `popup-slide-${props.position}`);
 
-      props.show && open();
+      props.visible && open();
     });
 
     onBeforeUnmount(() => {
-      props.show && close();
+      props.visible && close();
     });
 
     onBeforeMount(() => {
-      if (state.opened) {
+      if (props.visible) {
         unlockScroll();
       }
     });
 
     onActivated(() => {
       if (state.keepAlive) {
-        emit('update:show', true);
+        emit('update:visible', true);
         state.keepAlive = false;
       }
     });
 
     onDeactivated(() => {
-      if (props.show) {
+      if (props.visible) {
         close();
         state.keepAlive = true;
       }
     });
 
     watch(
-      () => props.show,
+      () => props.visible,
       value => {
         if (value) {
           open();

src/packages/rate/doc.md

@@ -86,8 +86,8 @@ setup() {
 
 | 字段           | 说明                                      | 类型    | 默认值      |
 |----------------|-------------------------------------------|---------|-------------|
-| count          | star 总数                                 | Number  | 5           |
 | v-model        | 当前 star 数，可使用 v-model 双向绑定数据 | Number  | -           |
+| count          | star 总数                                 | Number  | 5           |
 | icon-size      | star 大小                                 | Number  | 18          |
 | active-color   | 图标选中颜色                              | String  | #fa200c     |
 | void-color     | 图标未选中颜色                            | String  | #ccc        |

src/packages/shortpassword/doc.md

@@ -96,26 +96,26 @@ setup() {
 ### Prop
 
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- |
-| title | 标题| String | 请输入密码|
-| desc | 密码框描述| String | 您使用了虚拟资产，请进行验证|
-| tips | 提示语| String | 忘记密码|
-| visible | 是否展示短密码框| Boolean | false|
-| value | 密码初始值 | String | ''|
-| close-on-click-overlay | 是否点击遮罩关闭  | Boolean | true|
-| no-button | 是否隐藏底部按钮 |Boolean|true|
-| length | 密码长度，取值为4~6 |String||Number|6|
-| error-msg | 错误信息提示 |String|''|
+| 字段                   | 说明                | 类型           | 默认值                       |
+|------------------------|---------------------|----------------|------------------------------|
+| v-model                | 密码初始值          | String         |                              |
+| v-model:visible        | 是否展示短密码框    | Boolean        | false                        |
+| title                  | 标题                | String         | 请输入密码                   |
+| desc                   | 密码框描述          | String         | 您使用了虚拟资产，请进行验证 |
+| tips                   | 提示语              | String         | 忘记密码                     |
+| close-on-click-overlay | 是否点击遮罩关闭    | Boolean        | true                         |
+| no-button              | 是否隐藏底部按钮    | Boolean        | true                         |
+| length                 | 密码长度，取值为4~6 | String、Number | 6                            |
+| error-msg              | 错误信息提示        | String         | ''                           |
 
 
 ### Event
 
-| 事件名称 | 说明 | 回调参数
-|----- | ----- | ----- 
-| change | 输入密码时触发事件 | --
-| ok | 点击确实时触发事件 | value
-| cancel | 点击取消时触发事件| value
-| close | 点击关闭图标时触发事件| value
-| complete | 输入完成的回调 | value
+| 事件名称 | 说明                   | 回调参数 |
+|----------|------------------------|----------|
+| change   | 输入密码时触发事件     | value    |
+| ok       | 点击确实时触发事件     | value    |
+| cancel   | 点击取消时触发事件     | value    |
+| close    | 点击关闭图标时触发事件 | value    |
+| complete | 输入完成的回调         | value    |
 

src/packages/shortpassword/index.vue

@@ -6,7 +6,7 @@
         borderRadius: '12px',
         textAlign: 'center'
       }"
-      v-model:show="show"
+      v-model:visible="show"
       :closeable="true"
       @click-close-icon="closeIcon"
       :close-on-click-overlay="closeOnClickOverlay"

src/packages/tabbar/demo.vue

@@ -10,7 +10,7 @@
     </nut-tabbar>
 
     <h2>自定义选中</h2>
-    <nut-tabbar v-model:show="active">
+    <nut-tabbar v-model:visible="active">
       <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
       <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
       <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>

src/packages/tabbar/doc.md

@@ -42,7 +42,7 @@ setup() {
 ### 自定义选中
 
 ``` html
-<nut-tabbar v-model:show="active">
+<nut-tabbar v-model:visible="active">
   <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
   <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
   <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
@@ -112,27 +112,27 @@ setup() {
 
 ### nut-tabbar
 
-| 字段           | 说明               | 类型   | 默认值  |
-|----------------|--------------------|--------|---------|
-| bottom         | 是否固定在页面底部 | Booble | false   |
-| show           | 选中标签的索引值   | number | 0       |
-| unactive-color | icon未激活的颜色   | string | #7d7e80 |
-| active-color   | icon激活的颜色     | string | #1989fa |
+| 字段            | 说明               | 类型   | 默认值  |
+|-----------------|--------------------|--------|---------|
+| v-model:visible | 选中标签的索引值   | number | 0       |
+| bottom          | 是否固定在页面底部 | Booble | false   |
+| unactive-color  | icon未激活的颜色   | string | #7d7e80 |
+| active-color    | icon激活的颜色     | string | #1989fa |
 
 ### tabbar-item
 
-| 字段      | 说明                                  | 类型   | 默认值 |
-|-----------|---------------------------------------|--------|--------|
-| tab-title | 标签页的标题                          | String | --     |
-| icon      | 标签页显示的[图标名称](#/icon) 或图片链接                       | String | --     |
-| href      | 标签页的跳转链接                      | String | --     |
-| num       | 页签右上角的数字角标，超出99之后为99+ | Number | --     |
+| 字段      | 说明                                      | 类型   | 默认值 |
+|-----------|-------------------------------------------|--------|--------|
+| tab-title | 标签页的标题                              | String | --     |
+| icon      | 标签页显示的[图标名称](#/icon) 或图片链接 | String | --     |
+| href      | 标签页的跳转链接                          | String | --     |
+| num       | 页签右上角的数字角标，超出99之后为99+     | Number | --     |
 
 
 ### Event
 
-| 事件名称  | 说明               | 回调参数           |
-|-----------|--------------------|--------------------|
+| 事件名称   | 说明               | 回调参数           |
+|------------|--------------------|--------------------|
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
 

src/packages/tabbar/index.vue

@@ -12,7 +12,7 @@ import tabbaritem from '@/packages/tabbaritem/index.vue';
 export default create({
   children: [tabbaritem],
   props: {
-    show: {
+    visible: {
       type: [Number, String],
       default: 0
     },
@@ -37,14 +37,14 @@ export default create({
       default: ''
     }
   },
-  emits: ['tab-switch', 'update:show'],
+  emits: ['tab-switch', 'update:visible'],
   setup(props, { emit, slots }) {
     const mdValue = reactive({
-      val: props.show,
+      val: props.visible,
       children: []
     });
     function changeIndex(active: number) {
-      emit('update:show', active);
+      emit('update:visible', active);
       parentData.modelValue = active;
       emit('tab-switch', parentData.children[active], active);
     }
@@ -58,7 +58,7 @@ export default create({
     });
     provide('parent', parentData);
     watch(
-      () => props.show,
+      () => props.visible,
       value => {
         parentData.modelValue = value;
       }

src/packages/textarea/doc.md

@@ -49,27 +49,27 @@ app.use(Textarea);
 
 ### Prop
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| value      | 输入值，支持双向绑定 | String |  -     |
-| placeholder         | 为空时占位符 | String |       `'请输入信息'`       |
-| label          | 	左侧文案                       | String | -             |
-| max-length          | 限制最长输入字符                   | String、Number | -               |
-| rows          | textarea的高度   | String、Number | `2`             |
-| limit-show          | textarea是否展示输入字符。须配合`max-length`使用  | Boolean | `false` |
-| autosize          | 高度是否可拉伸  | Boolean | `false` |
-| text-align          | 文本位置,可选值`left`,`center`,`right`     | String | `left` |
-| readonly          | 只读属性     | Boolean | `false` |
-| disabled          | 禁用属性     | Boolean | `false` |
+| 参数        | 说明                                             | 类型           | 默认值         |
+|-------------|--------------------------------------------------|----------------|----------------|
+| v-model     | 输入值，支持双向绑定                             | String         | -              |
+| placeholder | 为空时占位符                                     | String         | `'请输入信息'` |
+| label       | 左侧文案                                         | String         | -              |
+| max-length  | 限制最长输入字符                                 | String、Number | -              |
+| rows        | textarea的高度                                   | String、Number | `2`            |
+| limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
+| autosize    | 高度是否可拉伸                                   | Boolean        | `false`        |
+| text-align  | 文本位置,可选值`left`,`center`,`right`           | String         | `left`         |
+| readonly    | 只读属性                                         | Boolean        | `false`        |
+| disabled    | 禁用属性                                         | Boolean        | `false`        |
 
 
 ### Event
 
-| 名称  | 说明     | 回调参数    |
-|-------|----------|-------------|
-| change | 输入内容时触发 | val |
-| focus | 聚焦时触发 | val |
-| blur | 失焦时触发 | val |
+| 名称   | 说明           | 回调参数 |
+|--------|----------------|----------|
+| change | 输入内容时触发 | val      |
+| focus  | 聚焦时触发     | val      |
+| blur   | 失焦时触发     | val      |