add w-tokyodo-anchor component

Author: mimosafa

src/components/global/footer/footer.vue

@@ -3,28 +3,28 @@
 
     <div class="footer_inner">
       <ol class="footer_breadcrumbs">
-        <li><a href="/">トップページ</a></li>
+        <li><w-tokyodo-a href="/">トップページ</w-tokyodo-a></li>
         <li>ご利用にあたって</li>
       </ol>
 
       <nav class="footer_sitemap clearfix">
         <dl class="footer_sitemap_tokyodo">
           <dt>
-            <a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</a>
+            <w-tokyodo-a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</w-tokyodo-a>
           </dt>
           <dd>
             <p>〒146-0094 東京都大田区東矢口三丁目30番14号</p>
             <ul class="footer_sitemap_tokyodo_links">
-              <li class="footer_sitemap_tokyodo_links_tel"><a href="tel:03-3737-3000">03-3737-3000</a></li>
-              <li class="footer_sitemap_tokyodo_links_mail"><a href="/contact">お問い合わせ</a></li>
+              <li class="footer_sitemap_tokyodo_links_tel"><w-tokyodo-a href="tel:03-3737-3000">03-3737-3000</w-tokyodo-a></li>
+              <li class="footer_sitemap_tokyodo_links_mail"><w-tokyodo-a href="/contact">お問い合わせ</w-tokyodo-a></li>
             </ul>
           </dd>
         </dl>
         <ul class="footer_sitemap_brand">
-          <li class="footer_sitemap_brand_direct"><a href="/direct/">DIRECT MANAGEMENT</a></li>
-          <li class="footer_sitemap_brand_neostall"><a href="/neostall/">ネオ屋台村</a></li>
-          <li class="footer_sitemap_brand_neoponte"><a href="/neoponte/">ネオポンテ</a></li>
-          <li class="footer_sitemap_brand_sharyobu"><a href="/sharyobu/">車両部</a></li>
+          <li class="footer_sitemap_brand_direct"><w-tokyodo-a href="/direct/">DIRECT MANAGEMENT</w-tokyodo-a></li>
+          <li class="footer_sitemap_brand_neostall"><w-tokyodo-a href="/neostall/">ネオ屋台村</w-tokyodo-a></li>
+          <li class="footer_sitemap_brand_neoponte"><w-tokyodo-a href="/neoponte/">ネオポンテ</w-tokyodo-a></li>
+          <li class="footer_sitemap_brand_sharyobu"><w-tokyodo-a href="/sharyobu/">車両部</w-tokyodo-a></li>
         </ul>
       </nav>
     </div>
@@ -36,7 +36,12 @@
 </template>
 
 <script>
+import WTokyodoA from '../w-tokyodo-anchor.vue';
+
 export default {
+  components: {
+    WTokyodoA
+  },
   computed: {
     current() {
       return (new Date()).getFullYear();

src/components/global/header/header.js

@@ -28,7 +28,12 @@ const initCollapse = () => {
   }
 };
 
+import WTokyodoA from '../w-tokyodo-anchor.vue';
+
 export default {
+  components: {
+    WTokyodoA
+  },
   mounted() {
     this.initialize();
 

src/components/global/header/header.vue

@@ -1,24 +1,24 @@
 <template>
   <header id="header">
     <div class="header_inner">
-      <h1 class="header_site_ttl"><a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</a></h1>
+      <h1 class="header_site_ttl"><w-tokyodo-a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</w-tokyodo-a></h1>
       <nav class="header_gnav">
         <div class="header_gnav_inner">
           <ul class="header_gnav_brand">
-            <li class="header_gnav_brand_direct"><a href="/direct/">DIRECT MANAGEMENT</a></li>
-            <li class="header_gnav_brand_neostall"><a href="/neostall/">ネオ屋台村</a></li>
-            <li class="header_gnav_brand_neoponte"><a href="/neoponte/">ネオポンテ</a></li>
-            <li class="header_gnav_brand_sharyobu"><a href="/sharyobu/">車両部</a></li>
+            <li class="header_gnav_brand_direct"><w-tokyodo-a href="/direct/">DIRECT MANAGEMENT</w-tokyodo-a></li>
+            <li class="header_gnav_brand_neostall"><w-tokyodo-a href="/neostall/">ネオ屋台村</w-tokyodo-a></li>
+            <li class="header_gnav_brand_neoponte"><w-tokyodo-a href="/neoponte/">ネオポンテ</w-tokyodo-a></li>
+            <li class="header_gnav_brand_sharyobu"><w-tokyodo-a href="/sharyobu/">車両部</w-tokyodo-a></li>
           </ul>
           <ul class="header_gnav_menu">
-            <li><a href="/company/"><span>会社概要</span></a></li>
-            <li><a href="/terms/"><span>ご利用にあたって</span></a></li>
-            <li><a href="/contact/"><span>お問い合わせ</span></a></li>
+            <li><w-tokyodo-a href="/company/"><span>会社概要</span></w-tokyodo-a></li>
+            <li><w-tokyodo-a href="/terms/"><span>ご利用にあたって</span></w-tokyodo-a></li>
+            <li><w-tokyodo-a href="/contact/"><span>お問い合わせ</span></w-tokyodo-a></li>
           </ul>
           <ul class="header_gnav_other">
             <li class="header_gnav_other_facebook"><a href="#" target="_blank">Facebook</a></li>
             <li class="header_gnav_other_twitter"><a href="#" target="_blank">Twitter</a></li>
-            <li class="header_gnav_other_contact"><a href="/contact/">お問い合わせ</a></li>
+            <li class="header_gnav_other_contact"><w-tokyodo-a href="/contact/">お問い合わせ</w-tokyodo-a></li>
           </ul>
           <div class="header_gnav_btn">
             <a @click="toggleCollapse">

src/components/global/w-tokyodo-anchor.vue

@@ -0,0 +1,14 @@
+<template>
+  <a v-bind:href="url"><slot /></a>
+</template>
+
+<script>
+export default {
+  props: ['href'],
+  data() {
+    return {
+      url: '//www.w-tokyodo.com' + this.href
+    };
+  }
+};
+</script>