vue小测试之拖拽、自定义事件

在开始之前我去复习了一下，clientX、clientY、pageX、pageY的区别，对于不熟悉offsetLeft和offsetTop的也可以在这里去复习一下。

vue拖拽指令之offsetX、clientX、pageX、screenX_wade3po的博客-CSDN博客_vue offset

客户区坐标位置（clientX，clientY）

鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。

页面坐标位置（pageX，pageY）

pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的

屏幕坐标位置（screenX，screenY）

鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。

代码：

效果图：

案列二：自定义事件的子传父

1、css板块代码

 #root {
            width: 900px;
            height: 600px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .sh {
            width: 400px;
            height: 100%;
            background-color: rgb(233, 157, 157);
            padding: 10px;
        }

        .shop {
            width: 100%;
            height: 150px;
            background-color: white;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .bgcont {
            width: 400px;
            height: 100%;
            background-color: rgb(157, 231, 233);
            padding: 10px;
        }

        .shop img {
            width: 120px;
            margin-left: 10px;
        }

        .shop_context {
            margin: 0px 10px;
        }

        .shop_context>p {
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 14px;
            color: rgb(112, 111, 111);
        }

        .shop_context div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .shop_context div>p {
            color: rgb(71, 70, 70);
            font-size: 14px;
        }

        .active {
            color: darkorange !important;
        }

        .son {
            width: 100%;
            height: 100%;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .son img {
            margin-top: 20px;
            width: 270px;
            height: 290px;
            border: darkgrey 1px solid;
        }

        .son p {
            margin: 0px 20px;
            font-size: 15px;
        }

        .son h2:last-of-type {
            color: red;
        }

        .son button {
            border: none;
            width: 250px;
            height: 45px;
            border-radius: 10px;
            background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
        }

2、body部分

    

        

            

                
                

                    
{{item.name}}
                    
{{item.context}}
                    

                        
￥{{item.price}}缘
                        

                    
                
            
        

        

            
        

    

3、vue代码

template代码是放在body中的，也可以将它写在组件里，依据个人喜好设置

效果展示：