npm 包 mdc-weixin-customer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

mdc-weixin-customer 是一个基于 Vue.js 的微信客服组件库，它提供了一系列的 UI 组件和 API，帮助开发者更方便地在网页上集成微信客服功能。本文将介绍如何使用 npm 包来使用这个组件库。

安装

使用 npm 安装 mdc-weixin-customer：

npm install --save mdc-weixin-customer

在 Vue 项目中使用

首先，在 Vue 项目的main.js中导入并注册组件：

import Vue from 'vue';
import MdcWeixinCustomer from 'mdc-weixin-customer';

Vue.use(MdcWeixinCustomer);

其次，在组件内使用 mdc-weixin-customer 组件：

-- -------------------- ---- -------
----------
  -----
    ----------------
      ------------------
      --------------------
      ------------------------- --------
      -------------------- ---------
      ------------------ ------- ----- ---------------
    -------------------
  ------
-----------

组件功能介绍

组件属性

下面列出了组件可用的 prop：

Name	Type	Default	Description
appid	String	-	必选参数，指定微信公众号的 appid
openid	String	-	必选参数，指定用户的 openid
btnStyle	Object	{}	按钮样式，可自定义按钮的样式
chatStyle	Object	{}	进入聊天界面时弹框的样式
btnConfig	Object	{}	设置 chatbox 按钮的配置，可设置文本和图标，默认为 `{text: '在线客服', icon: 'icon-wechat'}`，即：在线客服和微信图标

组件方法

组件暴露的方法如下：

Name	Parameters	Return	Description
`$showChatbox`	-	-	显示聊天对话框
`$hideChatbox`	-	-	隐藏聊天对话框
`$addMessage`	msg: String	-	添加聊天信息

组件事件

mdc-weixin-customer 组件也暴露了一些事件，这里列举一些常用的事件：

Name	Parameters	Description
init	-	组件初始化时触发
show	-	显示聊天对话框时触发
hide	-	隐藏聊天对话框时触发
message	msg：String	发送聊天消息时触发
send	msg: String	接收聊天消息时触发

示例代码

这里提供一个使用 mdc-weixin-customer 的示例代码，其中用到了自定义按钮和样式：

-- -------------------- ---- -------
----------
  -----
    ----------------
      ------------------
      --------------------
      ------------------------- --------
      -------------------- ---------
      ------------------ ------------ ----- ----------------
    -------------------
  ------
-----------

总结

mdc-weixin-customer 组件库是一个非常方便的微信客服集成工具，本文详细地介绍了如何使用 npm 包在 Vue 项目中集成这个组件库，并且向读者介绍了组件的使用方法、属性、方法、事件等等。希望本文能对前端工程师们在实际项目中使用 mdc-weixin-customer 时产生一些帮助和指导。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055a3781e8991b448d7d9b