vue-Split实现面板分割

本文实例为大家分享了vue-Split实现面板分割的具体代码，供大家参考，具体内容如下

<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left" :style="{width:leftOffsetPercent}">
      <button @click="handleClick">点击减少左侧宽度</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:{
    // 动态属性去拼接生成css 实际需要的代%形式的数据
    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>

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

赞 (0)

相关推荐

  • vue 输入电话号码自动按3-4-4分割功能的实现代码

    输入框绑定 <input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/> 监听事件,每次号码发生改变时触发 大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式. watch: { phoneNum (newValue,

  • Vue实现拖拽式分割布局

    Vue实现拖拽式分割布局

    本文实例为大家分享了Vue实现拖拽式分割布局的具体代码,供大家参考,具体内容如下 示例展示 代码 特地写了一个demo代码,可以直接复制下来运行 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width

  • vue3 可拖动的左右面板分割组件实现

    vue3 可拖动的左右面板分割组件实现

    目录 分解组件 左侧面板 右侧面板 入参分解 props slots 具体实现 如何拖动呢? 事件监听 宽度处理 优化 bug git地址 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,本文就整理一下,分享给大家,具体如下: 效果图 分解组件 整体使用flex布局 左侧面板 面板的具体内容通过slot具名插槽传入. title通过prop传入 可拖动,为了保证内容样式不会被拖动所破坏,对面板的宽度设定最大值/最小值 右侧面板 右侧面板宽度随着左侧面板的宽度变化而

  • vue实现拖拽滑动分割面板

    本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码,供大家参考,具体内容如下 需求背景 左边是列表,右边是详情. 想更大范围的查看详情,所以要拖拽滑块,进行面板的分割 整体思路 在布局上,采用flex布局,单位采用百分比.设置flex:1,让其自动伸缩 滑动滑块,计算滑块在滑动过程中,占整个页面的百分比 将百分比,通过动态样式赋值给列表页的宽度 同时改变滑块的位置(也是百分比形式) 其次就是在vue里对鼠标事件的使用 代码实现 在template里 写事件 @mousedown.preve

  • vue代码分割的实现(codesplit)

    在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢.做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升. 一.未分割时浏览器加载js的情况 可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大 二.做了代码分割后浏览器加载js情况 发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况 点到其他

  • vue实现分割验证码效果

    vue实现分割验证码效果

    本文实例为大家分享了vue实现分割验证码效果的具体代码,供大家参考,具体内容如下 注:该代码存在问题,因为我maxlength =4 ,input 的宽度跟屏幕同宽,所以当我input 里面的length == 4 的时候,我的光标会超出屏幕,所以我在length == 4 的时候做了一个把光标放到第三个的处理,这种虽用户体验不好,也解了length==4的时候整个布局乱了的燃眉之急 上UI 图 上代码: vue <template>   <div>     <v-main

  • vuex Module将 store 分割成模块的操作

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, gette

  • Vue实现数字输入框中分割手机号码的示例

    需求 在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割. 分析: 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch 手机号码为11位,加上两个空格,最多13位,因此要限定长度 代码实现 <body> <div id="app"> <!-- 类型为phone,最大长度为13 --> <

  • java String.split 无法使用小数点分割的问题

    目录 String.split 无法使用小数点分割 解决方法 String.split()方法的注意点(转义符) 1.字符串中存在.和|的时候 2.如果在一个字符串中有多个分隔符 String.split 无法使用小数点分割 当我分割文件名的时候,想使用split来进行分割,由于文件名使用的是".",当我使用此分割时候数组返回无效 当然也可以使用indexof+length的方式来截取 解决方法 连续使用"\\."对小数点进行转义即可 因此我去eclipse测试了下

  • vue-Split实现面板分割

    vue-Split实现面板分割

    本文实例为大家分享了vue-Split实现面板分割的具体代码,供大家参考,具体内容如下 <template>   <div class="split-pane-wrapper">     <div class="pane pane-left" :style="{width:leftOffsetPercent}">       <button @click="handleClick"&g

  • MySql字符串拆分实现split功能(字段分割转列)

    MySql字符串拆分实现split功能(字段分割转列)

    目录 需求描述 实现的sql 案例演示 字符串拆分: SUBSTRING_INDEX(str, delim, count) 替换函数:replace( str, from_str, to_str) 获取字符串长度:LENGTH( str ) 实现的原理解析 扩展:判断外部值是否在 num列值中 文章参考 需求描述 数据库中 num字段值为: 实现的效果:需要将一行数据变成多行 实现的sql SELECT SUBSTRING_INDEX(SUBSTRING_INDEX('7654,7698,778

  • Linux中split大文件分割和cat合并文件详解

    前言 当需要将较大的数据上传到服务器,或从服务器下载较大的日志文件时,往往会因为网络或其它原因而导致传输中断而不得不重新传输.这种情况下,可以先将大文件分割成小文件后分批传输,传完后再合并文件. 1. 分割文件 文件分割可以使用split命令,该即支持文本文件分割,又支持二进制文件分割:而合并文件可以使用cat命令. 1.1 文本文件分割 分割文本文件时,可以按文件大小分割,也可以按文本行数分割. 按文件大小分割 按文件大小分割文件时,需要以-C参数指定分割后的文件大小: $ split -C

  • Asp Split函数之使用多个分割符的方法

    首先,我在知道Split这个函数的作用,是把一个字符串按指定的分割符分割成一个字符串数组. ASP里有这个Split,是这样定义的dim Split(byval source as string ,byval str as string) as string()   source是源字符串,str是分隔符   我这里用了VB.net的写法,方便说明返回值的类型和参数的类型.   大家一看就明白怎么用了. 在C#里,我们是这样用的   string[] Split(string source,ch

  • C# Split函数根据特定分隔符分割字符串的操作

    在C#程序开发过程中,很多时候可能需要将字符串根据特定的分割字符分割成字符或者List集合,例如根据逗号将字符串分割为数组,或者根据竖线将字符串分割成数组,C#中提供了Split()函数来快速将字符串分割成数组形式,如果需要转换为List集合,可在分割完成后使用数组的ToList()方法即可转换为List集合数据. 例如下列例子,将字符str按照逗号分隔成数组. string str = "A,B,C,D,E,F,G"; string[] strArr = str.Split(',')

  • C++中string字符串分割函数split()的4种实现方法

    目录 一.使用stringstream流 二.使用string类提供的find方法与substr方法 三.使用C库函数strtok 四.使用regex_token_iterator(正则表达式) 总结 如: string str1 = "This is a test"; string str2 = "This-is-a-test"; string str2 = "This+is+a+test"; 我们如何将以上字符串按照某种分隔符( ,-,+),

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

随机推荐