useDrauu

分类

@Integrations

导出大小

780 B

包

@vueuse/integrations

上次更改

8 个月前

drauu 的响应式实例。

演示

源码在线演练 (beta)

可在 @vueuse/integrations 插件中使用。

安装

bash

npm i drauu@^0

用法

vue

<script setup lang="ts">
import { toRefs
 } from '@vueuse/core'
import { useDrauu
 } from '@vueuse/integrations/useDrauu'
import { useTemplateRef
 } from 'vue'

const target
 = useTemplateRef
<SVGSVGElement>('target')
const { undo
, redo
, canUndo
, canRedo
, brush
 } = useDrauu
(target
)
const { color
, size
 } = toRefs
(brush
)
</script>

<template>
  <svg
 ref
="target
" />
</template>

类型声明

export type UseDrauuOptions
 = Omit
<Options
, "el">
export interface UseDrauuReturn {
  drauuInstance
: Ref
<Drauu
 | undefined>
  load
: (svg
: string) => void
  dump
: () => string | undefined
  clear
: () => void
  cancel
: () => void
  undo
: () => boolean | undefined
  redo
: () => boolean | undefined
  canUndo
: ShallowRef
<boolean>
  canRedo
: ShallowRef
<boolean>
  brush
: Ref
<Brush
>
  onChanged
: EventHookOn

  onCommitted
: EventHookOn

  onStart
: EventHookOn

  onEnd
: EventHookOn

  onCanceled
: EventHookOn

}
/**
 * Reactive drauu
 *
 * @see https://vueuse.org.cn/useDrauu
 * @param target The target svg element
 * @param options Drauu Options
 */
export declare function useDrauu
(
  target
: MaybeComputedElementRef
,
  options
?: UseDrauuOptions
,
): UseDrauuReturn