mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(compiler-vapor): event handler

This commit is contained in:
三咲智子 Kevin Deng 2023-12-06 18:43:01 +08:00
parent 9e9703d7b6
commit f907a2a708
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
4 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
View File

@ -87,28 +87,28 @@ export function render(_ctx) {
const t0 = _template(\\"<a></a><form></form><a></a><div></div><div></div><a></a><div></div><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>\\") const t0 = _template(\\"<a></a><form></form><a></a><div></div><div></div><a></a><div></div><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>\\")
const n0 = t0() const n0 = t0()
const { 0: [n1], 1: [n2], 2: [n3], 3: [n4], 4: [n5], 5: [n6], 6: [n7], 7: [n8], 8: [n9], 9: [n10], 10: [n11], 11: [n12], 12: [n13], 13: [n14], 14: [n15], 15: [n16], 16: [n17], 17: [n18], 18: [n19], 19: [n20], 20: [n21], 21: [n22],} = _children(n0) const { 0: [n1], 1: [n2], 2: [n3], 3: [n4], 4: [n5], 5: [n6], 6: [n7], 7: [n8], 8: [n9], 9: [n10], 10: [n11], 11: [n12], 12: [n13], 13: [n14], 14: [n15], 15: [n16], 16: [n17], 17: [n18], 18: [n19], 19: [n20], 20: [n21], 21: [n22],} = _children(n0)
_on(n1, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"stop\\"])) _on(n1, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"stop\\"]))
_on(n2, \\"submit\\", _withModifiers(_ctx.handleEvent, [\\"prevent\\"])) _on(n2, \\"submit\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"prevent\\"]))
_on(n3, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"stop\\", \\"prevent\\"])) _on(n3, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"stop\\", \\"prevent\\"]))
_on(n4, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"self\\"])) _on(n4, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"self\\"]))
_on(n5, \\"click\\", _ctx.handleEvent, { capture: true }) _on(n5, \\"click\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { capture: true })
_on(n6, \\"click\\", _ctx.handleEvent, { once: true }) _on(n6, \\"click\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { once: true })
_on(n7, \\"scroll\\", _ctx.handleEvent, { passive: true }) _on(n7, \\"scroll\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { passive: true })
_on(n8, \\"contextmenu\\", _withModifiers(_ctx.handleEvent, [\\"right\\"])) _on(n8, \\"contextmenu\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"right\\"]))
_on(n9, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"left\\"])) _on(n9, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"left\\"]))
_on(n10, \\"mouseup\\", _withModifiers(_ctx.handleEvent, [\\"middle\\"])) _on(n10, \\"mouseup\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"middle\\"]))
_on(n11, \\"contextmenu\\", _withModifiers(_ctx.handleEvent, [\\"right\\"])) _on(n11, \\"contextmenu\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"right\\"]))
_on(n12, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"enter\\"])) _on(n12, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"enter\\"]))
_on(n13, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"tab\\"])) _on(n13, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"tab\\"]))
_on(n14, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"delete\\"])) _on(n14, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"delete\\"]))
_on(n15, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"esc\\"])) _on(n15, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"esc\\"]))
_on(n16, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"space\\"])) _on(n16, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"space\\"]))
_on(n17, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"up\\"])) _on(n17, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"up\\"]))
_on(n18, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"down\\"])) _on(n18, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"down\\"]))
_on(n19, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"left\\"])) _on(n19, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"left\\"]))
_on(n20, \\"keyup\\", _withModifiers(_ctx.submit, [\\"middle\\"])) _on(n20, \\"keyup\\", _withModifiers((...args) => (_ctx.submit && _ctx.submit(...args)), [\\"middle\\"]))
_on(n21, \\"keyup\\", _withModifiers(_ctx.submit, [\\"middle\\", \\"self\\"])) _on(n21, \\"keyup\\", _withModifiers((...args) => (_ctx.submit && _ctx.submit(...args)), [\\"middle\\", \\"self\\"]))
_on(n22, \\"keyup\\", _withKeys(_withModifiers(_ctx.handleEvent, [\\"self\\"]), [\\"enter\\"])) _on(n22, \\"keyup\\", _withKeys(_withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"self\\"]), [\\"enter\\"]))
return n0 return n0
}" }"
`; `;
@ -120,7 +120,7 @@ export function render(_ctx) {
const t0 = _template(\\"<div></div>\\") const t0 = _template(\\"<div></div>\\")
const n0 = t0() const n0 = t0()
const { 0: [n1],} = _children(n0) const { 0: [n1],} = _children(n0)
_on(n1, \\"click\\", _ctx.handleClick) _on(n1, \\"click\\", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
return n0 return n0
}" }"
`; `;
@ -259,7 +259,7 @@ export function render(_ctx) {
_prepend(n4, n1) _prepend(n4, n1)
_insert(n2, n4, n5) _insert(n2, n4, n5)
_append(n4, n3) _append(n4, n3)
_on(n4, \\"click\\", _ctx.handleClick) _on(n4, \\"click\\", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
_effect(() => { _effect(() => {
_setText(n1, undefined, _ctx.count) _setText(n1, undefined, _ctx.count)
}) })

2
packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap
View File

@ -23,7 +23,7 @@ return (() => {
_append(n2, n1) _append(n2, n1)
const n3 = _createTextNode(double.value) const n3 = _createTextNode(double.value)
_append(n4, n3) _append(n4, n3)
_on(n5, \\"click\\", increment) _on(n5, \\"click\\", (...args) => (increment && increment(...args)))
const n7 = _createTextNode(count.value) const n7 = _createTextNode(count.value)
_setText(n7, undefined, count.value) _setText(n7, undefined, count.value)
_append(n8, n7) _append(n8, n7)

7
packages/compiler-vapor/src/generate.ts
View File

@ -446,7 +446,14 @@ function genSetEvent(oper: SetEventIRNode, context: CodegenContext) {
if (nonKeys.length) { if (nonKeys.length) {
push(`${vaporHelper('withModifiers')}(`) push(`${vaporHelper('withModifiers')}(`)
} }
// gen event handler
push('(...args) => (')
genExpression(oper.value, context) genExpression(oper.value, context)
push(' && ')
genExpression(oper.value, context)
push('(...args))')
if (nonKeys.length) { if (nonKeys.length) {
push(`, ${genArrayExpression(nonKeys)})`) push(`, ${genArrayExpression(nonKeys)})`)
} }

20
playground/src/reactive-event-handler.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const count = ref(0)
const inc = () => count.value++
const dec = () => count.value--
const handler = ref(inc)
watchEffect(() => {
if (count.value > 5) {
handler.value = dec
} else if (count.value < -5) {
handler.value = inc
}
})
</script>
<template>
<button @click="handler">{{ count }}</button>
</template>