Radunia components

vClip directive

Click on an element to copy its value directly to the clipboard. Uses navigator's clipboard API.

Browser Support

Usage

Register the following directive/s:

import vClip from '../../directives/vClip.js';

// ...

app.directive('clip', vClip)

Basic usage

vClip causes clicks on an element to copy its respective value binding. It is especially useful for copying longer text contents from inactive input elements or text areas.

WARNING

Since vClip is considered a runtime directive, it cannot be previewed in these docs.

Example

<template>
  <q-input disabled v-model="inputValue" v-clip />
</template>

Full directive's code

vClip.js

const vClip = {
  mounted: (el) => {
    const cb = navigator.clipboard;
    el.addEventListener('click', () => {
      const input = el.tagName === 'input' ? el : el.querySelector('input');
      cb.writeText(input.value).then(() => alert('Text copied'));
    });
  },
};

export default vClip;