介绍
Github 资源页的角落上有一个比较有意思的小东西——Github Corners。它是一个小图标，它可以用来跳转到 Github 项目的首页。在我的 Github 资源页面上，使用了它，非常得到了网友的喜爱。但是，如果每次都要手写代码实现它，是非常繁琐的事情。因此，一个叫做 vue2-github-corners 的 npm 包应运而生，通过它，我们可以非常方便地实现 Github Corners。在这篇文章中，我们将详细地介绍如何使用它。
安装
你可以通过 npm 来安装 vue2-github-corners:
--- ------- ------------------- ------
使用
我们需要在 Vue.js 项目中引用 vue2-github-corners，示例代码如下:
------ --- ---- ----- ------ ------------- ---- --------------------- ----------------------
然后在你的组件中使用 vue2-github-corners:
----------
-----
--------------- ---------------------------------- --------------- ----------------------------------
--------- -----------
------
-----------
--------
------ ------- -
----- ------------
-
---------在这个例子中，我们定义了三个组件属性:
url: 最终用户将要跳转的地址，一般为 Github 项目的首页或仓库地址。color: Github Corners 的颜色，可以为 16 进制或颜色字符串。position: Github Corners 的位置，可以为left或right。
注意事项
- 你需要在你的
<html>元素中加入lang="en"或类似语言代码，否则Github Corners 会失效。 - 如果你的
<html>元素以上的标签设置了距离顶端的距离，那么在移动 Github Corners 的时候，你需要将position的属性值设为absolute。 - 当你的页面高度不够时，请不要使用
position:fixed位置，否则交互体验可能不好。
总结
vue2-github-corners 是一个非常实用的 npm 包。使用它可以大大降低我们手写代码的工作量，让我们能够更加轻松地实现 Github Corners 功能。在使用的过程中，我们需要注意一些细节的问题。希望本篇文章能够给初学者带来帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005623681e8991b448df842