npm 包 vue2-github-corners 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Github 资源页的角落上有一个比较有意思的小东西——Github Corners。它是一个小图标，它可以用来跳转到 Github 项目的首页。在我的 Github 资源页面上，使用了它，非常得到了网友的喜爱。但是，如果每次都要手写代码实现它，是非常繁琐的事情。因此，一个叫做 vue2-github-corners 的 npm 包应运而生，通过它，我们可以非常方便地实现 Github Corners。在这篇文章中，我们将详细地介绍如何使用它。

安装

你可以通过 npm 来安装 vue2-github-corners:

npm install vue2-github-corners --save

使用

我们需要在 Vue.js 项目中引用 vue2-github-corners，示例代码如下:

import Vue from 'vue'
import GithubCorners from 'vue2-github-corners'

Vue.use(GithubCorners)

然后在你的组件中使用 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