upd: popup format prettier

src/packages/popup/demo.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell title="展示弹出层" is-link @click="state.showBasic = true"></nut-cell>
+    <nut-cell
+      title="展示弹出层"
+      is-link
+      @click="state.showBasic = true"
+    ></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:show="state.showBasic"
       >正文</nut-popup
     >
@@ -12,33 +16,53 @@
       :style="{ height: '20%' }"
       v-model:show="state.showTop"
     ></nut-popup>
-    <nut-cell title="底部弹出" is-link @click="state.showBottom = true"></nut-cell>
+    <nut-cell
+      title="底部弹出"
+      is-link
+      @click="state.showBottom = true"
+    ></nut-cell>
     <nut-popup
       position="bottom"
       :style="{ height: '20%' }"
       v-model:show="state.showBottom"
     ></nut-popup>
-    <nut-cell title="左侧弹出" is-link @click="state.showLeft = true"></nut-cell>
+    <nut-cell
+      title="左侧弹出"
+      is-link
+      @click="state.showLeft = true"
+    ></nut-cell>
     <nut-popup
       position="left"
       :style="{ width: '20%', height: '100%' }"
       v-model:show="state.showLeft"
     ></nut-popup>
-    <nut-cell title="右侧弹出" is-link @click="state.showRight = true"></nut-cell>
+    <nut-cell
+      title="右侧弹出"
+      is-link
+      @click="state.showRight = true"
+    ></nut-cell>
     <nut-popup
       position="right"
       :style="{ width: '20%', height: '100%' }"
       v-model:show="state.showRight"
     ></nut-popup>
     <h2>关闭图标</h2>
-    <nut-cell title="关闭图标" is-link @click="state.showIcon = true"></nut-cell>
+    <nut-cell
+      title="关闭图标"
+      is-link
+      @click="state.showIcon = true"
+    ></nut-cell>
     <nut-popup
       position="bottom"
       closeable
       :style="{ height: '20%' }"
       v-model:show="state.showIcon"
     ></nut-popup>
-    <nut-cell title="图标位置" is-link @click="state.showIconPosition = true"></nut-cell>
+    <nut-cell
+      title="图标位置"
+      is-link
+      @click="state.showIconPosition = true"
+    ></nut-cell>
     <nut-popup
       position="bottom"
       closeable
@@ -46,7 +70,11 @@
       :style="{ height: '20%' }"
       v-model:show="state.showIconPosition"
     ></nut-popup>
-    <nut-cell title="自定义图标" is-link @click="state.showCloseIcon = true"></nut-cell>
+    <nut-cell
+      title="自定义图标"
+      is-link
+      @click="state.showCloseIcon = true"
+    ></nut-cell>
     <nut-popup
       position="bottom"
       closeable
@@ -56,7 +84,11 @@
       v-model:show="state.showCloseIcon"
     ></nut-popup>
     <h2>圆角弹框</h2>
-    <nut-cell title="圆角弹框" is-link @click="state.showRound = true"></nut-cell>
+    <nut-cell
+      title="圆角弹框"
+      is-link
+      @click="state.showRound = true"
+    ></nut-cell>
     <nut-popup
       position="bottom"
       closeable
@@ -81,7 +113,11 @@
       v-model:show="state.showCombination"
     ></nut-popup> -->
     <h2>指定挂载节点</h2>
-    <nut-cell title="指定挂载节点" is-link @click="state.showTeleport = true"></nut-cell>
+    <nut-cell
+      title="指定挂载节点"
+      is-link
+      @click="state.showTeleport = true"
+    ></nut-cell>
     <nut-popup
       :style="{ padding: '30px 50px' }"
       teleport="#app"
@@ -92,9 +128,9 @@
 </template>
 
 <script lang="ts">
-import { reactive } from "vue";
-import { createComponent } from "@/utils/create";
-const { createDemo } = createComponent("popup");
+import { reactive } from 'vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('popup');
 export default createDemo({
   props: {},
   setup() {
@@ -108,10 +144,10 @@ export default createDemo({
       showIconPosition: false,
       showCloseIcon: false,
       showRound: false,
-      showCombination: false,
+      showCombination: false
     });
     return { state };
-  },
+  }
 });
 </script>
 

src/packages/popup/index.vue

@@ -45,99 +45,96 @@ import {
   watch,
   computed,
   reactive,
-  Component,
   PropType,
-  CSSProperties,
-  Teleport,
-  h,
-} from "vue";
-import { useLockScroll } from "./use-lock-scroll";
-import Overlay, { overlayProps } from "./overlay/index.vue";
-import { createComponent } from "@/utils/create";
-const { componentName, create } = createComponent("popup");
-
-let _global = {
-  zIndex: 2000,
-  overLayCount: 0,
-};
+  CSSProperties
+} from 'vue';
+import { useLockScroll } from './use-lock-scroll';
+import Overlay, { overlayProps } from './overlay/index.vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('popup');
+
+// let _global = {
+//   zIndex: 2000,
+//   overLayCount: 0
+// };
 
 let _zIndex = 2000;
 
 const popupProps = {
   id: {
-    type: [String, Number],
+    type: [String, Number]
   },
   position: {
     type: String,
-    default: "center",
+    default: 'center'
   },
 
   transition: String,
 
   style: {
-    type: Object as PropType<CSSProperties>,
+    type: Object as PropType<CSSProperties>
   },
 
   closeable: {
     type: Boolean,
-    default: false,
+    default: false
   },
 
   closeIconPosition: {
     type: String,
-    default: "top-right",
+    default: 'top-right'
   },
 
   closeIcon: {
     type: String,
-    default: "close",
+    default: 'close'
   },
 
   destroyOnClose: {
     type: Boolean,
-    default: false,
+    default: false
   },
 
   teleport: {
     type: [String, Element],
-    default: "body",
+    default: 'body'
   },
 
   round: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 };
 
 export default create({
   Component: {
-    "nut-popup-overlay": Overlay,
+    'nut-popup-overlay': Overlay
   },
   props: {
     ...overlayProps,
-    ...popupProps,
+    ...popupProps
   },
   emits: [
-    "click",
-    "click-close-icon",
-    "open",
-    "close",
-    "opend",
-    "closed",
-    "update:show",
-    "click-overlay",
+    'click',
+    'click-close-icon',
+    'open',
+    'close',
+    'opend',
+    'closed',
+    'update:show',
+    'click-overlay'
   ],
 
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     // if (props.id) console.log(props.id);
     let opened;
     let keepAlive;
-    let ocount = 1;
+    // let ocount = 1;
     const state = reactive({
       zIndex: 0,
       showSlot: true,
       transitionName: `popup-fade-${props.position}`,
-      overLayCount: 1,
+      overLayCount: 1
     });
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
@@ -145,8 +142,8 @@ export default create({
     const popStyle = computed(() => {
       return {
         zIndex: state.zIndex,
-        animationDuration: props.duration ? `${props.duration}s` : "initial",
-        ...props.style,
+        animationDuration: props.duration ? `${props.duration}s` : 'initial',
+        ...props.style
       };
     });
 
@@ -169,7 +166,7 @@ export default create({
       if (opened) {
         opened = false;
         unlockScroll();
-        emit("update:show", false);
+        emit('update:show', false);
         if (props.destroyOnClose) {
           setTimeout(() => {
             state.showSlot = false;
@@ -178,28 +175,28 @@ export default create({
       }
     };
 
-    const onClick = (e) => {
-      emit("click", e);
+    const onClick = e => {
+      emit('click', e);
     };
 
-    const onClickCloseIcon = (e) => {
-      emit("click-close-icon", e);
+    const onClickCloseIcon = e => {
+      emit('click-close-icon', e);
       close();
     };
 
-    const onClickOverlay = (e) => {
+    const onClickOverlay = e => {
       if (props.closeOnClickOverlay) {
-        emit("click-overlay");
+        emit('click-overlay', e);
         close();
       }
     };
 
-    const onOpened = (e) => {
-      emit("opend");
+    const onOpened = e => {
+      emit('opend', e);
     };
 
-    const onClosed = (e) => {
-      emit("closed");
+    const onClosed = e => {
+      emit('closed', e);
     };
 
     onMounted(() => {
@@ -223,7 +220,7 @@ export default create({
 
     onActivated(() => {
       if (keepAlive) {
-        emit("update:show", true);
+        emit('update:show', true);
         keepAlive = false;
       }
     });
@@ -237,22 +234,22 @@ export default create({
 
     watch(
       () => props.show,
-      (value) => {
+      value => {
         if (value) {
           open();
-          emit("open");
+          emit('open');
         } else {
           close();
-          emit("close");
+          emit('close');
         }
       }
     );
 
     watch(
       () => props.position,
-      (value) => {
-        value === "center"
-          ? (state.transitionName = "popup-fade")
+      value => {
+        value === 'center'
+          ? (state.transitionName = 'popup-fade')
           : (state.transitionName = `popup-slide-${value}`);
       }
     );
@@ -265,13 +262,14 @@ export default create({
       onClosed,
       state,
       popStyle,
+      componentName
     };
 
     // return renderOverlay();
-  },
+  }
 });
 </script>
 
 <style lang="scss">
-@import "index.scss";
+@import 'index.scss';
 </style>

src/packages/popup/overlay/index.vue

@@ -10,40 +10,40 @@
   </Transition>
 </template>
 <script lang="ts">
-import { toRefs, CSSProperties, PropType, Transition } from "vue";
-import { createComponent } from "@/utils/create";
-const { componentName, create } = createComponent("popup-overlay");
+import { toRefs, CSSProperties, PropType, Transition } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('popup-overlay');
 const overlayProps = {
   show: {
     type: Boolean,
-    default: false,
+    default: false
   },
   zIndex: {
-    type: [Number, String],
+    type: [Number, String]
   },
   duration: {
     type: [Number, String],
-    default: 0.3,
+    default: 0.3
   },
   overlayClass: {
     type: String,
-    default: "",
+    default: ''
   },
   lockScroll: {
     type: Boolean,
-    default: true,
+    default: true
   },
   overlayStyle: {
-    type: Object as PropType<CSSProperties>,
+    type: Object as PropType<CSSProperties>
   },
   overlay: {
     type: Boolean,
-    default: true,
+    default: true
   },
   closeOnClickOverlay: {
     type: Boolean,
-    default: true,
-  },
+    default: true
+  }
 };
 
 export { overlayProps };
@@ -52,12 +52,12 @@ export default create({
   props: overlayProps,
   emits: [],
   setup(props) {
-    const touchmove = (e) => {
+    const touchmove = e => {
       if (props.lockScroll) {
         e.preventDefault();
       }
     };
     return { touchmove };
-  },
+  }
 });
 </script>

src/packages/popup/use-lock-scroll.ts

@@ -18,5 +18,4 @@ export const useLockScroll = (isLock: () => boolean) => {
   };
 
   return [lock, unlock];
-
-}
+};