[JavaScript知识库]路由监听以及复制文本、不让用户选中复制

路由监听

使用computed来对路由进行监听.
代码如下:

computed:{
 router(){
     return this.$route.fullPath
    }
}

复制文本

首先安装依赖: npm i vue-clipboard2
然后将我们安装的依赖在mian.js中进行导入

import VueClipboard from 'vue-clipboard2' 
Vue.use(VueClipboard);

最后就是可以将我们要复制的文本进行复制了,详情代码如下:

   <template>
  <div>
      {{msg}} <button v-clipboard:copy="msg"  v-clipboard:success="onCopy">复制</button><br>
      <input type="text">
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:"小编确实帅气"
    }
  },
  methods:{
    onCopy(){
      alert("复制成功");
    }
  }
}
</script>

让用户不能选中复制

利用css属性 user-select：none来让用户无法选中并复制

<template>
  <div>
      <span class="msg">{{msg}}</span> <button v-clipboard:copy="msg"  v-clipboard:success="onCopy">复制</button><br>
      <input type="text">
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:"小编确实帅气"
    }
  },
  methods:{
    onCopy(){
      alert("复制成功");
    }
  }
}
</script>

<style scoped>
 .msg{
   user-select: none;
 }
</style>