<div id="app" v-cloak>
<p>
<label for="appId">App ID: </label>
<input id="appId" v-model="appId">
<button v-if="canCopy" @click="copy(appId)">Copy</button>
</p>
<p>
<label for="appToken">App Token: </label>
<input id="appToken" v-model="appToken">
<button v-if="canCopy" @click="copy(appToken)">Copy</button>
</p>
</div>
[v-cloak] {display: none}
label {
display:inline-block;
width:100px;
}
input {
width:200px;
}
Vue.config.productionTip = false;
Vue.config.devtools = false;
const app = new Vue({
el:'#app',
data: {
appId:'3493993048904',
appToken:'dksklq33lkj21kjl12lkdsasd21jk',
canCopy:false
},
created() {
this.canCopy = !!navigator.clipboard;
},
methods: {
async copy(s) {
await navigator.clipboard.writeText(s);
alert('Copied!');
}
}
})
This Pen doesn't use any external CSS resources.