【sgLinkText】自定义组件：用于表格单元格显示的可复制可跳转链接文本

特性： 

1. 显示复制图标
2. 支持复制链接
3. 支持跳转链接
4. 移入链接颜色高亮出现底部下划线

源码

<template>
  <div :class="$options.name">
    <el-link
      icon="el-icon-copy-document"
      :underline="false"
      type="primary"
      @click.stop="$g.copy(data.link, true)"
      :title="`复制链接`"
    />
    <el-tooltip
      :content="data.link"
      :effect="`dark`"
      :enterable="false"
      :placement="`top`"
      :popper-class="`${$options.name}-el-tooltip`"
      :transition="`none`"
    >
      <span class="link" @click.stop="go(data.link)">
        {{ data.link }}
      </span>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: "sgLinkText",
  components: {},
  data() {
    return {};
  },
  props: ["data"],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    go(link) {
      window.open(link, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
.sgLinkText {
  /*单行省略号*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .link {
    color: #409eff;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    // transition: 0.382s;
    &:hover {
      color: #66b1ff;
      border-color: currentColor;
    }
  }
}
</style>

用例

<sgLinkText :data="{ link: `http://www.shuzhiqiang.com` }" />