在前端开发中，使用 npm 包可以方便地管理依赖关系，并且可以提高开发效率。mgscarp-contactpoint 是一个 npm 包，可以用于在网页中添加联系方式。本文将介绍如何使用 mgscarp-contactpoint，包括安装、引入、调用、参数配置以及简单示例。
安装
通过 npm 可以安装 mgscarp-contactpoint：
npm install mgscarp-contactpoint --save
引入
在引入 mgscarp-contactpoint 之前，需要在网页中先引入必要的库文件。mgscarp-contactpoint 需要 jQuery 和 Bootstrap 这两个库文件，因此在 HTML 页面中需要引入它们：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
然后，可以在自己的 JavaScript 文件中引入 mgscarp-contactpoint：
import mgscarpContactpoint from 'mgscarp-contactpoint';
调用
在引入 mgscarp-contactpoint 后，可以通过调用它提供的方法来添加联系方式。mgscarp-contactpoint 提供的方法有以下几个：
addContactpoint()
添加一个默认类型的联系方式。
mgscarpContactpoint.addContactpoint();
addEmail()
添加一个邮箱地址联系方式。
mgscarpContactpoint.addEmail('your-email@example.com');addPhone()
添加一个电话号码联系方式。
mgscarpContactpoint.addPhone('1234567890');addWhatsApp()
添加一个 WhatsApp 联系方式。
mgscarpContactpoint.addWhatsApp('1234567890');addWeChat()
添加一个微信号联系方式。
mgscarpContactpoint.addWeChat('your-wechat-id');参数配置
在调用以上方法时，可以通过参数来配置联系方式的显示效果。mgscarp-contactpoint 提供了以下几个参数：
type
指定联系方式的类型，可以是 default、email、phone、whatsapp 和 wechat 中的一个，默认为 default。
text
指定联系方式的显示文本，默认为联系方式本身。
icon
指定联系方式的图标样式，可以是 Bootstrap 的图标样式类名中的一个，默认为一个带有问号的图标。
target
指定链接的打开方式，可以是 _blank、_self、_parent 或 _top 中的一个，默认为 _self。
container
指定联系方式的容器元素的选择器，默认为 body。
以下是一个配置示例：
mgscarpContactpoint.addEmail('your-email@example.com', {
type: 'email',
text: '联系我们',
icon: 'bi-envelope-fill me-2',
target: '_blank',
container: '#contact-container',
});示例
下面是一个使用 mgscarp-contactpoint 的示例代码：
-- -------------------- ---- -------
------
------
----- ----------------
--------------------------- ----------
----- ---------------- ---------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
--------
------------ -
------------------------------------------------------ -
----- --------
----- -------
----- ----------------- ------
------- ---------
---------- ---------------------
---
------------------------------------------ -
----- --------
----- ---------
----- ------------------ ------
------- ---------
---------- ---------------------
---
---
---------
-------
------
------------------------ -------
---- -----------------------------
-------
-------在这个示例中，我们在页面加载时使用了 $(function() {...}) 来保证 mgscarpContactpoint 所需的 jQuery 库已经加载完成。然后我们使用了 mgscarpContactpoint.addEmail() 和 mgscarpContactpoint.addPhone() 方法来添加两个联系方式，并对它们进行了一些参数配置。最后，我们在页面的 <body> 元素中添加了一个容器 <div>，并将其指定为联系方式的容器元素。在浏览器中打开页面后，可以看到我们添加的两个联系方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f2c