Vue.component("ito-main-btn-menu", {
template: `
![]()
{{item.name}}
`,
props: ["type"],
data() {
return {
windowWidth: window.innerWidth,
activeClickTitle: "",
activeClickList: [],
mainButtonList: [
{
icon: "icon-main-01.png",
name: "甲状腺与
甲状旁腺的疾病",
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: "亚急性
甲状腺炎",
url: "02_thyroid_disease/02_6subacute_thyroiditis.html",
},
{
name: "单纯性弥漫性
甲状腺肿",
url: "02_thyroid_disease/02_3diffuse_nontoxic_goiter.html",
},
{
name: "甲状旁腺的
作用与疾病",
url: "02_thyroid_disease/03_1parathyroid.html",
},
],
},
{
icon: "icon-main-02.png",
name: "门诊指南",
sub: [
{
name: "挂号时间，
门诊日指南",
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");
}
}
}
},
},
});