2.0.1 • Published 2 years ago
Share package @selectable-grid/react Install npm install --save @selectable-grid/reactUsage example <script setup lang="ts">
import { ref } from 'vue'
import SelectableGrid from '@selectable-grid/vue'
import type { SelectableGridProps } from '@selectable-grid/vue'
const imgSrc = 'image_link'
const options = ref<SelectableGridProps>({
type: 'img',
cellCount: 15,
containerProps: {
id: 'img',
src: imgSrc,
width: 500
}
})
</script>
<template>
<div class="image-container">
<SelectableGrid :options="options" />
</div>
</template>
<style scoped>
#img {
height: 500px;
}
</style>Properties Property Required Type Description options*trueobjectsee down
Properties of the options* Property Required Type Description typetrue'img' | 'video'name of html tag containerPropstrueobjectif prop type is equal 'img' containerProps is HTML Attributes of the <img /> tag, else prop type is equal 'video' containerProps is HTML Attributes of the <video /> cellCounttruenumbercount of the cell in the grid mouseMovefalsefunction(area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent){}handler of mouse move on the grid mouseDownfalse(point: {x: number, y:number}, e: MouseEvent) => voidhandler of mouse down on the grid mouseUpfalse(area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent) => voidhandler of mouse up on the grid cellsStylesfalse{fillStyle: string}color like as color for canvas gridStylesfalse{strokeStyle: string}color like as color for canvas areaStylesfalse{strokeStyle: string, fillStyle: string}color like as color for canvas isAreafalsebooleanshow area on the grid keepAreafalsebooleanshow area on the grid isCellsfalsebooleanrender cells on the grid isGridfalsebooleanrender grid on the grid canvasClassNamefalsestringclass name of the canvas
Another packages selectable-grid
@selectable-grid/react