优化

examples/App.vue

 <template>
-  <header class="header">
-    <div class="logo"></div>
-    <div class="message">
-      <!-- <vue-message :option="{ source: 'MESSAGE_WEB' }" /> -->
-    </div>
-  </header>
+  <div>
+    <header class="header">
+      <div class="logo"></div>
+      <div class="message">
+        <!-- <vue-message :option="{ source: 'MESSAGE_WEB' }" /> -->
+      </div>
+    </header>
+    <el-button>发送消息</el-button>
+  </div>
 </template>
 
 <script>
 import Message from '@/main.js'
 export default {
   mounted() {
-    Message({ container: '.message', source: 'MESSAGE_WEB' })
+    Message({
+      container: '.message',
+      source: 'SOFIA_WEB',
+      baseURL: 'https://test-microservices-message-service-api.ezijing.com'
+    })
   }
 }
 </script>

package.json

 {
   "name": "@ezijing/web-message-sdk",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "main": "dist/message.umd.js",
   "files": [
@@ -9,7 +9,7 @@
     "README.md"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build --target lib --name message ./src/main.js",
     "lint": "vue-cli-service lint"
   },

src/Main.vue

 <template>
-  <div class="app-message">
+  <div class="v-message-input">
     <el-popover trigger="hover" width="350px" @show="handlePopoverShow">
       <template #reference>
-        <div class="app-message-icon" @click="show">
+        <div class="v-message-input-icon" @click="show">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"
@@ -15,7 +15,7 @@
               d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"
             />
           </svg>
-          <div class="dot" v-if="!!unreadCount"></div>
+          <div class="v-message-input-dot" v-if="!!unreadCount"></div>
         </div>
       </template>
       <message-popover
@@ -65,18 +65,18 @@ export default {
 }
 </script>
 
-<style scoped>
-.app-message {
+<style>
+.v-message-input {
   position: relative;
   display: inline-block;
 }
-.app-message-icon {
+.v-message-input-icon {
   position: relative;
   display: inline-block;
   cursor: pointer;
   padding: 0 5px;
 }
-.dot {
+.v-message-input-dot {
   position: absolute;
   top: 0;
   right: 0;

src/components/Message.vue

 <template>
-  <div class="message">
-    <div class="message-hd">
+  <div class="v-message">
+    <div class="v-message-hd">
       <el-menu :default-active="type" @select="handleSelect">
         <el-submenu v-for="item in menus" :key="item.id" :index="item.id">
           <template #title>
@@ -12,8 +12,8 @@
         </el-submenu>
       </el-menu>
     </div>
-    <div class="message-bd">
-      <message-list :type="type" :key="type" v-bind="$attrs" v-on="$listeners"></message-list>
+    <div class="v-message-bd">
+      <message-list :type="type" :key="type"></message-list>
     </div>
   </div>
 </template>
@@ -48,52 +48,46 @@ export default {
 }
 </script>
 
-<style scoped>
-Ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.message {
+<style>
+.v-message {
   display: flex;
 }
-.message-hd {
+.v-message-hd {
   width: 125px;
   min-height: 200px;
   border-right: 1px solid #eee;
 }
-::v-deep .el-menu {
+.v-message .el-menu {
   border-right: 0;
 }
-::v-deep .message-hd .el-submenu__title {
+.v-message .el-submenu__title {
   height: 40px;
   font-size: 16px;
   line-height: 40px;
   color: #222;
   padding: 0 !important;
 }
-::v-deep .message-hd .el-submenu .el-menu-item {
+.v-message .el-submenu .el-menu-item {
   padding: 0 !important;
   min-width: auto;
   color: #999;
 }
-::v-deep .message-hd .el-submenu__title:hover {
+.v-message .el-submenu__title:hover {
   background-color: transparent;
 }
-::v-deep .message-hd .el-menu-item:focus,
-::v-deep .message-hd .el-menu-item:hover {
+.v-message .el-menu-item:focus,
+.v-message .el-menu-item:hover {
   background-color: transparent;
   color: #ba053f;
 }
-::v-deep .message-hd .el-submenu .el-menu-item {
+.v-message .el-submenu .el-menu-item {
   height: 30px;
   line-height: 30px;
 }
-::v-deep .message-hd .el-submenu .el-menu-item.is-active {
+.v-message .el-submenu .el-menu-item.is-active {
   color: #ba053f;
 }
-.message-bd {
+.v-message-bd {
   flex: 1;
   padding-left: 20px;
 }

src/components/MessageContent.vue

 <template>
-  <div class="message-content">
-    <div class="message-content-hd">
+  <div class="v-message-content">
+    <div class="v-message-content-hd">
       <h1>{{ data.title }}</h1>
       <p>{{ data.send_time }}</p>
     </div>
-    <div class="message-content-bd" v-html="data.payload"></div>
+    <div class="v-message-content-bd" v-html="data.payload"></div>
     <el-button type="primary" @click="$emit('close')">我知道了</el-button>
   </div>
 </template>
@@ -34,24 +34,24 @@ export default {
 }
 </script>
 
-<style scoped>
-.message-content-hd h1 {
+<style>
+.v-message-content-hd h1 {
   margin: 0;
   font-size: 16px;
   font-weight: normal;
   color: #222;
 }
-.message-content-hd p {
+.v-message-content-hd p {
   margin: 0;
   padding: 10px 0;
   color: #999;
 }
-.message-content-bd {
+.v-message-content-bd {
   margin-bottom: 40px;
   font-size: 14px;
   color: #444;
 }
-.message-content .el-button {
+.v-message-content .el-button {
   display: block;
   margin: 0 auto;
   width: 140px;

src/components/MessageItem.vue

 <template>
-  <div class="message-item" :class="classes" @click="visible = true">
-    <div class="message-item-title">{{ data.title }}</div>
-    <div class="message-item-time">{{ data.send_time }}</div>
+  <div class="v-message-item" :class="classes" @click="visible = true">
+    <div class="v-message-item-title">{{ data.title }}</div>
+    <div class="v-message-item-time">{{ data.send_time }}</div>
     <el-dialog :visible.sync="visible" :append-to-body="true" title="消息详情" width="600px" v-if="visible">
-      <message-content :data="data" v-bind="$attrs" @close="visible = false" />
+      <message-content :data="data" v-on="$listeners" @close="visible = false" />
     </el-dialog>
   </div>
 </template>
@@ -31,8 +31,8 @@ export default {
 }
 </script>
 
-<style scoped>
-.message-item {
+<style>
+.v-message-item {
   padding: 8px 0;
   font-size: 14px;
   line-height: 20px;
@@ -40,13 +40,13 @@ export default {
   border-top: 1px solid #eee;
   cursor: pointer;
 }
-.message-item:first-child {
+.v-message-item:first-child {
   border-top: 0;
 }
-.message-item.is-read {
+.v-message-item.is-read {
   color: #999;
 }
-.message-item-time {
+.v-message-item-time {
   font-size: 12px;
   color: #999;
 }

src/components/MessageList.vue

@@ -3,7 +3,7 @@
     <el-radio-group size="small" v-model="tabActive" @change="init">
       <el-radio-button v-for="item in tabList" :label="item.value" :key="item.value">{{ item.title }}</el-radio-button>
     </el-radio-group>
-    <div class="message-list" v-if="messages.length">
+    <div class="v-message-list" v-if="messages.length">
       <message-item v-for="item in messages" :data="item" :key="item.id" @read="handleRead" />
     </div>
     <p v-else>暂无消息</p>
@@ -14,7 +14,7 @@
       :current-page.sync="page"
       @current-change="handleCurrentChange"
       :hide-on-single-page="true"
-      class="message-pagination"
+      class="v-message-pagination"
     ></el-pagination>
   </div>
 </template>
@@ -77,11 +77,11 @@ export default {
 }
 </script>
 
-<style scoped>
-.message-list {
+<style>
+.v-message-list {
   padding: 10px 0;
 }
-.message-pagination {
+.v-message-pagination {
   padding: 15px 0;
   text-align: center;
 }

src/components/MessagePopover.vue

 <template>
-  <div class="message-popover">
-    <div class="message-popover-hd">
-      <div class="message-popover-hd__title">消息（{{ unreadCount }}条未读）</div>
-      <div class="message-popover-hd__button" @click="handleReadAll">全部已读</div>
+  <div class="v-message-popover">
+    <div class="v-message-popover-hd">
+      <div class="v-message-popover-hd__title">消息（{{ unreadCount }}条未读）</div>
+      <div class="v-message-popover-hd__button" @click="handleReadAll">全部已读</div>
     </div>
-    <div class="message-list" v-if="messages.length">
+    <div class="v-message-list" v-if="messages.length">
       <message-item v-for="item in messages" :data="item" :key="item.id" @read="handleRead" />
     </div>
     <p v-else>暂无未读消息</p>
@@ -58,22 +58,22 @@ export default {
 }
 </script>
 
-<style scoped>
-.message-popover-hd {
+<style>
+.v-message-popover-hd {
   display: flex;
   align-items: center;
   padding: 10px 0;
 }
-.message-popover-hd__title {
+.v-message-popover-hd__title {
   flex: 1;
   font-size: 16px;
 }
-.message-popover-hd__button {
+.v-message-popover-hd__button {
   font-size: 14px;
   cursor: pointer;
   color: #409eff;
 }
-.message-popover .el-button {
+.v-message-popover .el-button {
   display: block;
   width: 200px;
   margin: 20px auto 10px;

src/utils/axios.js

@@ -10,7 +10,7 @@ const httpRequest = axios.create({
 httpRequest.interceptors.request.use(
   function(config) {
     const option = window.messageOption
-    config.baseURL = option.baseURL || 'https://test-microservices-message-service-api.ezijing.com'
+    config.baseURL = option.baseURL || 'https://microservices-message-service-api.ezijing.com'
 
     // 默认参数
     const defaultParams = {