zoukankan      html  css  js  c++  java
  • Vue-Grid-Layout分享一款好用的可拖拽组件

    在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid layout的字眼,然后尝试去搜了下有没有这方面的组件,一搜果然是有这样的组件的。首先看到的是react版本的组件,然后搜了下也有vue相关的。 以前也见过jquery的可拖拽组件demo,但是整体上感觉不如grid-layout优秀。
    
    【1】 VUE Grid Layout.
    
    【2】React Grid Layout
    
    【3】jQuery响应式可拖拽的元素组件网格布局插件
    
    每个组件在GitHub上的介绍还是比较清晰易懂,项目中主要用到了vue-grid-layout组件,下面简单介绍下。
    
    执行如下命令安装
    
    npm install vue-grid-layout --save
    然后新增一个grid_layout.vue文件
    
    <template>
      <div>
        <grid-layout
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :layoutList="testLayout">
        </grid-layout>
      </div>
    </template>
     
    <script>
      import gridLayout from './../comm/grid_layout'
     
      export default {
        data() {
          return {
            testLayout: [
              {"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"},
              {"x": 4, "y": 0, "w": 4, "h": 7, "i": "1"},
              {"x": 8, "y": 0, "w": 4, "h": 7, "i": "2"},
              {"x": 0, "y": 7, "w": 4, "h": 6, "i": "3"},
              {"x": 0, "y": 13, "w": 4, "h": 5, "i": "4"},
              {"x": 4, "y": 7, "w": 4, "h": 11, "i": "5"},
              {"x": 8, "y": 7, "w": 4, "h": 6, "i": "6"},
              {"x": 8, "y": 13, "w": 4, "h": 5, "i": "7"}
            ]
          }
        },
        components: {
          gridLayout
        },
      }
    </script>
     
    <style scoped>
    </style>
    is-draggable 表示是否可拖拽,设置为true,说明是可以随意拖拽的
    is-resizable 表示是否可缩放,设置为ture,说明可以通过鼠标调整每一区域的大小
    layoutList   是绑定的数据实体,用来标识区域大小的
    
    layoutList是一个对象数据,每一个对象如下
    {"x": 0, "y": 0, "w": 4, "h": 7, "i": "0"}
    其中:
    x 标识该区域左上角点的x坐标
    y 标识该区域左上角点的y坐标
    w 是宽度
    h 是高度
    i 是唯一标示,表示必须唯一,且不同,不然,你会发现改变大小的时候,所有的都会被改变。。。
    --------------------- 
    作者:凉茶冰 
    来源:CSDN 
    原文:https://blog.csdn.net/liangcha007/article/details/88963551 
    版权声明:本文为博主原创文章,转载请附上博文链接!
  • 相关阅读:
    【sqlalchemy】使用正确的DB_URI却报错密码错误-密码中包含特殊符号导致
    为什么只调用了1次函数,但是该函数却被执行了2次呢?
    【flask】使用类组织配置-使用工厂函数创建程序实例
    【python3】configparser读取ini配置文件
    【flask】使用配置类管理app测试环境-demo版
    【flask】flask项目配置 app.config
    【flask】环境配置-python-dotenv的使用
    从pip+requirements.txt+virtualenv管理依赖到使用pipenv管理依赖-修改布署方式
    【MAC】安装chrome浏览器
    【MAC】图片编辑工具-合成图片
  • 原文地址:https://www.cnblogs.com/Jeely/p/11231769.html
Copyright © 2011-2022 走看看