Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue-Split how to achieve panel segmentation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue-Split how to achieve panel segmentation" this article.

The details are as follows

Click reduce the left width export default {components: {}, data () {return {/ / define a value here. In this way, the user can directly specify the percentage value / / the value used in the page css layout can be leftOffset:0.3, triggerWidth:8}} using the calculation attribute stitching, computed: {/ / dynamic attribute to splice the data leftOffsetPercent () {return `${this.leftOffset * 100}%} actually needed by css. TriggerWidthPx () {return `${this.triggerWidth} px`}, triggerLeft () {return `calc (${this.leftOffset * 100}%-${this.triggerWidth/2} px)`},}, methods: {handleClick () {this.leftOffset-= 0.02}},} .split-pane-wrapper {width: 100% Height: 100%; position: relative;. Accounts {position: absolute; height: 100%; top:0; &-left {/ * width: 30% brown; / background: brown;} &-right {right: 0; bottom: 0; / * left: 30% brown; / background: chartreuse } &-trigger-con {z-index: 100; height: 100%; background: red; position: absolute; top: 0;} above is all the content of the article "how to split panels in vue-Split". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.