欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-Split實現(xiàn)面板分割

 更新時間：2022年03月22日 17:12:02   作者：搬磚界的小菇娘  
這篇文章主要為大家詳細介紹了vue-Split實現(xiàn)面板分割，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue-Split實現(xiàn)面板分割的具體代碼，供大家參考，具體內(nèi)容如下

<template>
? <div class="split-pane-wrapper">
? ? <div class="pane pane-left" :style="{width:leftOffsetPercent}">
? ? ? <button @click="handleClick">點擊減少左側(cè)寬度</button>
? ? </div>
? ? <div class="pane-trigger-con" :style="{left:triggerLeft,width:triggerWidthPx}"></div>
? ? <div class="pane pane-right" :style="{left:leftOffsetPercent}"></div>
? </div>
</template>

<script>
export default {
? components: {},

? data() {
? ? return{
? ? ? // 在這定義一個值。這樣用戶可以直接指定占比的值
? ? ? // 在頁面css 布局使用的值 使用計算屬性拼接即可
? ? ? leftOffset:0.3,
? ? ? triggerWidth:8
? ? }
? },
? computed:{
? ? // 動態(tài)屬性去拼接生成css 實際需要的代%形式的數(shù)據(jù)
? ? leftOffsetPercent(){
? ? ? return `${this.leftOffset * 100}%`
? ? },
? ? triggerWidthPx(){
? ? ? return `${this.triggerWidth}px`
? ? },
? ? triggerLeft(){
? ? ? return `calc(${this.leftOffset * 100}% - ${this.triggerWidth/2}px)`
? ? },
? },

? methods: {
? ? handleClick(){
? ? ? this.leftOffset -= 0.02
? ? }
? },
}
</script>?

<style lang="scss" scoped>
? .split-pane-wrapper{
? ? width: 100%;
? ? height: 100%;
? ? position: relative;
? ? .pane{
? ? ? position: absolute;
? ? ? height: 100%;
? ? ? top:0;
? ? ? &-left{
? ? ? ? /*width: 30%;*/
? ? ? ? background: brown;
? ? ? }
? ? ? &-right{
? ? ? ? right: 0;
? ? ? ? bottom: 0;
? ? ? ? /*left: 30%;*/
? ? ? ? background: chartreuse;
? ? ? }
? ? ? &-trigger-con{
? ? ? ? z-index: 100;
? ? ? ? height: 100%;
? ? ? ? background: red;
? ? ? ? position: absolute;
? ? ? ? top: 0;
? ? ? }
? ? }
? }
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論