vue.js에서 링크 대상의 확장자로 Font Awesome Icon이 바뀌는 그 녀석을 만들어 보았다.

구체적으로 무엇입니까?

a[href$=".pdf"]와 같은 CSS 의사 요소를 사용하여 아이콘을 표시 한 다음과 같은 사람
vue-fontawesome 를 이용해 만들어 보자는 이야기입니다.

Q:지금까지 CSS의 의사 요소로 구현하면 좋잖아

A : 그럼이 기사의 의미가 없습니다
의사 요소는 오류가 발생하기 쉽기 때문에 권장하지 않습니다 (의역) 쓰고 있기 때문에. 쓰베코베 말하지 않고 공부할 생각으로 생각해 보자.

실제로 만들어 보았다.

확장자의 패턴 배분 어떻게 하자, 몇개까지 대응하면 좋을 것이라고 생각하고 있으면, font-awesome-filetypes 라고 하는 멋진 것을 발견했으므로 이용한 곳 순식간에 되어 버렸다.

linkFileIcon.vue

<template>
  <a :href="href">
    <font-awesome-icon
      :icon="faIcon(href)"
      :class="`text-` + faIconColor()"
      fixed-width
    /><slot v-slot="text">{{ text.label }}</slot>
  </a>
</template>
<script>
import geticonForExtension from "font-awesome-filetypes";
export default {
  name: "href",
  props: {
    label: {
      type: String,
      default: "リンク"
    },
    href: String
  },
  methods: {
    isExternalLink(path) {
      //外部リンクかどうか
      return /^https?:\/\//.test(path);
    },
    faIcon(path) {
      if (path) {
        //外部リンクの場合は"external-link-alt"
        if (this.isExternalLink(path)) {
          return "external-link-alt";
        } //それ以外は拡張子によってアイコンを変更
        return geticonForExtension(path.split(".").pop()).slice(3);
      }//拡張子が判別できない場合は"file"
      return "file";
    },
    faIconColor() {
      //アイコンごとに色を変更、BootstrapVueを使用しています
      const faIcon = this.faIcon(this.href);
      if (faIcon === `external-link-alt` || faIcon === `file-word`) {
        return `info`;
      } else if (faIcon === `file-powerpoint`) {
        return `warning`;
      } else if (faIcon === `file-excel`) {
        return `success`;
      } else if (faIcon === `file-video` || faIcon === `file-pdf`) {
        return `danger`;
      } else if (!this.href) {
        return `muted`;
      } else return `primary`;
    }
  }
};
</script>

엽서 착용

font-awesome-filetypes 는, 자유롭게 사용해도 괜찮습니다만, 도움이 되면 사용한 패키지 쓴 편지 보내라고(의역)라고 써 있으므로, 만약 이용하면 보내 주세요. 나도 그럴거야.
가득하고 재미 있습니다.