添加测试Vue
yzw
parent
b9a1d64a60
commit
8ffc42419c
|
|
@ -13,6 +13,4 @@ tests/**/coverage/
|
|||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
src/views/Test/test1.vue
|
||||
src/views/Test/test2.vue
|
||||
*.sln
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div class="my-body">
|
||||
<transition>
|
||||
<ul id="menu" v-if="navVisable" :key="curSection">
|
||||
<li :class="{ active: curSection == 1 }">
|
||||
<a @click="handleNavClick(1)">第一屏</a>
|
||||
</li>
|
||||
<li :class="{ active: curSection == 2 }">
|
||||
<a @click="handleNavClick(2)">第二屏</a>
|
||||
</li>
|
||||
<li :class="{ active: curSection == 3 }">
|
||||
<a @click="handleNavClick(3)">第三屏</a>
|
||||
</li>
|
||||
<li :class="{ active: curSection == 4 }">
|
||||
<a @click="handleNavClick(4)">第四屏</a>
|
||||
</li>
|
||||
<li>
|
||||
<el-button
|
||||
type="drawer"
|
||||
icon="el-icon-arrow-left"
|
||||
@click="hideNav()"
|
||||
></el-button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="menu" v-else>
|
||||
<li>
|
||||
<el-button
|
||||
type="drawer"
|
||||
icon="el-icon-arrow-right"
|
||||
@click="showNav()"
|
||||
></el-button>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
|
||||
<div id="dowebok">
|
||||
<div class="section">
|
||||
<h3>第一屏</h3>
|
||||
<p>fullPage.js — 绑定菜单演示</p>
|
||||
<div id="test">yzw</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="slide">
|
||||
<h3>第2屏</h3>
|
||||
<p>第0页</p>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h3>第2屏</h3>
|
||||
<p>第1页</p>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h3>第2屏</h3>
|
||||
<p>第2页</p>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h3>第2屏</h3>
|
||||
<p>第3页</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>第三屏</h3>
|
||||
<p>绑定的菜单没有默认的样式，你需要自行编写</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>第四屏</h3>
|
||||
<p>这是最后一屏</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import "@/assets/css/jquery.fullPage.css";
|
||||
import "@/assets/js/jquery.fullPage.min.js";
|
||||
|
||||
export default {
|
||||
name: "Test1",
|
||||
data() {
|
||||
return {
|
||||
navVisable: false,
|
||||
curSection: 1,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
$(() => {
|
||||
$("#dowebok").fullpage({
|
||||
sectionsColor: ["#1bbc9b", "#4BBFC3", "#7BAABE", "#f90"],
|
||||
menu: "#menu",
|
||||
// navigation: true,
|
||||
// navigationTooltips: ["人口", "二", "三", "四"],
|
||||
// slidesNavigation: true,
|
||||
// slidesNavPosition: null,
|
||||
// loopHorizontal: false,
|
||||
afterLoad: (origin, destination, direction, trigger) => {
|
||||
// console.log('origin', origin)
|
||||
// console.log('destination', destination)
|
||||
this.curSection = destination;
|
||||
},
|
||||
afterSlideLoad: (
|
||||
section,
|
||||
origin,
|
||||
destination,
|
||||
direction,
|
||||
trigger
|
||||
) => {},
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleNavClick(val) {
|
||||
$.fn.fullpage.moveTo(val);
|
||||
},
|
||||
hideNav() {
|
||||
this.navVisable = false;
|
||||
},
|
||||
showNav() {
|
||||
this.navVisable = true;
|
||||
// console.log($.fn);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .my-body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
#menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
list-style-type: none;
|
||||
z-index: 70;
|
||||
}
|
||||
#menu li {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
height: 40px;
|
||||
/* font-size: 14px; */
|
||||
}
|
||||
#menu a {
|
||||
float: left;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
#menu .active a {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
text-align: center;
|
||||
font: 50px "Microsoft Yahei";
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 查询按钮 */
|
||||
.el-button--drawer {
|
||||
color: rgb(148, 197, 238);
|
||||
background-color: rgb(240, 248, 255);
|
||||
border-color: rgb(148, 197, 238);
|
||||
}
|
||||
|
||||
.el-button--drawer:hover {
|
||||
color: rgb(240, 248, 255);
|
||||
background-color: rgb(148, 197, 238);
|
||||
border-color: rgb(148, 197, 238);
|
||||
}
|
||||
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
|
||||
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue