As the title suggests, dragging and resizing worked normally in the webpack environment, but after migrating to Vite, these two functions do not work. I would appreciate it if you could let me know the solution.
package veresion
"vue": "2.7.0"
"vue-grid-layout": "^2.3.7"
"vite": "^3.2.8"
// vite.config.js
/**
* @description Plugin
*/
const generatePlugins = () => {
const vitePluginSvgSpritemap = () => {
const include = path.join(__dirname, './src/icons/svg/*.svg')
console.log('SVG_PATH : ', include)
return createSvgSpritePlugin({
include,
symbolId: 'icon-[name]'
})
}
return [
vue(),
vueJsx(),
vitePluginSvgSpritemap(),
svgLoader(),
eslint({
exclude: ['/virtual:/**', 'node_modules/**']
})
]
}
return defineConfig({
server,
resolve,
esbuild: {
loader: 'jsx'
},
plugins: generatePlugins()
})
// Where to use vue-grid-layout
<grid-layout
:layout.sync="dashboardTemplate.content"
:col-num="12"
:row-height="10"
:is-draggable="isEditMode"
:is-resizable="isEditMode"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
class="grid-layout"
>
<grid-item
v-for="item in dashboardTemplate.content"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
:min-w="dashboardConfig.gridItemMinW"
:min-h="dashboardConfig.gridItemMinH"
class="grid-item"
@resized="resizedGridItem"
>
<span
@mouseover="item.editVisible = true"
@mouseleave="
item.editVisible = false
deleteConfirmVisible = false
"
>
componets...
</span>
</grid-layout>
The class name is updated when an event occurs.
not event enter image description here
dragging enter image description here
Resizing enter image description here
