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

接著上一個的制作!

今天少寫點(diǎn)代碼吧!
首頁增加如下代碼 給main 增加自適應(yīng)高度

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

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

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

    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; /*高寬分別對應(yīng)橫豎滾動條的尺寸*/
    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

之后再創(chuàng)建一個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 將點(diǎn)擊的坐標(biāo)傳到menu組件中 之后顯示就行了

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

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