介绍
vue-edge-check 是一个可以帮助开发者检查浏览器边缘距离的 Vue.js 组件。在网页制作过程中，有时候需要根据浏览器的边缘来确定网页的布局，而 vue-edge-check 可以自动计算出距离浏览器边缘的具体距离，从而帮助我们更加方便地进行开发。
安装
可以通过 npm 进行安装：
npm install --save vue-edge-check
在你需要使用 vue-edge-check 的组件中引入：
import Vue from 'vue' import VueEdgeCheck from 'vue-edge-check' Vue.use(VueEdgeCheck)
或者，你也可以在你的 .vue 文件中为全局注册 vue-edge-check 组件：
import Vue from 'vue'
import VueEdgeCheck from 'vue-edge-check'
Vue.component('vue-edge-check', VueEdgeCheck)使用
需要使用 vue-edge-check 的组件中直接引用：
<template>
<div>
<vue-edge-check :top="10" :left="10" :right="10" :bottom="10">
<!-- 在这里放你的组件 -->
</vue-edge-check>
</div>
</template>props 说明：
- top：距离浏览器上边缘的距离
- left：距离浏览器左边缘的距离
- right：距离浏览器右边缘的距离
- bottom：距离浏览器下边缘的距离
示例代码
-- -------------------- ---- -------
----------
-----
--------------- --------- ---------- ----------- -------------
---- ------------------
-------------
-----------
------
-----------------
------
-----------
------ -------
---------- -
------- ------
------ ------
----------------- -----
------- - -----
-------- -----
-
--------进阶用法
在一些情况下，我们可能需要在 vue-edge-check 的子组件中获取到距离浏览器边缘的距离值，这时候需要使用 vue-edge-check 提供的 $position 属性。
-- -------------------- ---- -------
----------
-----
--------------- --------- ---------- ----------- -------------
---- ----------------- ---------------------
-------------
-----------
------
-----------------
------
-----------
--------
------ ------- -
-------- -
------------- -
-- --------- -------------------------
---------------------------
-
-
-
---------总结
通过使用 vue-edge-check 组件，可以方便地获取到距离浏览器边缘的距离，从而帮助我们更加灵活地进行网页布局。同时，$position 属性的存在也为我们在子组件中获取距离值提供了方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725f81e8991b448e88a2