working on dragable wraper
This commit is contained in:
parent
622a7028aa
commit
8f534c3320
29
src/components/WrapperBox.vue
Normal file
29
src/components/WrapperBox.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const count = ref(0);
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Draggable :grid="[25, 25]">
|
||||
<div>
|
||||
<div>Grid with component</div>
|
||||
|
||||
<q-btn @click="increment">Count is: {{ count }}</q-btn>
|
||||
<q-card class="my-card">
|
||||
hi
|
||||
</q-card>
|
||||
</div>
|
||||
</Draggable>
|
||||
</template>
|
||||
<style lang="sass" scoped>
|
||||
.my-card
|
||||
width: 50%
|
||||
max-width: 250px
|
||||
</style>
|
@ -1,14 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import WrapperBox from '../components/WrapperBox.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<WrapperBox/>
|
||||
<Draggable>
|
||||
<div class="box">
|
||||
|
||||
<q-btn
|
||||
@click="showNotification"
|
||||
color="primary"
|
||||
label="Show another notification"
|
||||
/>
|
||||
@ -16,4 +18,4 @@
|
||||
</Draggable>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
<style></style>
|
||||
|
@ -12,11 +12,11 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue({
|
||||
template: { transformAssetUrls },
|
||||
}),
|
||||
vue({
|
||||
template: { transformAssetUrls },
|
||||
}),
|
||||
|
||||
quasar({
|
||||
sassVariables: 'src/quasar-variables.sass',
|
||||
}),]
|
||||
quasar({
|
||||
sassVariables: 'src/quasar-variables.sass',
|
||||
})],
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user