fix(cli,ui): 修改pc站点布局, 修改menu left获取问题

affects: @varlet/cli, @varlet/icons, @varlet/ui
varletjs · Mar 12, 2021 · 87d6041 · 87d6041
1 parent 428a8e1
commit 87d6041
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 31 deletions.
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -174,15 +174,8 @@ export default defineComponent({
 <style lang="less">
 @import '~@varlet/ui/es/styles/var';
 
-body,
-html,
-#app {
-  width: 100%;
-  height: 100%;
-  overflow-y: hidden;
-}
-
 body {
+  min-width: 1200px;
   margin: 0;
   padding: 0;
   font-family: 'Roboto', 'Noto Sans SC', serif;
@@ -197,10 +190,6 @@ iframe {
 
 .varlet {
   &-site {
-    min-width: 1200px;
-    width: 100%;
-    height: 100%;
-
     &-mobile {
       flex: 0 0 360px;
       transform: scale(0.8);
@@ -364,15 +353,14 @@ iframe {
     }
 
     &-content {
-      height: calc(100% - 60px);
+      height: calc(100vh - 60px);
       overflow-y: hidden;
       display: flex;
       background: #fff;
     }
 
     &-doc {
-      min-width: 300px;
-      flex: 1;
+      min-width: 500px;
       padding: 0 30px;
       overflow-y: auto;
 
@@ -512,9 +500,10 @@ iframe {
 
     &-nav {
       padding: 10px 0;
-      flex: 0 0 220px;
       position: sticky;
+      flex: 0 0 220px;
       top: 0;
+      bottom: 0;
       left: 0;
       z-index: 1;
       overflow-y: scroll;

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -18,12 +18,7 @@
   />
 
   <var-button block @click="show1 = true">异步关闭</var-button>
-  <var-dialog
-    v-model:show="show1"
-    title="兰亭序"
-    message="兰亭临帖 行书如行云流水"
-    @before-close="onBeforeClose"
-  />
+  <var-dialog v-model:show="show1" title="兰亭序" message="兰亭临帖 行书如行云流水" @before-close="onBeforeClose" />
 
   <var-button block @click="show2 = true">自定义插槽</var-button>
   <var-dialog v-model:show="show2">
@@ -67,13 +62,9 @@ export default {
       close: () => Snackbar.info('close'),
     }
 
-    const createBasic = () => {
-      Dialog('兰亭临帖 行书如行云流水')
-    }
+    const createBasic = () => Dialog('兰亭临帖 行书如行云流水')
 
-    const createAction = async () => {
-      actions[await Dialog('兰亭临帖 行书如行云流水')]()
-    }
+    const createAction = async () => actions[await Dialog('兰亭临帖 行书如行云流水')]()
 
     const modifyTitle = () => {
       Dialog({
@@ -102,7 +93,7 @@ export default {
     const asyncClose = () => {
       Dialog({
         message: '兰亭临帖 行书如行云流水',
-        onBeforeClose
+        onBeforeClose,
       })
     }
 
@@ -117,7 +108,7 @@ export default {
       modifyTitle,
       hideButton,
       onBeforeClose,
-      Snackbar
+      Snackbar,
     }
   },
 }

diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
@@ -14,7 +14,8 @@ export function getScrollTop(element: Element | Window): number {
 }
 
 export function getLeft(element: HTMLElement): number {
-  return element.getBoundingClientRect().left
+  const { left } = element.getBoundingClientRect()
+  return left + (document.body.scrollLeft || document.documentElement.scrollLeft)
 }
 
 export function inViewport(element: HTMLElement): boolean {