Vue.component("ito-main-btn-menu", {
template: `<div>
<div v-if="type=='main'">
<div class="container position-relative">
<div
class="py-3 mx-1 mx-md-0 row d-flex justify-content-between btn-main-box"
>
<div
v-for="(item, index) in mainButtonList"
:key="item.name"
class="col-2"
:style="item.style"
>
<div
class="btn-main position-relative pointer"
:class="'btn-main-'+index"
@click="btnClick(index, $event, item.url)"
>
<div><img v-bind:src="'../assets/img/'+item.icon" />
<div class="pt-2" :class="'green-underline-'+index" v-html="item.name">
</div>
<div
v-show="index===0 || index===1"
class="icon-plus-green"
:class="'icon-plus-green-'+index"
></div>
</div>
</div>
</div>
</div>
<div class="btn-main-dropdown btn-main-0-dropdown py-3 px-3 mt-1">
<div
class="d-flex flex-wrap justify-content-start align-items-center"
>
<a
v-for="(item, index) in mainButtonList[0].sub"
:key="index"
:href="item.url"
class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
><div v-html="item.name"></div></a
>
</div>
</div>
<div class="btn-main-dropdown btn-main-1-dropdown py-3 px-3 mt-1">
<div
class="d-flex flex-wrap justify-content-start align-items-center"
>
<a
v-for="(item, index) in mainButtonList[1].sub"
:key="index"
:href="item.url"
class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
><div v-html="item.name"></div></a
>
</div>
</div>
</div>
</div>
<div v-else>
<div class="d-block d-md-none container position-relative mt-md-5 btn-main-box-sp">
<div
class="py-3 mx-1 mx-md-0 row d-flex justify-content-between btn-main-box"
>
<div
v-for="(item, index) in mainButtonList"
:key="item.name"
class="col-2"
:style="item.style"
>
<div
class="btn-main position-relative pointer"
:class="'btn-main-'+index"
@click="btnClick(index, $event, '../'+item.url)"
>
<div><img v-bind:src="'../../assets/img/'+item.icon" />
<div class="pt-2" :class="'green-underline-'+index" v-html="item.name">
{{item.name}}
</div>
<div
v-show="index===0 || index===1"
class="icon-plus-green"
:class="'icon-plus-green-'+index"
></div>
</div>
</div>
</div>
</div>
<div class="btn-main-dropdown btn-main-0-dropdown py-3 px-3 mt-1">
<div
class="d-flex flex-wrap justify-content-start align-items-center"
>
<a
v-for="(item, index) in mainButtonList[0].sub"
:key="index"
:href="'../'+item.url"
class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
><div v-html="item.name"></div></a
>
</div>
</div>
<div class="btn-main-dropdown btn-main-1-dropdown py-3 px-3 mt-1">
<div
class="d-flex flex-wrap justify-content-start align-items-center"
>
<a
v-for="(item, index) in mainButtonList[1].sub"
:key="index"
:href="'../'+item.url"
class="col-md-2 text-center btn-menu btn-menu-h btn-green mx-3 my-1 d-flex align-items-center justify-content-center font-white"
><div v-html="item.name"></div></a
>
</div>
</div>
</div>
</div>
<!-- overlay Menu (Mous Hover) -->
<div class="btn-main-sp-overlay-menu">
<div class="container">
<a href="" class="closebtn" @click="closeClickNav()">×</a>
<div class="btn-main-sp-overlay-content">
<div
class="btn-main-sp-overlay-menu-title pb-3 mx-5 font-22 fw-bold"
>
{{activeClickTitle}}
</div>
<div
class="btn-main-sp-overlay-menu-list mt-3 px-4 d-flex flex-wrap justify-content-between align-items-center"
>
<div v-for="(item, index) in activeClickList"
:key="index"
class="col-6 px-1" >
<a
:href="type === 'main' ? item.url : '../'+item.url"
class="my-2 py-3 px-2 d-flex align-items-center justify-content-center"
><div v-html="item.name"></div></a
>
</div>
</div>
</div>
</div>
</div>
<!-- overlay Menu (Mous Hover) -->
</div>
`,
props: ["type"],
data() {
return {
windowWidth: window.innerWidth,
activeClickTitle: "",
activeClickList: [],
mainButtonList: [
{
icon: "icon-main-01.png",
name: "逕ｲ迥ｶ閻ｺ荳�<br class='sp-line d-lg-none'>逕ｲ迥ｶ譌∬�逧�明逞�",
url: "",
style: "margin-left: 1px;",
sub: [
{
name: "譚･髯｢逧�ｼ遶ｯ",
url: "02_thyroid_disease/01_kikkake.html",
},
{
name: "逕ｲ迥ｶ閻ｺ逧�ｽ懃畑",
url: "02_thyroid_disease/02_2function_of_thyroid.html",
},
{
name: "逍ｾ逞�噪迚ｹ蠕�",
url: "02_thyroid_disease/02_1thyroid_diseases.html",
},
{
name: "譯･譛ｬ豌冗羅",
url: "02_thyroid_disease/02_5_1about_hashimoto.html",
},
{
name: "蟾ｴ蝪樊撩豌冗羅",
url: "02_thyroid_disease/02_4_1about_basedow.html",
},
{
name: "逕ｲ迥ｶ閻ｺ閧ｿ逖､",
url: "02_thyroid_disease/02_7_1about_nodle.html",
},
{
name: "莠壽･諤ｧ<br class='d-xl-none'>逕ｲ迥ｶ閻ｺ轤�",
url: "02_thyroid_disease/02_6subacute_thyroiditis.html",
},
{
name: "蜊慕ｺｯ諤ｧ蠑･貍ｫ諤ｧ<br class='d-xl-none'>逕ｲ迥ｶ閻ｺ閧ｿ",
url: "02_thyroid_disease/02_3diffuse_nontoxic_goiter.html",
},
{
name: "逕ｲ迥ｶ譌∬�逧�<br class='d-xl-none'>菴懃畑荳守明逞�",
url: "02_thyroid_disease/03_1parathyroid.html",
},
],
},
{
icon: "icon-main-02.png",
name: "髣ｨ隸頑欠蜊�",
sub: [
{
name: "謖ょ捷譌ｶ髣ｴ��<br class='d-xl-none'>髣ｨ隸頑律謖�漉",
url: "05_guide/01_1outpatient_receipt.html",
},
{
name: "蛹ｻ逍礼ｿｻ隸�",
url: "09_translate/translate.html",
},
],
},
// {
// icon: "icon-main-03.png",
// name: "隸顔沫螳樣刔謌先棡",
// url: "07_results/01_results.html",
// },
// {
// icon: "icon-main-04.png",
// name: "FAQ",
// url: "23_faq/faq.html",
// },
{
icon: "icon-main-05.png",
name: "莠､騾壼髄蟇ｼ",
url: "14_traffic_guide/traffic_guide.html",
},
],
};
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
},
btnClick(index, event, url) {
console.log('click', url);
if (index === 2 || index === 3 || index === 4) {
window.location.href = url;
}
if (this.windowWidth <= 767) {
if (index === 0) {
event.target.classList.add("active");
this.activeClickTitle = "逕ｲ迥ｶ閻ｺ逍ｾ逞�";
this.activeClickList = this.mainButtonList[0].sub;
this.openClickNav();
} else if (index === 1) {
event.target.classList.add("active");
this.activeClickTitle = "髣ｨ隸雁ｰｱ隸顔噪莉狗ｻ�";
this.activeClickList = this.mainButtonList[1].sub;
this.openClickNav();
}
}
},
openClickNav() {
document.querySelector(".btn-main-sp-overlay-menu").style.display =
"block";
},
closeClickNav() {
document.querySelector(".btn-main-sp-overlay-menu").style.dislpay =
"none";
},
},
created() {
window.addEventListener("resize", this.handleResize);
this.handleResize();
},
destroyed() {
window.removeEventListener("resize", this.handleResize);
},
mounted() {
this.$nextTick(() => {
if (this.windowWidth > 767) {
var hoverBtn3 = document.querySelector(".btn-main-0");
var hoverBtn4 = document.querySelector(".btn-main-1");
hoverBtn3.addEventListener(
"mouseenter",
function (event) {
handler("3", event);
},
false
);
hoverBtn3.addEventListener("mouseleave", function (event) {
setTimeout(() => {
remover("3", event);
}, 100);
});
hoverBtn4.addEventListener(
"mouseenter",
function (event) {
handler("4", event);
},
false
);
hoverBtn4.addEventListener("mouseleave", function (event) {
setTimeout(() => {
remover("4", event);
}, 100);
});
function handler(type, event) {
if (window.innerWidth <= 767) {
return;
}
let dropdown;
let valueCheck = {
3: ".btn-main-0-dropdown",
4: ".btn-main-1-dropdown",
};
dropdown = document.querySelector(valueCheck[type]);
dropdown.classList.add("d-block");
event.target.classList.add("active");
dropdown.addEventListener("mouseenter", function (e) {
e.target.classList.add("d-block", "active");
event.target.classList.add("active");
});
dropdown.addEventListener("mouseleave", function (e) {
e.target.classList.remove("d-block", "active");
event.target.classList.remove("active");
});
}
function remover(type, event) {
let dropdown;
let valueCheck = {
3: ".btn-main-0-dropdown",
4: ".btn-main-1-dropdown",
};
dropdown = document.querySelector(valueCheck[type]);
if (dropdown.classList.contains("active") == false) {
dropdown.classList.remove("d-block");
event.target.classList.remove("active");
}
}
}
});
},
watch: {
windowWidth: function (val) {
if (val > 767) {
var hoverBtn3 = document.querySelector(".btn-main-0");
var hoverBtn4 = document.querySelector(".btn-main-1");
hoverBtn3.addEventListener(
"mouseenter",
function (event) {
handler("3", event);
},
false
);
hoverBtn3.addEventListener("mouseleave", function (event) {
setTimeout(() => {
remover("3", event);
}, 100);
});
hoverBtn4.addEventListener(
"mouseenter",
function (event) {
handler("4", event);
},
false
);
hoverBtn4.addEventListener("mouseleave", function (event) {
setTimeout(() => {
remover("4", event);
}, 100);
});
function handler(type, event) {
if (window.innerWidth <= 767) {
return;
}
let dropdown;
let valueCheck = {
3: ".btn-main-0-dropdown",
4: ".btn-main-1-dropdown",
};
dropdown = document.querySelector(valueCheck[type]);
dropdown.classList.add("d-block");
event.target.classList.add("active");
dropdown.addEventListener("mouseenter", function (e) {
e.target.classList.add("d-block", "active");
event.target.classList.add("active");
});
dropdown.addEventListener("mouseleave", function (e) {
e.target.classList.remove("d-block", "active");
event.target.classList.remove("active");
});
}
function remover(type, event) {
let dropdown;
let valueCheck = {
3: ".btn-main-0-dropdown",
4: ".btn-main-1-dropdown",
};
dropdown = document.querySelector(valueCheck[type]);
if (dropdown.classList.contains("active") == false) {
dropdown.classList.remove("d-block");
event.target.classList.remove("active");
}
}
}
},
},
});