Vue.js (v2)で使える長押し機能ライブラリを眺める

「対象要素を長押しすることで何か表示したりする」機能を作るために、Vue.js (v2) で使える長押し機能ライブラリをnpmで探してみます。

実際に利用したことを明記していない場合、利用できるかどうかなどの確認をせずにREADMEや内部コードのみで判断しています。

vue-longpress (v1.0.2)

https://www.npmjs.com/package/vue-longpress

• GitHub: javisperez/vuelongpress

最終更新が2018年2月。
longpress コンポーネントを追加し、対象要素をこのコンポーネントでラップすることで長押し範囲を決めるようです。

オプション

オプションはpropsで渡すことができ、以下が指定できるようです。

• on-confirm: 長押しした時に呼び出す関数を指定
• value: on-confirm の関数に対し、渡す引数を指定。指定しない場合 null が渡される
• duration: どれだけ長く押し続けるかを秒数で指定
• pressing-text: 押している間に表示するテキストを指定。このテキストはラップしている要素(slot)を置き換えて表示するようです。指定されていない場合 Keep pressing が表示される
• action-text: 長押しした時に表示するテキストを指定。pressing-text と同様、ラップしている要素を置き換えるようです。指定されていない場合 Please wait... が表示される

vue-long-click (v0.1.0)

https://www.npmjs.com/package/vue-long-click

• GitHub: ittus/vue-long-click

longClickDirective 関数で取得できるインスタンスを Vue.directive を使って登録し、対象要素にディレクティブとして v-longclick="() => func()" などのように指定することで利用できるようです。

オプション

オプションは longClickDirective 関数の使用時に指定するので、要素によってオプションを変えることはできないようです。利用可能なオプションは以下。

• delay: どれだけ長く押し続けるかをミリ秒で指定。デフォルト値は 400 (0.4秒)
• interval: delay 後に押し続けている場合、何ミリ秒間隔で関数を呼び出すかを指定します。デフォルト値は 50 (0.05秒)

不具合

• #14: @click と v-longclick を共存させた場合に長押しすると、長押しイベントとクリックイベントがどちらも発火する