Subscribe on changes!

`withModifiers(() => {}, ['right'])` is failed

avatar
Apr 4th 2023

Vue version

lastest

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9Uj2PnDAQ/SsTNwaJBW2L2FWia9KkThGnIDAsvuAP2YaLhOjT5zfmf2Rs2NXlIkVCwjPvzbPnzazsg7XlMiOrWeM7J20Aj2G2V6GlssYFWMHhABsMzijgROVCAxzgk1H2QMoqBmXwhAvdGe0DKH+DS6zP+EecJgOfjZv6dzy/E7pJdt+JkuVwudJV7YQuZOccNqGban8QPYWCgMpObUCKAJrxDO9TbenkbQyldbigDhfBUlaw67qm27etqcbzXiS1nQMsJ2V6nIhKOBETlPqo6NxUj4tYwfYuT6q15bM3mkxaI10cgBeshpSJObImxoKNIVhfV5Ufumjtsy+Nu1V0Kt2sg1RYolenb868eHQkLFjxSqOi5ILu5FD36ND9T/MN9R/dKEtObtTKMRxq4THXHgepMQJGk3kFjAW8yDB+Mr0cJDr/ZupC449USoXtPKX/a4EsWaFbhTXwmOWpr7RPNODDKEeh08fEx4z3cuHFHQQw+ilOsP77JdmxIHcWPDblntkK+MLTMpAaP/aBf80Pawnmv3/93L+4f7sxOdv+AJ5PAwQ=

Steps to reproduce

I use withModifiers at ts(x) file to achieve the same as @click.right.prevent, but I found that it's failed

image

right click the <h1>, I can see the right result

image

but used in ts(x) will be failed

What is expected?

use withModifiers(() => {}, ['right']) can handle right click method

What is actually happening?

it's failed

System Info

No response

Any additional comments?

No response

avatar
Apr 4th 2023

it not a bug, you should use onContextmenu

import { defineComponent, h, withModifiers } from 'vue'

export default defineComponent({
  name: 'Comp',
  setup() {
    return () => h('div', {
      onContextmenu: withModifiers(() => {
        alert(1)
      }, ['right', 'prevent']),
    }, '哈哈哈')
  }
})
avatar
Apr 4th 2023

it not a bug, you should use onContextmenu

import { defineComponent, h, withModifiers } from 'vue'

export default defineComponent({
  name: 'Comp',
  setup() {
    return () => h('div', {
      onContextmenu: withModifiers(() => {
        alert(1)
      }, ['right', 'prevent']),
    }, '哈哈哈')
  }
})

Thx! but maybe onClick also support?

because withModifiers(, ['right']) is not actually say that not support for onClick

https://github.com/vuejs/core/blob/9a09e476679040fcec3257d42cd0dab29e95b9f2/packages/runtime-dom/src/directives/vOn.ts#L27

avatar
Apr 4th 2023

The logic of template compilation will compile @click into an onContextmenu event. In principle, writing in tsx needs to correspond to the template compilation result. In addition, the onClick event usually refers to the event when the main mouse button (usually the left button) is clicked, and the right click is usually implemented using onContextmenu in the browser, because the right click will call out the browser menu, you can only use onContextmenu to realize yourself the right click event

avatar
Apr 4th 2023

The logic of template compilation will compile @click into an onContextmenu event. In principle, writing in tsx needs to correspond to the template compilation result. In addition, the onClick event usually refers to the event when the main mouse button (usually the left button) is clicked, and the right click is usually implemented using onContextmenu in the browser, because the right click will call out the browser menu, you can only use onContextmenu to realize yourself the right click event

Thx! it's helpful for me.