vue3+ts+vue-grid-layout 实现组件拖拽效果以及解决Vue3使用 vue-grid-layout的问题_vue-grid-layout vue3 +ts-程序员宅基地

技术标签： vue-grid-layout  前端  vue3  vue.js  javascript  ts  

1、安装（vue3安装此版本）

npm add vue-grid[email protected]

2、在main.ts里面引入并use

import { createApp, Directive } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'


import VueGridLayout from 'vue-grid-layout'//引入layout
app
  .use(router)
  .use(store, key)
  .use(VueGridLayout)

 3、ts需要在shims-vue.d.ts中声明

declare module 'vue-grid-layout'{
  import VueGridLayout from 'vue-grid-layout'

  
  export default VueGridLayout
}

4、使用--在页面文件中

import { GridLayout, GridItem } from "vue-grid-layout"
export default {
    components: {
        GridLayout,
        GridItem
    },

 5、参考官网实例以及相关属性介绍

01 - 基本 | Vue Grid Layout -️ 适用Vue.js的栅格布局系统

注意：vue3版本需要按照以上步骤使用，否则会报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor

效果：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60886885/article/details/130100531

智能推荐

python机器学习——决策树_python实现连续型变量的回归预测-程序员宅基地

文章浏览阅读779次。python机器学习——决策树_python实现连续型变量的回归预测

我的秋招经验分享（内附校招交流群）-程序员宅基地

文章浏览阅读1.4k次。我的秋招经验分享（内附笔面试干货）本文出自公众号：程序员江湖。满满干货，关注就送。时间过得很快，已经到了九月中旬，从16年读研到现在将近两年的时间里，从一个Java初...

ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍-程序员宅基地

文章浏览阅读232次。如果我是C罗原文ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍sequence在ORACLE中应用十分广泛,就是序列号的意思,会自动增加指定变数,如逐次增加1或者2或者其他.1.创建序列 Create Sequence你首先要有CREATE SEQUENCE或者CREATE ANY SEQUENCE 权限C..._pl/sql body 怎样使用序列

VINS-Mono代码阅读笔记（二）：feature_tracker代码阅读_image discontinue! reset the feature tracker!-程序员宅基地

文章浏览阅读3.8k次，点赞14次，收藏22次。1.入口main函数feature_tracker结点的入口函数为feature_tracker_node.cpp文件中的main函数。main函数代码如下：/** * feature_tracker_node的入口函数*/int main(int argc, char **argv){ ros::init(argc, argv, "feature_tracker");..._image discontinue! reset the feature tracker!

古堡算式ABCDE * ? = EDCBA-程序员宅基地

文章浏览阅读1.7k次。/*福尔摩斯到某古堡探险，看到门上写着一个奇怪的算式： ABCDE * ? = EDCBA 他对华生说：“ABCDE应该代表不同的数字，问号也代表某个数字！” 华生：“我猜也是！” 于是，两人沉默了好久，还是没有算出合适的结果来。 请你利用计算机的优势，找到破解的答案。 把 ABCDE 所代表的数字写出来。*/ #includ_abcde * ?

tensorflow中常用的变量初始化方法_tensorflow 创建一个初始为均匀分布的变量-程序员宅基地

文章浏览阅读3.6k次。1. 初始化为常量tf.constant_initializer__init__( value=0, #指定的常量 dtype=tf.float32, #数据类型 verify_shape=False #是否可以调整tensor的形状，默认可以调整)#常量初始化#tf.constant_initializerva..._tensorflow 创建一个初始为均匀分布的变量

随便推点

python去掉列表中的单引号_从Python中的列表中删除单引号-程序员宅基地

文章浏览阅读4.9k次。我有一个输入字符串：result = '"testing","0.8841","642000.0","80.014521","-60.940653","4522126666","1500854400","","1500842014000","name","80.014521","-60.996532","sampledevice","3","name"'data = result.split("\..._列表 单引号

面试题62 圆圈中最后剩下的数字(java)_c++问题即,1, 2, ..., n这n个数字排成一个圆圈,从数字1开始,每次从这个圆圈里删除-程序员宅基地

文章浏览阅读229次。0,1,,n-1这n个数字排成一个圆圈，从数字0开始，每次从这个圆圈里删除第m个数字。求出这个圆圈里剩下的最后一个数字。例如，0、1、2、3、4这5个数字组成一个圆圈，从数字0开始每次删除第3个数字，则删除的前4个数字依次是2、0、4、1，因此最后剩下的数字是3。 示例 1：输入: n = 5, m = 3输出: 3示例 2：输入: n = 10, m = 17输出: 2..._c++问题即,1, 2, ..., n这n个数字排成一个圆圈,从数字1开始,每次从这个圆圈里删除

Android内存阀值修改--内存回收机制配置_手机内存回收机制如何更改-程序员宅基地

文章浏览阅读1.8w次。Android采取了一种有别于Linux的进程管理策略，有别于Linux的在进程活动停止后就结束该进程，Android把这些进程都保留在内存中， 直到系统需要更多内存为止。这些保留在内存中的进程通常情况下不会影响整体系统的运行速度，并且当用户再次激活这些进程时，提升了进程的启动速度。那Android什么时候结束进程？结束哪个进程呢？Android是依据一个名为LRU（last recent_手机内存回收机制如何更改

HQL：使用面向对象的HQL查询语言_hql 面向对象-程序员宅基地

文章浏览阅读1.5k次。Query接口1.不可省略的formString hql="form Student";//创建Query实例Query query = Session.createQuery(hql);//执行HQL调用list()，返回List集合List studentList = query.list();2.select//别名的使用String hql="select s.nam_hql 面向对象

spring boot + mybatis-plus返回树形结构数据_数据库返回树形结构数据-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏15次。以上是我从最近的项目中学到的spring boot + mybatis-plus返回树形结构的方法。_数据库返回树形结构数据

01背包、完全背包、多重背包、分组背包问题，一文读懂_01背包方案-程序员宅基地

文章浏览阅读2.3k次，点赞4次，收藏15次。背包问题是一种组合优化的 NP 完全问题：有 N 个物品和容量为 W 的背包，每个物品都有自己的体积 w 和价值 v，求拿哪些物品可以使得背包所装下物品的总价值最大。0-1背包有N件物品和一个最多能背重量为W 的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品只能用一次，求解将哪些物品装入背包里物品价值总和最大。每件物品都有选与不选两种情况，那么这个问题完全可以用回溯法来暴力搜索，时间复杂度为O(n2)O(n^2)O(n2)，因为暴力解法时间复杂度太高，所以才要用_01背包方案

推荐文章

热门文章

相关标签