尚品汇 ---day4

最新推荐文章于 2024-10-18 15:58:53 发布

L北杳

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量64

点赞数

分类专栏：前端项目---尚品汇文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_63961708/article/details/131953050

版权

前端项目---尚品汇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了在Vue开发中创建产品页面的步骤，包括使用静态组件、发送请求、应用Vuex以及动态展示组件。同时，讨论了Vue-Router的滚动行为配置，确保页面始终从顶部开始。针对异步请求导致的undefined错误，提出了初始化对象的解决方案。最后，文章提供了一个JavaScript实现的放大镜效果代码示例，展示了如何在鼠标移动时动态显示放大部分。

摘要由CSDN通过智能技术生成

开发产品页面步骤:

1. 静态组件

2. 发请求

3. vuex

4. 动态展示组件

---

vue-route中滚动行为:

// 引入vue路由中的滚动行为
    scrollBehavior(to, from, savedPosition){
        // 返回的y=0,表示滚动条在最上方
        return {y : 0}
    }

---

出现此类错误:

是指: 挂载到detail的mounted中,这时候发送请求拿数据,请求是异步的当模板解析到这个变量的时候,发现是undefined就报错了.

更改方法: 后面加上||{}, 其中categoryView初始时是一个对象,所以设置另外一种情况返回为空对象.

 categoryView(state){
        // state.goodInfo初始为空对象,空对象的categoryView属性值为undefined,
        return state.goodInfo.categoryView||{}
    }

注意: 因为异步请求,当服务器没有及时返回数据goodInfo就会返回一个初始状态为空对象,但

.categoryView就导致一个空对象里面本没有东西,这样就会出现undefined(判断中为假),为解决这个问题,我们也可以在后面或上一个空对象,这样返回值就不会出现undefined.

---

js实现放大镜效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .allDiv{
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid grey;
        }
        .allDiv img{
            width: 100%;
            height: 100%;
        }
        .allDiv .event{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 22;
        }
        .allDiv .mask{
            width: 50%;
            height: 50%;
            background-color: rgba(0, 255, 0, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .allDiv .big{
            width: 100%;
            height: 100%;
            position: absolute;
            top: -1px;
            left: 100%;
            border: 1px solid #aaa;
            overflow: hidden;
            z-index: 22;
            display: none;
            background: white;
        }
        .allDiv .big img{
            width: 200%;
            height: 200%;
            max-width: 200%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .event:hover~.mask,
        .event:hover~.big{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 存放最大的一个容器 -->
    <div class="allDiv">
        <!-- 存放照片 -->
        <img src="./images/floor-1-b02.png">
        <!-- 触发的事件 -->
        <div class="event" @mousemove = "handler"></div>
        <!-- 放大镜的效果 -->
        <div class="big">
            <img src="./images/floor-1-b02.png" ref="big">
        </div>
        <!-- 放大镜出现的小镜子 -->
        <div class="mask" ref="mask"></div>
    </div>
    <script>
        const vm = new Vue({
            el:'.allDiv',
            methods: {
                handler(event) {
                    let mask = this.$refs.mask;
                    let big = this.$refs.big;
                    // mask为放大镜中的小镜子,其中offsetWidth为小镜子宽度
                    // event为当鼠标放在div中时鼠标中心点, offsetX为中心点到边框的距离
                    let left = event.offsetX - mask.offsetWidth/2;
                    let top = event.offsetY - mask.offsetHeight/2;
                    // 约束范围
                    if(left <= 0)left = 0;
                    if(left >= mask.offsetWidth) left = mask.offsetWidth;
                    if(top <= 0)top = 0;
                    if(top >= mask.offsetHeight) top = mask.offsetHeight
                    // 修改元素的left和top值
                    mask.style.left = left + 'px';
                    mask.style.top = top + 'px';
                    // 因为开始设置图片位置为left = 0, top = 0,想要改变图片位置就要去负数
                    // 因为图片大小是原图片2倍, 所以在移动位置的时候也是2倍
                    big.style.left = - 2 * left + 'px';
                    big.style.top = - 2 * top + 'px'
                    },
            },
        })
    </script>
</body>
    
</html>