提示

src/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/yz-header/YzQueryCondition.vue

@@ -2,11 +2,11 @@
   <div>
 
     <div style="display: flex;align-items: center">
-      <el-button @click="queryYz" title="重新查询患者的医嘱">重置</el-button>
+      <el-button @click="queryYz" v-title="'重新查询患者的医嘱'">重置</el-button>
       <el-divider direction="vertical"/>
       <label>
         显示范围：
-        <select v-model="queryParam.displayRange" title="显示范围">
+        <select v-model="queryParam.displayRange" v-title="'显示范围'">
           <option :value="0" title="全部的医嘱">全部</option>
           <option :value="1" title="已经停止的医嘱">停止</option>
           <option :value="2" title="正在执行的长期医嘱">当前</option>
@@ -26,7 +26,7 @@
       </label>
       <label>
         药房：
-        <select v-model="queryParam.groupNo" title="在新增医嘱的时候，去指定的药房查询药品。">
+        <select v-model="queryParam.groupNo" v-title="'在新增医嘱的时候，去指定的药房查询药品。'">
           <option value="73">住院</option>
           <option value="71">门诊</option>
         </select>
@@ -37,13 +37,14 @@
       <el-button-group>
         <el-button type="primary"
                    @click="addYiZhuClick"
-                   title="ALT+A">
+                   v-title="'添加医嘱，快捷键 ALT+A'">
           添加
         </el-button>
 
         <el-button type="success"
                    :loading="confirmLoading"
                    @click="currentConfirmOrdersClick"
+                   v-title="'把录入状态的医嘱，变为确认状态。'"
                    v-if="!isCydy()">
           确认
         </el-button>
@@ -51,7 +52,7 @@
         <el-button type="success"
                    @click="confirmTheDoctorSOrderWithMedicineClick"
                    v-else
-                   title="把录入状态的医嘱，变为确认状态。">
+                   v-title="'把录入状态的医嘱，变为确认状态。'">
           确认带药
         </el-button>
 
@@ -61,14 +62,16 @@
       <el-dropdown split-button
                    type="danger"
                    @click="deleteAnOrderByOrderNo"
-                   title="在表格中选中了一条医嘱后这个方法才能有效果。（这个医嘱需要在工作台显示）">
+                   v-title="'在表格中选中了一条医嘱后这个方法才能有效果。（这个医嘱需要在工作台显示）'">
         删除
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="batchDeleteOrdersClick"
-                              title="在表格中，点击前面的选择框，选中医嘱（多条或单挑），才能点击此按钮，限制：只能删除自己开的，只能删除(录入、确认)状态的医嘱。">
-              批量删除
-            </el-dropdown-item>
+            <div
+                v-title="'在表格中，点击前面的选择框，选中医嘱（多条或单挑），才能点击此按钮，限制：只能删除自己开的，只能删除(录入、确认)状态的医嘱。'">
+              <el-dropdown-item @click="batchDeleteOrdersClick">
+                批量删除
+              </el-dropdown-item>
+            </div>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -77,20 +80,20 @@
 
       <el-dropdown split-button
                    @click="yzMitt.emit('clickOnTheOrderTemplate')"
-                   title="获取医嘱的模板">
+                   v-title="'获取医嘱的模板'">
         模板
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="orderTemplateClick"
-                              title="维护自己创建的模板">
-              维护模板
-            </el-dropdown-item>
-
-            <el-dropdown-item @click="orderTemplateClickCopy"
-                              title="维护自己创建的模板">
-              选中医嘱做模板
-            </el-dropdown-item>
-
+            <div v-title="'维护自己创建的模板'">
+              <el-dropdown-item @click="orderTemplateClick">
+                维护模板
+              </el-dropdown-item>
+            </div>
+            <div v-title="'选中表格中的医嘱作为模板'">
+              <el-dropdown-item @click="orderTemplateClickCopy">
+                选中医嘱做模板
+              </el-dropdown-item>
+            </div>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -99,13 +102,17 @@
     <div>
       <el-dropdown split-button
                    @click="clickToStopTheOrder"
-                   title="选择了停止时间后记得选中医嘱在点击">
+                   v-title="'批量停止医嘱，需要结束时间一栏的日期数据框变成红色则代表，是要停止这条医嘱。<br />' +
+                    '双击日期输入框，默认填充停止到当前时间，并选中医嘱，可点击输入框中的日历，去选择其他时间。<br />' +
+                     '鼠标右键数据框，可以取消停止。'">
         批量停止
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item title="修改医嘱时间" @click="clickToModifyTheDoctorSOrderTime">
-              修改医嘱时间
-            </el-dropdown-item>
+            <div v-title="'跳转到这个患者，修改医嘱时间的申请页面。'">
+              <el-dropdown-item @click="clickToModifyTheDoctorSOrderTime">
+                修改医嘱时间
+              </el-dropdown-item>
+            </div>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -196,7 +203,9 @@
         </template>
       </el-dropdown>
 
-      <el-button type="success" icon="RefreshRight" @click="rcvrcalcost"> 费用接收重算</el-button>
+      <el-button type="success" icon="RefreshRight" @click="rcvrcalcost"
+                 v-title="'如果患者费用存在问题或者有些费用看不到，<br />可以执行此操作。'"> 费用接收重算
+      </el-button>
 
     </div>
   </div>

src/directives/v-title.ts

@@ -0,0 +1,47 @@
+import {useZIndex} from 'element-plus'
+
+const setDivLeftAndTop = (div: HTMLDivElement, evt: MouseEvent) => {
+    // 获取window窗口的大小
+    let windowWidth = window.innerWidth;
+    let windowHeight = window.innerHeight;
+    div.style.left = evt.clientX + 15 + 'px';
+    div.style.top = evt.clientY + 10 + 'px';
+
+    if (evt.clientX + div.offsetWidth > windowWidth) {
+        div.style.left = evt.clientX - div.offsetWidth - 10 + 'px';
+    }
+
+    if (evt.clientY + div.offsetHeight + 10 > windowHeight) {
+        div.style.top = evt.clientY - div.offsetHeight + 'px';
+    }
+}
+
+let div = document.createElement('div');
+document.body.appendChild(div);
+
+const VTitle = {
+    created(el: HTMLHtmlElement, binding, _vnode, _prevVnode) {
+        div.style.position = 'fixed';
+        div.style.width = 'max-content';
+        div.style.padding = '5px';
+        div.style.backgroundColor = '#474747';
+        div.style.color = 'white';
+        div.style.borderRadius = '5px';
+        el.addEventListener('mousemove', (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            div.style.display = 'block';
+            div.innerHTML = binding.value;
+            div.style.zIndex = String(useZIndex().nextZIndex());
+
+            setDivLeftAndTop(div, evt);
+        })
+
+        el.addEventListener('mouseleave', (evt) => {
+            div.style.display = 'none';
+        })
+    }
+}
+
+
+export default VTitle;

src/main.js

@@ -16,6 +16,7 @@ import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 import print from 'vue3-print-nb'
 import VElBtn from "@/directives/v-el-btn";
+import VTitle from "@/directives/v-title";
 
 addRoutes()
 
@@ -37,6 +38,7 @@ app.use(store)
 app.use(router)
 app.use(DataVVue3)
 app.directive('el-btn', VElBtn)
+app.directive('title', VTitle)
 app.use(print)
 app.use(VXETable)
 app.use(JsonViewer);

src/views/settings/Test.vue

@@ -1,6 +1,10 @@
 <template>
-  <div style="height: 400px;width: 400px">
+  <div style="height: 400px;width: 400px;border: 1px solid #000"
+       v-title="'测试一下，我的title'">
+    <div style="height: 200px;width: 200px;border: 1px solid #000"
+         v-title="'测试一下，assdsa'">
 
+    </div>
   </div>
 </template>