// html
<a
  :class="[
    'myLink',
    type
]"
>
// js
props:{
    type: String, // 標(biāo)簽顏色的類型
}
// css
.primary { color: #2d8cf0; }
.success { color: #19be6b; }
.warning { color: #f90; }
.danger { color: #ed4014; }

// css
span {
     font-size: 24px;
     position: relative;
}
span:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    /* 定位控制 */
    top: 2px;
    border-top: 1px solid red;
}
span:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    /* 定位控制 */
    bottom: -2px;
    border-bottom: 1px solid red;
}
// html
<span>早上好，程序猿獸們</span>

<a
    :class="[
      'myLink',
       hideUnderline ? '' : disabled ? '' : 'underline'
    ]"
  >

<a
    :href="disabled ? null : href" rel="external nofollow"  rel="external nofollow" 
    v-bind="$attrs"
  >

<template>
  <div class="box">
    <my-divider lineType="dashed" content-position="left"
      >五種鏈接樣式</my-divider
    >
    <my-link>默認(rèn)超鏈接</my-link>
    <my-link type="primary">primary超鏈接</my-link>
    <my-link type="success">success超鏈接</my-link>
    <my-link type="warning">warning超鏈接</my-link>
    <my-link type="danger">danger超鏈接</my-link>
    <my-divider lineType="dashed" content-position="left"
      >是否有下劃線</my-divider
    >
    <my-link>默認(rèn)有下劃線</my-link>
    <my-link hideUnderline>也可隱藏下劃線</my-link>
    <my-divider lineType="dashed" content-position="left"
      >禁用鏈接樣式</my-divider
    >
    <my-link disabled>禁用|默認(rèn)超鏈接</my-link>
    <my-link type="primary" disabled>禁用|primary超鏈接</my-link>
    <my-link type="success" disabled>禁用|success超鏈接</my-link>
    <my-link type="warning" disabled>禁用|warning超鏈接</my-link>
    <my-link type="danger" disabled>禁用|danger超鏈接</my-link>
    <my-divider lineType="dashed" content-position="left"
      >添加href和target原生屬性</my-divider
    >
    <my-link type="primary"  rel="external nofollow" >默認(rèn)self跳轉(zhuǎn)</my-link>
    <my-link type="success" target="_blank"  rel="external nofollow" 
      >支持原生屬性target等</my-link
    >
    <my-divider lineType="dashed" content-position="left"
      >通過(guò)icon屬性或者直接在默認(rèn)插槽中添加圖標(biāo)</my-divider
    >
    <my-link type="primary" icon="el-icon-share">默認(rèn)圖標(biāo)在前方</my-link>
    <my-link type="success" icon="el-icon-share" back
      >back屬性控制圖標(biāo)在后方</my-link
    >
    <my-link type="primary"
      ><i class="el-icon-goods"></i>默認(rèn)插槽前方加圖標(biāo)</my-link
    >
    <my-link type="success"
      >默認(rèn)插槽后方加圖標(biāo) <i class="el-icon-goods"></i
    ></my-link>
    <my-divider lineType="dashed" content-position="left"
      >綁定事件使用</my-divider
    >
    <my-link @click="clickThis" type="danger" icon="el-icon-aim"
      >點(diǎn)擊這個(gè)哦</my-link
    >
  </div>
</template>
<script>
export default {
  methods: {
    clickThis() {
      console.log("注意：當(dāng)myLink禁用或有href屬性時(shí)，點(diǎn)擊事件失效");
    },
  },
};
</script>

<template>
  <!-- 
       hideUnderline ? '' : disabled ? '' : 'underline',
       先看hideUnderline是否為true，為true則要隱藏下劃線，即不加underline類名
       再看disabled是否為true，為true則禁用，禁用也要隱藏下劃線，即也不加underline類名
       若既不隱藏下劃線又不禁用鏈接，則加上underline類名用于顯示下劃線
   -->
  <a
    :href="disabled ? null : href" rel="external nofollow"  rel="external nofollow" 
    :class="[
      'myLink',
      hideUnderline ? '' : disabled ? '' : 'underline',
      type,
      disabled ? 'toDisabled' : '',
    ]"
    v-bind="$attrs"
    @click="handleClick"
  >
    <!-- 
       這里加上v-bind="$attrs"是為了傳遞更多的屬性，做一個(gè)參數(shù)兜底的功能效果。因?yàn)閍標(biāo)簽還有其他很多屬性，如：
       target、download、type等。props中未聲明的參數(shù)，會(huì)被$attr兜底交給a標(biāo)簽使用。故加了v-bind="$attrs"以后，
       在外層my-link標(biāo)簽上，我們便可正常使用除props中聲明的屬性了，如使用target原生屬性：<my-link target="_blank" href="xxx" rel="external nofollow" />
    -->
    <!-- 內(nèi)容區(qū) -->
    <span class="aContent" :class="{ spaceC: icon, back: back }">
      <i :class="icon" v-if="icon"></i>
      <span><slot></slot></span>
    </span>
  </a>
</template>
<script>
export default {
  name: "myLink",
  props: {
    href: String, // a標(biāo)簽的href屬性，用于跳轉(zhuǎn)
    disabled: Boolean, // 是否禁用超鏈接
    type: String, // 標(biāo)簽顏色的類型
    // 是否隱藏下劃線
    hideUnderline: {
      type: Boolean,
      default: false, // 默認(rèn)不隱藏下劃線，默認(rèn)展示下劃線
    },
    icon: String, // 使用餓了么UI的小圖標(biāo)
    back: Boolean, // 設(shè)置圖標(biāo)在內(nèi)容后方
  },
  methods: {
    handleClick(event) {
      // 禁用狀態(tài)下不允許傳遞事件
      if (this.disabled) {
        return;
      }
      // 有鏈接了也不允許傳遞事件
      if (this.href) {
        return;
      }
      // 沒(méi)有禁用沒(méi)有鏈接，便可正常傳遞事件
      this.$emit("click", event);
    },
  },
};
</script>
<style lang="less" scoped>
// 默認(rèn)樣式
.myLink {
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666; // 默認(rèn)顏色，當(dāng)然也可以使用type類型的配色
  text-decoration: none; // 去除a標(biāo)簽?zāi)J(rèn)的下劃線（不使用自帶的下劃線效果）
  position: relative; // 定位搭配偽元素實(shí)現(xiàn)懸浮下劃線效果
  margin: 4px;
  .aContent {
    display: flex;
    align-items: center;
  }
  // 當(dāng)傳的有圖標(biāo)的時(shí)候，把第一個(gè)元素加上一個(gè)右邊距，產(chǎn)生間距
  .spaceC > :first-child {
    margin-right: 4px;
  }
  // 控制彈性盒方向，控制圖標(biāo)在后方位置（默認(rèn)前方位置）
  .back {
    flex-direction: row-reverse;
  }
  // 注意這里要覆蓋上方spaceC的樣式
  .back > :first-child {
    margin: 0 0 0 4px;
  }
}
// 通過(guò)變量控制是否有這個(gè)underline類名，從而控制是否有下劃線
.underline:hover::after {
  // 這樣的話，元素在哪，下劃線就在哪里
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: -2px;
  // 注意，這里不設(shè)置顏色，就會(huì)跟隨參考定位的元素的顏色了
  border-bottom: 1px solid;
}
// 下方的配色是抄iview的
.primary {
  color: #2d8cf0;
}
.success {
  color: #19be6b;
}
.warning {
  color: #f90;
}
.danger {
  color: #ed4014;
}
// 通過(guò)透明度模擬禁用的顏色樣式效果，要不然要寫兩份顏色會(huì)稍微麻煩一些
.toDisabled {
  opacity: 0.36;
  cursor: not-allowed;
}
</style>