摘要：接著上一個的制作今天少寫點代碼吧首頁增加如下代碼給增加自適應高度首頁這里解釋下頂部的高度底部的高度寫法很多不過達到效果就行了在窗口拉伸的時候可以自適應高度模板代碼樣式會話列表界面模板代碼老李最近好嗎樣式代碼

接著上一個的制作!

今天少寫點代碼吧!
首頁增加如下代碼 給main 增加自適應高度

data(){
mainHeight: parseInt(document.documentElement.clientHeight) - 140 - 40,
}

mounted() {
      window.onresize = () => {
       this.mainHeight = parseInt(document.documentElement.clientHeight) - 140 - 40;
     }
},

這里解釋下 -頂部header的高度(140) 底部的高度(40) 寫法很多 不過達到效果就行了 在窗口拉伸的時候可以自適應高度

    main
            position: fixed
            overflow-y: hidden
    width: 100%

 

            

                

                    

                    

                        
Hello 老李
                        
最近好嗎
                    
                
            
        

        main
            position: fixed
            overflow-y: hidden
            width: 100%
            li
                height: 60px
                border-bottom: 1px solid #CCC
                display: flex
                cursor: pointer
                &:hover
                    background-color: #B8CBD5
                .face
                    width: 40px
                    padding-top: 10px
                    height: 40px
                    padding-left: 10px
                    img
                        border-radius: 50%
                        width: 100%
                        height: 100%
                .info
                    padding-top: 8px
                    padding-left: 10px
                    p.nickname
                        color: #FF0000
                        font-size: 15px
                    .msg
                        font-size: 12px
                        padding-top: 3px

::-webkit-scrollbar { /*滾動條整體樣式*/
    width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb { /*滾動條里面小方塊*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    background: rgba(20, 20, 50, 0.6);
}

::-webkit-scrollbar-track { /*滾動條里面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}

以上模板代碼中有一個

 :class="{showScroll:isShowScroll}" @mouseenter="showScrolls"
              @mouseleave="hideScroll"

我們只需要在data 中定義一個 isShowScroll:fase

之后再創建一個showScroll 類

.showScroll {
    overflow-y: scroll !important
}

hideScroll() {
    this.isShowScroll = false
 },
showScroll() {
   this.isShowScroll = true
},

這樣就解決了滾動條顯示隱藏

.menu
  width: 180px
  background-color: rgba(255,255,255,0.8)
  border-radius: 4px
  box-shadow: #FFFFFF 0 0 10px
  position: absolute
  top: 150px
  left: 100px
  font-family: "微軟雅黑"
  font-size: 14px
  padding: 10px 0
  li
    list-style: none
    height: 30px
    line-height: 30px
    cursor: pointer
    padding-left: 30px
    position: relative
    &:hover
      background-color: #E9EBEC
    i
      position: absolute
      margin-right: 10px
      left: 10px
    &.line
      border-bottom: 1px solid #E8EAEB

在main 中增加 contextmenu 將點擊的坐標傳到menu組件中 之后顯示就行了

    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            },
            position:{
                type: Object
            }
        }
    }

對于坐標的計算目前有一定的小問題 之后再解決 天色很晚了