Vueで見出し(hタグ)のComponentを作成する方法・SampleCode

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vueで見出し(hタグ)のComponentを作成する方法とそのSampleCodeについて解説していきます。

1 Vueで見出し(hタグ)のComponentを作成する方法
- 1.1 見出し(hタグ)Componentの要件定義
- 1.2 見出し(hタグ)ComponentのSampleCode
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Vueで見出し(hタグ)のComponentを作成する方法

見出し(hタグ)Componentの要件定義

まずは、今回作成する見出し(hタグ)Componentの要件定義をしていきます。

「見出し: hタグ」(必須) のレベルは、h1〜h6まで選べる。
Mainタイトル(必須) は、動的に決められる。
Subタイトルは、あってもなくてもOKで、動的に決められる。
MainタイトルとSubタイトルのStyleは、カスタマイズできる。

見出し(hタグ)ComponentのSampleCode

それでは、要件定義を満たす「見出し(hタグ)」ComponentのSampleCodeは、次のとおりです。

<!-- 見出し(heading系統)のComponent -->
<template>
  <!-- MainTitle -->
  <div
    v-if="!isSubTitle"
    v-html="createTittle"
    :style="this.titleStyling"
  ></div>
  <!-- MainTitle_And_SubTitle -->
  <div v-else class="title_and_sub_block">
    <span v-html="createTittle" :style="this.titleStyling"></span>
    <span class="main_sub_border">|</span>
    <span v-text="this.subTitle" :style="this.subTitleStyling"></span>
  </div>
</template>
<script>
export default {
  name: "Heading",
  components: {},
  props: {
    // h1~h6に対応するhLevel(必須)
    hLevel: {
      type: String,
      default: "1",
      required: true,
    },
    // h(見出し)のMainタイトル(必須)
    mainTitle: {
      type: String,
      default: "",
      required: true,
    },
    // h(見出し)の横に、| を境に表示するSubタイトル
    subTitle: {
      type: String,
      default: "",
    },
    // MainTitleのStyle設定
    titleStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    subTitleStyle: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      titleStyling: this.titleStyle,
      subTitleStyling: this.subTitleStyle,
    };
  },
  methods: {},
  computed: {
    // SubTitleが、あるかどうか？
    isSubTitle() {
      return this.subTitle !== "";
    },
    // 見出しを作成
    createTittle() {
      return `<h${this.hLevel}>${this.mainTitle}</h${this.hLevel}>`;
    },
  },
  created() {
    console.log("Created-Hook");
    console.log("this.$props", this.$props);
    console.log("this.$data", this.$data);
    console.log("this.hLevel", this.hLevel);
    console.log("this.mainTitle", this.mainTitle);
    console.log("this.subTitle", this.subTitle);
    console.log("this.titleStyle", this.titleStyle);
    console.log("this.subTitleStyle", this.subTitleStyle);
  },
};
</script>
<style scoped>
/* MainTitle_And_SubTitle_Block */
.title_and_sub_block {
  display: flex;
  align-items: center;
  gap: 3%;
}
/* MainTitleとSubTitleを分けるBorderのStyle */
.main_sub_border {
  font-size: 38px;
}
</style>