Vues.js @dblclickでダブルクリックイベントを取得する方法

2023年1月2日

環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125（Official Build）（64 ビット）
yarn 1.22.19

構文
v-on:dblclick="イベント名"
@dblclick="イベント名"
イベント名: function (e) {処理コード}
「v-on:dbclick」を使用してダブルクリックイベントを取得します。

使用例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>dragleaveイベントサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="app" >
      <h2>{{val}}</h2>
        
       <input @dblclick="cft" type="text">
  </div>
  <script>

    const result = {
      data() {
        return {
          val:''
        }
      },
      methods: {
        cft: function (e) {
          this.val = 'マウスがダブルクリックされました'
        }
      }
    }

    Vue.createApp(result).mount('#app')

  </script>
</body>

</html>

実行結果
テキストフォームに「arkgame」と入力しダブルクリックされれば「マウスがダブルクリックされました」を表示します。
文字「arkgame」が選択されます。

Vue.js

Posted by arkgame

Related posts: