【前端样式】点击复制指定内容

1.下载

npm i vue-clipboard2 -s

2.main.js中加入

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

3.在代码中引入

按钮

			  <!--分享按钮-->
              <div style="margin-right: 10px;">
                <div style="height: 40px;width: 40px;">
                  <el-button class="button-share" type="text" style="height: 100%;width: 100%;display: flex;flex-direction: column;padding: 0 0 0 0;justify-content: flex-end;align-items: center;color: darkgrey;"
                          v-clipboard:copy="message"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
                    <div style="font-size: 13px;">分享</div>
                  </el-button>
                </div>
              </div>

数据区

message: '复制的内容'

方法区

            onCopy: function (e) {
      			this.$message.success("已复制网址");
    		  },
    		  onError: function (e) {
    		    this.$message.error("复制失败");
    		  }

样式

            .button-share:hover {
  			    background-color: #f1f2f3;
  				color: black;
			  }