跳到主要内容

useDrauu

分类
导出大小
780 B
@vueuse/integrations
上次更改
8 个月前

drauu 的响应式实例。

演示

可在 @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>

类型声明

ts
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

来源

源码演示文档

贡献者

Anthony Fu
wheat
IlyaL
Anthony Fu
qinwencheng
IlyaL
Robin
Doctorwu
ge Datou
Hayk Khachatryan
Curt Grimes

更新日志

0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.5.0
87ea3 - 修复: 为 brush 展开选项 (#3463)
v10.1.1
aaadd - 修复: 在 committed 事件钩子中传递 node 参数 (#3047)

根据 MIT 许可证发布。