使用element-ui Tooltip组件

package.json

@@ -34,6 +34,7 @@
     },
     "dependencies": {
         "echarts": "^5.1.1",
+        "element-ui": "^2.15.2",
         "tinymce": "^5.8.1",
         "view-design-hi": "^4.5.0-11",
         "vue-clipboard2": "^0.3.1",

resources/assets/js/app.js

@@ -29,6 +29,9 @@ Vue.component('TagInput', TagInput)
 Vue.component('TableAction', TableAction);
 Vue.component('UserAvatar', UserAvatar);
 
+import { Tooltip } from 'element-ui';
+Vue.component('ETooltip', Tooltip);
+
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)

resources/assets/js/components/AutoTip.vue

@@ -1,10 +1,17 @@
 <template>
-    <Tooltip transfer :content="text" :placement="placement" :theme="tooltipTheme" :delay="delay" :disabled="!showTooltip" :max-width="tooltipMaxWidth" class="ivu-table-cell-tooltip">
+    <ETooltip
-        <span ref="content" @mouseenter="handleTooltipIn" class="ivu-table-cell-tooltip-content">
+        :content="text"
+        :placement="placement"
+        :theme="tooltipTheme"
+        :delay="delay"
+        :disabled="!showTooltip"
+        :max-width="tooltipMaxWidth"
+        transfer>
+        <span ref="content" @mouseenter="handleTooltipIn" class="auto-tip-content">
             <template v-if="existSlot"><slot/></template>
             <template v-else>{{text}}</template>
         </span>
-    </Tooltip>
+    </ETooltip>
 </template>
 
 <script>

resources/assets/js/components/ScrollerY.vue

@@ -144,12 +144,10 @@ export default {
             }
         },
 
-        scrollToBottom(animate) {
-            this.scrollTo(this.$refs.scrollerView.scrollHeight, animate);
-        },
-
         autoToBottom() {
-            this.autoBottom && this.$refs.bottom.scrollIntoView(false);
+            if (this.autoBottom && this.$refs.bottom) {
+                this.$refs.bottom.scrollIntoView(false);
+            }
         },
 
         scrollInfo() {

resources/assets/js/components/UserAvatar.vue

@@ -1,13 +1,13 @@
 <template>
-    <Tooltip v-if="user"
+    <ETooltip v-if="user"
              class="common-avatar"
-             :delay="600"
+             :open-delay="600"
-             :disabled="tooltipDisabled"
+             :disabled="tooltipDisabled">
-             :transfer="transfer">
         <div slot="content" class="common-avatar-transfer">
+            <slot/>
             <p>{{$L('昵称')}}: {{user.nickname}}</p>
             <p>{{$L('职位/职称')}}: {{user.profession || '-'}}</p>
-            <div v-if="userId != userid" class="avatar-icons">
+            <div v-if="userId != userid && !hideIconMenu" class="avatar-icons">
                 <Icon type="ios-chatbubbles" @click="openDialog"/>
             </div>
         </div>
@@ -18,7 +18,7 @@
             </div>
             <div v-if="showName" class="avatar-name">{{user.nickname}}</div>
         </div>
-    </Tooltip>
+    </ETooltip>
 </template>
 
 <script>
@@ -40,14 +40,14 @@
                 type: Boolean,
                 default: false
             },
-            transfer: {
-                type: Boolean,
-                default: true
-            },
             tooltipDisabled: {
                 type: Boolean,
                 default: false
             },
+            hideIconMenu: {
+                type: Boolean,
+                default: false
+            },
         },
         data() {
             return {
@@ -105,9 +105,8 @@
             },
 
             openDialog() {
-                this.$store.state.method.setStorage('messengerDialogId', 0)
-                this.$store.commit("openDialogUser", this.userid);
                 this.goForward({path: '/manage/messenger'});
+                this.$store.commit("openDialogUser", this.userid);
             }
         }
     };

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -11,18 +11,20 @@
             <div class="project-icobox">
                 <ul class="project-icons">
                     <li>
-                        <UserAvatar :userid="projectDetail.owner_userid" :size="36"/>
+                        <UserAvatar :userid="projectDetail.owner_userid" :size="36">
+                            <p>{{$L('项目负责人')}}</p>
+                        </UserAvatar>
                     </li>
                     <li class="project-icon" @click="addTaskOpen(0)">
                         <Icon type="md-add" />
                     </li>
-                    <li class="project-icon">
+                    <li :class="['project-icon', searchText!='' ? 'active' : '']">
-                        <Tooltip theme="light" :always="searchText!=''" transfer>
+                        <ETooltip :value="searchText!=''" :manual="searchText!=''" transfer>
                             <Icon type="ios-search" />
                             <div slot="content">
                                 <Input v-model="searchText" :placeholder="$L('名称、描述...')" clearable autofocus/>
                             </div>
-                        </Tooltip>
+                        </ETooltip>
                     </li>
                     <li :class="['project-icon', projectChatShow ? 'active' : '']" @click="toggleBoolean('projectChatShow')">
                         <Icon type="ios-chatbubbles" />
@@ -66,7 +68,7 @@
                         :class="['column-head', column.color ? 'custom-color' : '']"
                         :style="column.color ? {backgroundColor: column.color}:null">
                         <div class="column-head-title">
-                            <span><AutoTip>{{column.name}}</AutoTip></span>
+                            <span><AutoTip>{{column.name}}{{column.name}}{{column.name}}{{column.name}}{{column.name}}{{column.name}}</AutoTip></span>
                             <em>({{column.project_task.length}})</em>
                         </div>
                         <div class="column-head-icon">
@@ -127,14 +129,13 @@
                             </div>
                             <div class="task-progress">
                                 <Progress :percent="item.percent" :stroke-width="6" />
-                                <Tooltip
+                                <ETooltip
                                     v-if="item.end_at"
                                     :class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
-                                    :delay="600"
+                                    :open-delay="600"
-                                    :content="item.end_at"
+                                    :content="item.end_at">
-                                    transfer>
+                                    <div><Icon type="ios-time-outline"/>{{ expiresFormat(item.end_at) }}</div>
-                                    <Icon type="ios-time-outline"/>{{ expiresFormat(item.end_at) }}
+                                </ETooltip>
-                                </Tooltip>
                             </div>
                             <em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
                         </div>
@@ -209,14 +210,13 @@
                             </ul>
                         </Col>
                         <Col span="3">
-                            <Tooltip
+                            <ETooltip
                                 v-if="item.end_at"
                                 :class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
-                                :delay="600"
+                                :open-delay="600"
-                                :content="item.end_at"
+                                :content="item.end_at">
-                                transfer>
+                                <div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
-                                {{item.end_at ? expiresFormat(item.end_at) : ''}}
+                            </ETooltip>
-                            </Tooltip>
                         </Col>
                         <em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
                     </Row>
@@ -267,14 +267,13 @@
                             </ul>
                         </Col>
                         <Col span="3">
-                            <Tooltip
+                            <ETooltip
                                 v-if="item.end_at"
                                 :class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
-                                :delay="600"
+                                :open-delay="600"
-                                :content="item.end_at"
+                                :content="item.end_at">
-                                transfer>
+                                <div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
-                                {{item.end_at ? expiresFormat(item.end_at) : ''}}
+                            </ETooltip>
-                            </Tooltip>
                         </Col>
                         <em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
                     </Row>
@@ -314,14 +313,13 @@
                             </ul>
                         </Col>
                         <Col span="3">
-                            <Tooltip
+                            <ETooltip
                                 v-if="item.end_at"
                                 :class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
-                                :delay="600"
+                                :open-delay="600"
-                                :content="item.end_at"
+                                :content="item.end_at">
-                                transfer>
+                                <div>{{item.end_at ? expiresFormat(item.end_at) : ''}}</div>
-                                {{item.end_at ? expiresFormat(item.end_at) : ''}}
+                            </ETooltip>
-                            </Tooltip>
                         </Col>
                         <em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
                     </Row>

resources/assets/js/pages/manage/components/TaskAdd.vue

@@ -22,13 +22,13 @@
                 <Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
                 <ul class="advanced-priority">
                     <li v-for="(item, key) in taskPriority" :key="key">
-                        <Tooltip :content="item.name + ' (' + item.days + $L('天') + ')'">
+                        <ETooltip :content="item.name + ' (' + item.days + $L('天') + ')'">
                             <i
                                 class="iconfont"
                                 :style="{color:item.color}"
                                 v-html="value.p_name == item.name ? '&#xe61d;' : '&#xe61c;'"
                                 @click="choosePriority(item)"></i>
-                        </Tooltip>
+                        </ETooltip>
                     </li>
                 </ul>
             </div>

resources/assets/js/pages/manage/components/TaskAddSimple.vue

@@ -17,13 +17,13 @@
         <div class="priority">
             <ul>
                 <li v-for="(item, key) in taskPriority" :key="key">
-                    <Tooltip v-if="active" :content="item.name + ' (' + item.days + $L('天') + ')'" transfer>
+                    <ETooltip v-if="active" :content="item.name + ' (' + item.days + $L('天') + ')'">
                         <i
                             class="iconfont"
                             :style="{color:item.color}"
                             v-html="addData.p_name == item.name ? '&#xe61d;' : '&#xe61c;'"
                             @click="choosePriority(item)"></i>
-                    </Tooltip>
+                    </ETooltip>
                 </li>
             </ul>
             <Icon type="md-settings" @click="onPriority"/>

resources/assets/js/pages/manage/messenger.vue

@@ -17,7 +17,7 @@
                             :class="{active: dialog.id == dialogId}"
                             @click="openDialog(dialog)">
                             <Icon v-if="dialog.type=='group'" class="icon-avatar" type="ios-people" />
-                            <div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="46"/></div>
+                            <div v-else-if="dialog.dialog_user" class="user-avatar"><UserAvatar :userid="dialog.dialog_user.userid" :size="46" hide-icon-menu/></div>
                             <Icon v-else class="icon-avatar" type="md-person" />
                             <div class="dialog-box">
                                 <div class="dialog-title">

resources/assets/js/pages/manage/setting/priority.vue

@@ -4,14 +4,14 @@
             <Row class="setting-color">
                 <Col span="12">{{$L('名称')}}</Col>
                 <Col span="4">
-                    <Tooltip :content="$L('数值越大级别越高')" max-width="auto" placement="top" transfer>
+                    <ETooltip :content="$L('数值越大级别越高')" max-width="auto" placement="top" transfer>
-                        <Icon class="information" type="ios-information-circle-outline" /> {{$L('级别')}}
+                        <div><Icon class="information" type="ios-information-circle-outline" /> {{$L('级别')}}</div>
-                    </Tooltip>
+                    </ETooltip>
                 </Col>
                 <Col span="4">
-                    <Tooltip :content="$L('任务完成时间')" max-width="auto" placement="top" transfer>
+                    <ETooltip :content="$L('任务完成时间')" max-width="auto" placement="top" transfer>
-                        <Icon class="information" type="ios-information-circle-outline" /> {{$L('天数')}}
+                        <div><Icon class="information" type="ios-information-circle-outline" /> {{$L('天数')}}</div>
-                    </Tooltip>
+                    </ETooltip>
                 </Col>
                 <Col span="4">{{$L('颜色')}}</Col>
             </Row>

resources/assets/js/store/mutations.js

@@ -281,8 +281,9 @@ export default {
             },
             success: ({ret, data, msg}) => {
                 if (ret === 1) {
-                    this.commit('getDialogUpdate', data);
+                    state.method.setStorage('messengerDialogId', data.id)
                     this.commit('getDialogMsgList', data.id);
+                    this.commit('getDialogUpdate', data);
                 } else {
                     $A.modalError(msg);
                 }

resources/assets/sass/app.scss

@@ -1,10 +1,14 @@
-@import "scrollbar";
-@import "iconfont";
-@import "loading";
 @import "main";
+@import "loading";
+@import "iconfont";
+@import "scrollbar";
+@import "element";
 
+@import "auto-tip";
+@import "common-avatar";
 @import "manage-wrapper";
 @import "dialog-wrapper";
 @import "messenger-wrapper";
 @import "project-list";
 @import "task-add";
+

resources/assets/sass/auto-tip.scss

@@ -0,0 +1,6 @@
+.auto-tip-content {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}

resources/assets/sass/common-avatar.scss

@@ -0,0 +1,62 @@
+.common-avatar {
+    position: relative;
+    &.avatar-wrapper {
+        display: flex;
+        align-items: center;
+        .avatar-box {
+            position: relative;
+            .avatar-text {
+                background-color: #87d068;
+            }
+            &:before {
+                content: "";
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                width: 9px;
+                height: 9px;
+                border-radius: 50%;
+                background-color: #ff0000;
+                border: 1px solid #ffffff;
+                z-index: 1;
+            }
+            &.online {
+                &:before {
+                    background-color: #87d068;
+                }
+            }
+        }
+        .avatar-name {
+            padding-left: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+.common-avatar-transfer {
+    padding: 4px 2px;
+    line-height: 1.5;
+    > p {
+        padding: 1px 2px;
+    }
+    .avatar-icons {
+        margin-top: 12px;
+        border-top: 1px solid rgba(244, 244, 245, 0.5);
+        padding: 8px 0 2px;
+        display: flex;
+        align-items: center;
+        > i {
+            cursor: pointer;
+            font-size: 22px;
+            margin-right: 12px;
+            color: #F4F4F5;
+            &:last-child {
+                margin-right: 0;
+            }
+            &:hover {
+                color: #ffffff;
+            }
+        }
+    }
+}

resources/assets/sass/element.scss

@@ -0,0 +1,5 @@
+$--tooltip-fill: #585E6A;
+$--tooltip-border-color: #585E6A;
+$--tooltip-font-size: 14px;
+
+@import "~element-ui/packages/theme-chalk/src/tooltip";

resources/assets/sass/main.scss

@@ -267,73 +267,6 @@ body {
         background-color: #efefef;
     }
 }
-.auto-height-top {
-    .ivu-table {
-        .ivu-table-body {
-            table {
-                td {
-                    height: auto;
-                    vertical-align: top;
-                    .ivu-table-cell {
-                        display: flex;
-                        align-items: center;
-                        min-height: 48px;
-                        padding: 8px 12px;
-                        .node-line {
-                            max-width: 100%;
-                            .td-ellipsis {
-                                .remark-line {
-                                    margin: 2px 6px 2px 0;
-                                    &:hover {
-                                        border-color: #888;
-                                    }
-                                }
-                                .remark-tag {
-                                    margin: 0;
-                                    transform: scale(0.8);
-                                }
-                                .remark-icon {
-                                    cursor: pointer;
-                                    &:hover {
-                                        color: #2d8cf0;
-                                    }
-                                    .ivu-icon {
-                                        vertical-align: unset;
-                                        transform: scale(1.2);
-                                        &.ivu-icon-md-remove-circle {
-                                            background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIxMDAxMDg0MzAxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE4NjUiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cGF0aCBkPSJNNTEyIDUxMm0tNTEyIDBhNTEyIDUxMiAwIDEgMCAxMDI0IDAgNTEyIDUxMiAwIDEgMC0xMDI0IDBaIiBmaWxsPSIjRkZGRkZGIiBwLWlkPSIxODY2Ij48L3BhdGg+PHBhdGggZD0iTTUxMiAwYTUxMiA1MTIgMCAxIDAgMCAxMDI0QTUxMiA1MTIgMCAwIDAgNTEyIDB6IG0zODQgNTEyYzAgODIuNzM5Mi0yNi40MTkyIDE1OS4zMzQ0LTcxLjA2NTYgMjIyLjEwNTZMMjg5Ljg5NDQgMTk5LjA2NTZBMzgxLjc0NzIgMzgxLjc0NzIgMCAwIDEgNTEyIDEyOCAzODQuNDA5NiAzODQuNDA5NiAwIDAgMSA4OTYgNTEyeiBtLTc2OCAwYzAtODMuMzUzNiAyNi43MjY0LTE2MC40NjA4IDcxLjk4NzItMjIzLjQzNjhsNTM1LjU1MiA1MzUuMzQ3MkEzODEuNzQ3MiAzODEuNzQ3MiAwIDAgMSA1MTIgODk2IDM4NC40MDk2IDM4NC40MDk2IDAgMCAxIDEyOCA1MTJ6IiBmaWxsPSIjZmYwMDAwIiBwLWlkPSIxODY3IiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4Ljc3ODEwNjkuMC5pMCIgY2xhc3M9InNlbGVjdGVkIj48L3BhdGg+PC9zdmc+");
-                                            background-repeat: no-repeat;
-                                            width: 12px;
-                                            height: 12px;
-                                            background-size: 94%;
-                                            background-position: center;
-                                            vertical-align: text-top;
-                                            &:before {
-                                                display: none;
-                                            }
-                                        }
-                                    }
-                                }
-                                .node-signal-box {
-                                    margin-left: 1px;
-                                    .node-ping-value {
-                                        margin-left: 2px;
-                                    }
-                                }
-                                .ivu-table-cell-tooltip {
-                                    width: auto;
-                                    .ivu-tooltip-rel {
-                                        max-width: 100%;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 
 .common-user {
     position: relative;
@@ -359,68 +292,6 @@ body {
     }
 }
 
-.common-avatar {
-    position: relative;
-    .avatar-wrapper {
-        display: flex;
-        align-items: center;
-        .avatar-box {
-            position: relative;
-            .avatar-text {
-                background-color: #87d068;
-            }
-            &:before {
-                content: "";
-                position: absolute;
-                right: 0;
-                bottom: 0;
-                width: 9px;
-                height: 9px;
-                border-radius: 50%;
-                background-color: #ff0000;
-                border: 1px solid #ffffff;
-                z-index: 1;
-            }
-            &.online {
-                &:before {
-                    background-color: #87d068;
-                }
-            }
-        }
-        .avatar-name {
-            padding-left: 8px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-}
-.common-avatar-transfer {
-    padding: 4px 2px;
-    > p {
-        padding: 1px 2px;
-    }
-    .avatar-icons {
-        margin-top: 12px;
-        border-top: 1px solid #F4F4F5;
-        padding: 8px 0 2px;
-        display: flex;
-        align-items: center;
-        > i {
-            cursor: pointer;
-            font-size: 22px;
-            margin-right: 12px;
-            color: #F4F4F5;
-            &:last-child {
-                margin-right: 0;
-            }
-            &:hover {
-                color: #ffffff;
-            }
-        }
-    }
-}
-
 .common-user-transfer {
     .user-input-option {
         display: flex;

resources/assets/sass/task-add.scss

@@ -43,17 +43,9 @@
                 > li {
                     list-style: none;
                     margin-left: 3px;
-                    .ivu-tooltip {
+                    .iconfont {
-                        display: flex;
+                        font-size: 34px;
-                        align-items: center;
+                        cursor: pointer;
-                        .ivu-tooltip-rel {
-                            height: 34px;
-                            line-height: 1;
-                            .iconfont {
-                                font-size: 34px;
-                                cursor: pointer;
-                            }
-                        }
                     }
                 }
             }
@@ -134,17 +126,9 @@
             > li {
                 list-style: none;
                 margin-right: 3px;
-                .ivu-tooltip {
+                .iconfont {
-                    display: flex;
+                    font-size: 22px;
-                    align-items: center;
+                    cursor: pointer;
-                    .ivu-tooltip-rel {
-                        height: 22px;
-                        line-height: 1;
-                        .iconfont {
-                            font-size: 22px;
-                            cursor: pointer;
-                        }
-                    }
                 }
             }
         }