elementUI中的tooltip和clipboard使用

clipboard的官网：
http://www.clipboardjs.cn/
elementUI的tooltip：
https://element.eleme.cn/2.0/#/zh-CN/component/tooltip

具体使用：
template中写：

<el-tooltip
	class="item"
	effect="dark"
	placement="bottom-start"
	>
	<div slot="content">
	需先下载客户端
	<br />
	<a
	class="downloadUrl"
	href="javascript:void 0"
	:data-clipboard-text="downloadurl"
	@mouseenter="copyDownloadUrl"
	@click="copyDownloadUrl"
	>
	点击复制下载链接</a
	>
	</div>
    	<em class="el-icon-info" style="color: blue"></em>
</el-tooltip>

:data-clipboard-text=“downloadurl”，downloadurl是要复制的链接地址。
js:
先引入clipboard；然后使用

import { mapState, mapMutations, mapActions } from 'vuex'
// 复制链接
import Clipboard from 'clipboard'
export default {
methods: {
    ...mapMutations({
      changeTip: 'common/changeTip'
    }),
 // 复制下载PC的链接
    copyDownloadUrl (event) {
      const clipboard = new Clipboard(event.target)
      clipboard.on('success', (e) => {
        this.changeTip({
          text: '下载链接复制成功！',
          color: true
        })
        // e.clearSelection();
        clipboard.destroy()
      })
      clipboard.on('error', function (e) {
        // 不支持复制
        this.changeTip({
          text: '该浏览器不支持复制功能',
          color: false
        })
        clipboard.destroy()
      })
    },
  },

第一次点击，没有触发，所以加了个@mouseenter=“copyDownloadUrl”，就会正常执行了。

点击蓝体字：
会提示：

具体的成功回调，可以自定义提示内容

这里，我使用的是封装的方法，在store/common/index.js

export default {
  namespaced: true,
  state: {
    isTip: false, // 是否显示提示框
    timeFlag: '', // 提示框显示计时器
    text: '成功', // 显示框提示文案
    color: true, // 显示框颜色：成功true，失败false

    // 白色背景提示框
    wIsTip: false,
    wTimeFlag: '', // 提示框显示计时器
    wText: '成功', // 显示框提示文案
    wColor: true // 显示框颜色：成功true，失败false
  },
  mutations: {
    changeTip (state, item) {
      // 提示框使用方法：
      // let params = {
      //   text:'xxxx',
      //   color: true
      // }
      // commit('common/changeTip',params);
      state.isTip = false
      state.text = item.text || '成功'
      // state.color = item.color || true;
      state.color = item.color || false
      window.clearTimeout(state.timeFlag)
      state.isTip = true
      state.timeFlag = window.setTimeout(() => {
        state.isTip = false
      }, 2000)
    },
  }
}