fix(cli): work in progress

affects: @varlet/cli, @varlet/ui
varletjs · Mar 9, 2021 · ed362c7 · ed362c7
1 parent 01b690f
commit ed362c7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -512,7 +512,7 @@ iframe {
             display: block;
             content: '';
             background: @color-primary;
-            width: 2px;
+            width: 4px;
             height: 40px;
             position: absolute;
             left: 0;

diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
@@ -34,31 +34,40 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const { zIndex } = useZIndex(props, 'show', 1)
-
     const host: Ref<null | HTMLElement> = ref(null)
     const menu: Ref<null | HTMLElement> = ref(null)
-
     const top: Ref<number> = ref(0)
     const left: Ref<number> = ref(0)
+    const { zIndex } = useZIndex(props, 'show', 1)
+    let clickSelf = false
+
     const computeTop = (alignment: string): number => {
       return alignment === 'top'
         ? getTop(host.value as HTMLElement)
         : getTop(host.value as HTMLElement) - (menu.value as HTMLElement).offsetHeight
     }
 
-    let clickSelf = false
-
     const handleClick = () => {
       clickSelf = true
     }
 
+    const handleMenuBlur = () => {
+      if (clickSelf) {
+        clickSelf = false
+        return
+      }
+
+      props['onUpdate:show']?.(false)
+      props.onBlur?.()
+    }
+
     watch(
       () => props.alignment,
       (newValue: string) => {
         props.show === true && (top.value = computeTop(newValue))
       }
     )
+
     watch(
       () => props.show,
       async (newValue: boolean) => {
@@ -69,22 +78,13 @@ export default defineComponent({
       { immediate: true }
     )
 
-    const handleMenuBlur = () => {
-      if (clickSelf) {
-        clickSelf = false
-        return
-      }
-
-      props['onUpdate:show']?.(false)
-      props.onBlur?.()
-    }
-
     onMounted(() => {
       top.value = computeTop(props.alignment)
       left.value = getLeft(host.value as HTMLElement)
 
       document.addEventListener('click', handleMenuBlur)
     })
+
     onUnmounted(() => {
       document.removeEventListener('click', handleMenuBlur)
     })

diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
@@ -1,9 +1,5 @@
 <template>
-  <var-menu
-    v-model:show="show"
-    alignment="bottom"
-    style="margin-top: 200px"
-  >
+  <var-menu v-model:show="show" alignment="bottom" style="margin-top: 200px">
     <var-button @click="show = true">trigger</var-button>
 
     <template #menu>
@@ -12,9 +8,6 @@
         <div class="item" v-ripple>2</div>
         <div class="item" v-ripple>3</div>
         <div class="item" v-ripple>4</div>
-        <div class="item" v-ripple>
-          <img style="width: 200px" src="https://ddtask.oss-cn-shanghai.aliyuncs.com/ddtask/kys201214/1607926305985.jpg?Expires=1608029346&OSSAccessKeyId=TMP.3Ke7z6wmczN6Rbw6CcUoDSchEaMvC4GMf3zeb53CDs7KcwN7CaPQVAeyvcaNffbNaoX8mWwXBanBGa3auxKKWtrgj3a27k&Signature=96PLJC4TMa0mKogBF8Zd6WL8lmY%3D&versionId=CAEQFBiBgMDp2cD_shciIDQ0YTI1MDU0YmEzNTRmZTU4OTIzMzg4YWE4NzNhMjI2&response-content-type=application%2Foctet-stream">
-        </div>
       </div>
     </template>
   </var-menu>
@@ -29,25 +22,24 @@ import Ripple from '../../ripple'
 export default defineComponent({
   name: 'MenuExample',
   directives: {
-    Ripple
+    Ripple,
   },
   components: {
     [Menu.name]: Menu,
-    [Button.name]: Button
+    [Button.name]: Button,
   },
   setup() {
     const show: Ref<boolean> = ref(false)
 
     return {
       show,
     }
-  }
+  },
 })
 </script>
 
 <style scoped lang="less">
 .list {
-
   .item {
     width: 70vw;
     padding: 10px 20px;

diff --git a/packages/varlet-ui/types/index.d.ts b/packages/varlet-ui/types/index.d.ts
@@ -1,9 +1,10 @@
 import { Button } from './Button'
+import { Popup } from './Popup'
 import { Ripple } from './Ripple'
 import { VarComponent } from './VarComponent'
 import { VarDirective } from './VarDirective'
 import { App } from 'vue'
 
 export const install: (app: App) => void
 
-export { Button, Ripple, VarComponent, VarDirective }
+export { Button, Popup, Ripple, VarComponent, VarDirective }