vue中split,vue字符串分割split

　　这篇文章主要为大家详细介绍了某视频剪辑软件分裂实现面板分割，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件分裂实现面板分割的具体代码，供大家参考，具体内容如下

　　模板

　　div class=拆分窗格包装

　　div class= pane pane-left :style= { width:leftOffsetPercent }

　　button @click=handleClick 点击减少左侧宽度/按钮

　　/div

　　 pane-trigger-con :style= { left:trigger left，width:triggerWidthPx}/div

　　div class= pane pane-right :style= { left:leftOffsetPercent } /div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　组件：{},

　　data() {

　　返回{

　　//在这定义一个值。这样用户可以直接指定占比的值

　　//在页面钢性铸铁布局使用的值使用计算属性拼接即可

　　左偏移：0.3,

　　触发器宽度：8

　　}

　　},

　　计算值：{

　　//动态属性去拼接生成钢性铸铁实际需要的代%形式的数据

　　leftOffsetPercent(){

　　返回“${这个。左偏移* 100 } % "

　　},

　　triggerWidthPx(){

　　返回“${这个。触发宽度}像素"

　　},

　　triggerLeft(){

　　return ` calc($ { this。左偏移量* 100 } %-$ { this。触发宽度/2 }像素)` 1

　　},

　　},

　　方法：{

　　handleClick(){

　　this.leftOffset -=0.02

　　}

　　},

　　}

　　/脚本

　　样式lang=scss 范围。拆分窗格包装{

　　宽度：100%;

　　身高：100%;

　　位置：相对；窗格{

　　位置：绝对；

　　身高：100%;

　　top:0；

　　-左侧{

　　/*宽度：30%;*/

　　背景：棕色；

　　}

　　-右{

　　右：0;

　　底部：0;

　　/*左：30%;*/

　　背景：黄绿色；

　　}

　　-触发器控制{

　　z指数：100;

　　身高：100%;

　　背景：红色；

　　位置：绝对；

　　top:0；

　　}

　　}

　　}

　　/风格

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。