<template>
<!-- 此页面为图片轮播页面 -->
<div id="kuang_jia">
<div id="img">
<div ref="divImage" @mouseenter="mouseEenter" @mouseleave="mouseLeave">
<!-- 标签中的ref的作用和js中的document.getElementById作用一样.都是获取标签属性,此div用于控制超出隐藏 -->
<img
v-for="(item, index) in imgList.array"
:key="index"
alt=""
class="bigImg"
v-bind:src="item"
/>
<!-- 设置图片数组循环,依次获取所有图片 -->
<div v-for="(item, index) in miaoshuList.array" id="miaoshu" :key="index">
<p>{{ item.mingcheng }}</p>
<p>{{ item.shichang }}</p>
<p>{{ item.leixing }}</p>
<p>{{ item.daoyan }}</p>
</div>
</div>
</div>
<span class="zuo" @click="zuo"> < </span>
<span class="you" @click="you"> > </span>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'
// 导入所有图片
const imgList = reactive({ array: [] })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
// 将图片放入数组,以供循环,由于图片是直接导入的,所以不用放在onMounted()方法内
const divImage = ref()
// 获取标签属性
const countChu = ref()
// 设置滚动初始值
const width = ref()
let xunHuan1
// 设置轮播变量,方便调用
const miaoshuList = reactive({ array: [] })
// 设置描述数组
watch(countChu, () => {
if (countChu.value > 5) {
clearTimeout(xunHuan1)
// 当页面预览的最后一张图片为图片库中的最后一张时,则停止滚动
} else {
xunHuan1 = setTimeout(() => {
width.value = (-10) * countChu.value
divImage.value.style.transform = 'translateX(' + width.value + '%)'
// 设置每次轮播的距离百分比
divImage.value.style.transitionDuration = '1s'
// 设置每次轮播过程的时间
countChu.value++
// 设置次数的增长
}, 3000)
// 设置滚动,由于水平原因无法实现轮播,故设置为当页面最右边的图片为最后一张时,停止滚动
}
console.log(countChu.value)
})
// 设置监听事件,当预览的图片不是最后一张时,则继续滚动
const zuo = () => {
clearTimeout(xunHuan1)
if (countChu.value <= 1) {
return
}
width.value += 10
countChu.value--
divImage.value.style.transform = 'translateX(' + width.value + '%)'
setTimeout(xunHuan1)
}
// 设置左侧箭头点击事件
const you = () => {
clearTimeout(xunHuan1)
if (countChu.value >= 5) {
return
}
width.value -= 10
countChu.value++
divImage.value.style.transform = 'translateX(' + width.value + '%)'
setTimeout(xunHuan1)
}
// 设置右侧箭头点击事件
onMounted(() => {
countChu.value = 1
miaoshuList.array = [
{
mingcheng: '凤皇传',
shichang: '120分钟',
leixing: '喜剧 / 古装',
daoyan: '梁文弋'
},
{
mingcheng: '风暴',
shichang: '104分钟',
leixing: '动作 犯罪 警匪',
daoyan: '袁锦麟'
},
{
mingcheng: '废柴特工',
shichang: '96分钟',
leixing: '喜剧 / 动作',
daoyan: '玛·诺里扎德'
},
{
mingcheng: '罪之声 ',
shichang: '142分钟',
leixing: '悬疑 / 犯罪',
daoyan: '土井裕泰'
},
{
mingcheng: '小妇人',
shichang: '135分钟',
leixing: '剧情 / 爱情',
daoyan: '格蕾塔·葛韦格'
},
{
mingcheng: '无人区',
shichang: '117分钟',
leixing: '剧情 / 犯罪 / 西部',
daoyan: '宁浩'
},
{
mingcheng: '妈妈!',
shichang: '109分钟',
leixing: '剧情',
daoyan: '杨荔钠'
},
{
mingcheng: '线人',
shichang: '113分钟',
leixing: '剧情 / 动作 / 惊悚',
daoyan: '林超贤'
},
{
mingcheng: '狙击手',
shichang: '96分钟',
leixing: '剧情 / 历史 / 战争',
daoyan: '张艺谋 / 张末'
},
{
mingcheng: '绝地逃亡',
shichang: '111分钟',
leixing: '喜剧 / 动作',
daoyan: '雷尼·哈林'
}
]
})
// 页面载入时赋值
const mouseEenter = () => {
clearTimeout(xunHuan1)
}
const mouseLeave = () => {
setTimeout(xunHuan1)
}
</script>
<style scoped>
#kuang_jia {
position: relative;
width: 100%;
margin: 0 auto;
}
img, #miaoshu {
width: 200px;
height: 300px;
margin: 20px;
}
img {
border: azure 3px solid;
}
#miaoshu {
float: left;
background-color: black;
/*display: none;*/
}
#img {
width: 1230px;
height: 340px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img:hover {
transform: scale(1.05)
}
/* 设置鼠标移到图片上的效果 */
#img div {
width: 2460px;
height: 340px;
position: relative;
background-color: bisque;
}
.zuo, .you {
font-size: 50px;
position: relative;
cursor: pointer;
display: block;
width: 50px;
height: 50px;
color: aqua;
}
.zuo {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
}
.you {
position: absolute !important;
top: 50%;
right: 0;
transform: translateY(-50%);
}
/* 扩展:!important(Css属性) */
/* 用法: https://www.runoob.com/css/css-important.html */
</style>
不要直接给我一堆代码,要告诉我哪里出问题了
组件内部守卫
1.beforeRouteEnter(to,from,next)
当进入组件前 执行函数
// to 去哪个路由
// from 从哪个路由
// next() true 允许进入 / false 不允许 / '/user' 进入user地址
// beforeRouteEnter守卫不能访问this，通过 `vm` 访问组件实例 next(vm=>{})
2.beforeRouteLeave(to,from,next)
当离开组件前 执行函数
3.beforeRouteUpdate
当组件更新的时候
路由独享组件
beforeEnter(to,from,next)
全局守卫
组件内部，独享，都是对某一个组件起作用，对每一个组件都能守卫到
const router = new Router();
export default router;
// 每个页面都守卫，按需守卫
// 路由meta信息 requireAuth（需要权限） 页面才守卫
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
console.log("我要进入到", to.name);
// 判断是否登录
if (isLog) {
next(true)
} else {
// 如果没有登录跳转login 后面加一个条件redirect 等于要去的页面的地址 （方便登录成功后返回原页面）
next('/login?redirect=' + to.path)
}
} else {
next();
}
})路由包含的信息$route
// fullpath 全地址
// path 路由地址
// params 路由的参数
// query 问号后查询的参数
// name 路由名称
// meta 路由元信息，标识路由是否需要全局守卫