ocean-mail-list 使用文档

概述

ocean-mail-list 是基于 vue-cli 4.x 而搭建的一个用于通讯录需求的项目; launch-group-chat 是通讯录项目中发起群聊的组件;group-chat-dialog是通讯录发起群聊中的弹框组件

安装

npm i ocean-mail-list

声明组件

在src目录下面的main.js文件中输入如下代码，声明好组件以后可以在任何地方引用。因为是基于element-ui封装的组件，所以需要引入element-ui组件。

import { OceanMailList, LaunchGroupChat, GroupChatDialog } from 'ocean-mail-list/packages/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(OceanMailList)
Vue.use(LaunchGroupChat)
Vue.use(GroupChatDialog)

引用组件

在需要引用组件的时候引用即可

    <!-- 通讯录组件 -->
    <ocean-mail-list />
    <!-- 发起群聊组件 -->
    <launch-group-chat @btnConfirm="btnConfirm" />
    <!-- 发起群聊弹框组件 -->
    <group-chat-dialog :dialogVisble="dialogVisble" @btnConfirm="btnConfirm1" @btnCancel="btnCancel" />

    // dialogVisble 传变化的值，来打开发起群聊弹框组件
    /**
     * 发起群聊页面中，确定按钮的回调
     * 事件名称 btnConfirm
       说明 发起群聊页面中，确定按钮的回调
       回调参数 已选择的对象的具体信息组成的数组
               具体信息
               account_id 人员账号
               email 邮件
               portrait 头像
               status 状态 -1 未激活 0（其它如1，2）激活
               father_org 父级组织信息
               org 上级的组织薪资
     */
    btnConfirm (data) {
      console.log(data)
    },
    btnConfirm1 (data) {
      console.log(data)
    },
    btnCancel () {
      console.log('取消')
    }

配置代理服务

打开vue.config.js文件，配置代理服务

devServer: {
  open: true,
  proxy: {
    '/contact': {
      target: 'https://proxy-nj-di1.sit.cmft.com/',
      secure: false,
      changeOrigin: true
    }
  }
}

配置接口域名

打开.env.di文件(di环境)，配置接口域名

// 通讯录后台接口
VUE_APP_MAIL_LIST_URL = https://proxy-nj-di1.sit.cmft.com