w-component-vue 2.3.92 → 2.3.94

package/docs/module-WThreejsVueDyn.html

@@ -215,7 +215,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -503,7 +503,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -287,7 +287,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCoreRe.html

@@ -275,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -527,7 +527,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -311,7 +311,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -587,7 +587,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -371,7 +371,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -611,7 +611,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -395,7 +395,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -251,7 +251,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTooltip.html

@@ -443,7 +443,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -1487,7 +1487,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -299,7 +299,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -275,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WVditorDyn.html

@@ -98,10 +98,10 @@
         <td>輸入vditor設定物件，預設值為{}，內部預設值詳見vditor原始碼</td>
     </tr><tr>
         <td><code>keyHint</code></td>
-        <td>String</td>
+        <td>String|Array</td>
         <td><code>''</code></td>
         <td>No</td>
-        <td>輸入打字時調用提示區字串，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，預設為''</td>
+        <td>輸入打字時調用提示區字串或陣列，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，或給予['ht','kw']陣列，預設為''</td>
     </tr><tr>
         <td><code>hintBorderRadius</code></td>
         <td>Number</td>
@@ -230,10 +230,10 @@
         <td>輸入vditor設定物件，預設值為{}，內部預設值詳見vditor原始碼</td>
     </tr><tr>
         <td><code>keyHint</code></td>
-        <td>String</td>
+        <td>String|Array</td>
         <td><code>''</code></td>
         <td>No</td>
-        <td>輸入打字時調用提示區字串，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，預設為''</td>
+        <td>輸入打字時調用提示區字串或陣列，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，或給予['ht','kw']陣列，預設為''</td>
     </tr><tr>
         <td><code>hintBorderRadius</code></td>
         <td>Number</td>
@@ -323,7 +323,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Aug 11 2024 16:13:03 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Aug 12 2024 15:05:02 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.3.92",
+  "version": "2.3.94",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.4.47",

package/src/AppZoneWVditorDyn.vue

@@ -24,7 +24,7 @@
 
                 <w-vditor-dyn
                     style="width:620px;"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 ></w-vditor-dyn>
 
             </div>
@@ -39,7 +39,7 @@
                 <w-vditor-dyn
                     style="width:620px;"
                     :height="400"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 ></w-vditor-dyn>
 
             </div>
@@ -53,7 +53,7 @@
 
                 <w-vditor-dyn
                     style="width:620px; font-size:0.85rem;"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 ></w-vditor-dyn>
 
             </div>
@@ -67,7 +67,7 @@
 
                 <w-vditor-dyn
                     style="font-size:0.85rem;"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 ></w-vditor-dyn>
 
             </div>
@@ -76,7 +76,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-vditor-dyn'"
-                    :casename="'slot & keyHint'"
+                    :casename="'slot & keyHint(string)'"
                 ></demolink>
 
                 <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
@@ -84,15 +84,15 @@
                 <w-vditor-dyn
                     style="width:620px;"
                     :keyHint="'ht'"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 >
 
                     <template v-slot:content="props">
                         <div style="padding:4px 0px;">
                             <div
-                                class="item item-white"
+                                class="cpitem cpitem-white"
                                 :key="kitem"
-                                v-for="(item,kitem) in WVditorDyn.items"
+                                v-for="(item,kitem) in WVditorDyn.items1"
                                 @click="props.funInsert(item); props.funHide();"
                             >
                                 Item {{item}}
@@ -108,7 +108,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-vditor-dyn'"
-                    :casename="'slot & keyHint & hintBorderRadius'"
+                    :casename="'slot & keyHint(string) & hintBorderRadius'"
                 ></demolink>
 
                 <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
@@ -117,15 +117,15 @@
                     style="width:620px;"
                     :keyHint="'ht'"
                     :hintBorderRadius="0"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 >
 
                     <template v-slot:content="props">
                         <div style="padding:4px 0px;">
                             <div
-                                class="item item-white"
+                                class="cpitem cpitem-white"
                                 :key="kitem"
-                                v-for="(item,kitem) in WVditorDyn.items"
+                                v-for="(item,kitem) in WVditorDyn.items1"
                                 @click="props.funInsert(item); props.funHide();"
                             >
                                 Item {{item}}
@@ -141,7 +141,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-vditor-dyn'"
-                    :casename="'slot & keyHint & hintBackgroundColor'"
+                    :casename="'slot & keyHint(string) & hintBackgroundColor'"
                 ></demolink>
 
                 <div style="color:#f26; font-size:0.8rem;">* type [/ ht] to show popup</div>
@@ -150,16 +150,16 @@
                     style="width:620px;"
                     :keyHint="'ht'"
                     :hintBackgroundColor="'#333'"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 >
 
                     <template v-slot:content="props">
                         <div style="padding:4px 0px;">
                             <div
-                                class="item item-black"
+                                class="cpitem cpitem-black"
                                 style="color:#fff;"
                                 :key="kitem"
-                                v-for="(item,kitem) in WVditorDyn.items"
+                                v-for="(item,kitem) in WVditorDyn.items1"
                                 @click="props.funInsert(item); props.funHide();"
                             >
                                 Item {{item}}
@@ -172,6 +172,50 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-vditor-dyn'"
+                    :casename="'slot & keyHint(array)'"
+                ></demolink>
+
+                <div style="color:#f26; font-size:0.8rem;">* type [/ ht] or [/ kw] to show popup</div>
+
+                <w-vditor-dyn
+                    style="width:620px;"
+                    :keyHint="['ht','kw']"
+                    v-model="WVditorDyn.content1"
+                >
+
+                    <template v-slot:content="props">
+                        <div style="padding:4px 0px;">
+                            <template v-if="props.hint==='ht'">
+                                <div
+                                    class="cpitem cpitem-white"
+                                    :key="kitem"
+                                    v-for="(item,kitem) in WVditorDyn.items1"
+                                    @click="props.funInsert(item); props.funHide();"
+                                >
+                                    Item {{item}}
+                                </div>
+                            </template>
+                            <template v-if="props.hint==='kw'">
+                                <div
+                                    class="cpitem cpitem-white"
+                                    :key="kitem"
+                                    v-for="(item,kitem) in WVditorDyn.items2"
+                                    @click="props.funInsert(item); props.funHide();"
+                                >
+                                    Item {{item}}
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+
+                </w-vditor-dyn>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-vditor-dyn'"
@@ -181,7 +225,7 @@
                 <w-vditor-dyn
                     style="width:620px;"
                     :editable="false"
-                    v-model="WVditorDyn.content"
+                    v-model="WVditorDyn.content1"
                 ></w-vditor-dyn>
 
             </div>
@@ -208,8 +252,10 @@ export default {
     data: function() {
         return {
             'WVditorDyn': {
-                'content': 'abc中文123',
-                'items': ['foo', 'bar', 'fizz', 'buzz'],
+                'content1': 'abc中文123',
+                'content2': '[google](//www.google.com/)',
+                'items1': ['foo', 'bar', 'fizz', 'buzz'],
+                'items2': ['class', 'attr', 'prop', 'type'],
             },
             'actions': [
             ],
@@ -219,21 +265,21 @@ export default {
 </script>
 
 <style scoped>
-.item {
+.cpitem {
     transition: all 0.3s;
     padding: 5px 15px;
     cursor: pointer;
 }
-.item-white {
+.cpitem-white {
     background: #fff;
 }
-.item-white:hover {
+.cpitem-white:hover {
     background: #eee;
 }
-.item-black {
+.cpitem-black {
     background: #333;
 }
-.item-black:hover {
+.cpitem-black:hover {
     background: #555;
 }
 </style>

package/src/components/WVditorDyn.vue

@@ -28,6 +28,7 @@
                 >
                     <slot
                         name="content"
+                        :hint="useHint"
                         :funInsert="(v)=>{insertValue(v,'slot')}"
                         :funHide="()=>{updateValue(false,'slot')}"
                     ></slot>
@@ -41,6 +42,7 @@
 
 <script>
 import get from 'lodash-es/get.js'
+import each from 'lodash-es/each.js'
 import last from 'lodash-es/last.js'
 import pull from 'lodash-es/pull.js'
 import isNumber from 'lodash-es/isNumber.js'
@@ -51,6 +53,7 @@ import waitFun from 'wsemi/src/waitFun.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
+import isearr from 'wsemi/src/isearr.mjs'
 import isEle from 'wsemi/src/isEle.mjs'
 import importResources from 'wsemi/src/importResources.mjs'
 import convertColor from '../js/convertColor.mjs'
@@ -198,7 +201,7 @@ let def_settings = {
  * @vue-prop {String} [value=''] 輸入富文本字串，預設為''
  * @vue-prop {Number} [height=250] 輸入高度數字，單位為px，預設為250
  * @vue-prop {Object} [settings={}] 輸入vditor設定物件，預設值為{}，內部預設值詳見vditor原始碼
- * @vue-prop {String} [keyHint=''] 輸入打字時調用提示區字串，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，預設為''
+ * @vue-prop {String|Array} [keyHint=''] 輸入打字時調用提示區字串或陣列，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，或給予['ht','kw']陣列，預設為''
  * @vue-prop {Number} [hintBorderRadius=4] 輸入提示窗框圓角度數字，單位為px，預設4
  * @vue-prop {String} [hintBackgroundColor='rgba(60,60,60,0.75)'] 輸入提示窗背景顏色字串，預設'rgba(60,60,60,0.75)'
  * @vue-prop {Boolean} [hintShadow=true] 輸入提示窗是否顯示陰影布林值，預設true
@@ -234,7 +237,7 @@ export default {
             default: () => {},
         },
         keyHint: {
-            type: String,
+            type: [String, Array],
             default: '',
         },
         hintBorderRadius: {
@@ -292,6 +295,8 @@ export default {
 
             valueTrans: '',
 
+            useHint: '',
+
         }
     },
     mounted: function() {
@@ -371,6 +376,14 @@ export default {
                 removeTriggerMode,
             })
 
+        //監聽evNameValue
+        vo.bp.on(evNameValue, (showPopper) => {
+            // console.log(vo.mmkey, 'bp.on', evNameValue, showPopper)
+            if (!showPopper) { //僅處理隱藏事件
+                vo.useHint = '' //隱藏時清空useHint
+            }
+        })
+
         //mounted
         vo.bp.mounted()
 
@@ -394,6 +407,19 @@ export default {
     },
     computed: {
 
+        keyHints: function() {
+            let vo = this
+
+            //hts
+            let hts = vo.keyHint
+            if (isestr(vo.keyHint)) {
+                hts = [vo.keyHint]
+            }
+            // console.log('hts', hts)
+
+            return hts
+        },
+
         useSettings: function() {
             //console.log('computed useSettings')
 
@@ -408,23 +434,29 @@ export default {
             //add height
             st.height = vo.height
 
-            //add hint
-            if (isestr(vo.keyHint)) {
+            //extend
+            let extend = []
+            each(vo.keyHints, (v) => {
+                if (!isestr(v)) {
+                    return true //跳出換下一個
+                }
                 let ht = {
-                    key: vo.keyHint,
+                    key: v,
                     hint: async (value) => {
                         // console.log('hint.extend hint', value)
                         let ts = [
                             {
-                                html: `<div name="tar" style="display:none;"></div>`,
+                                html: `<div name="tar" tpht="${v}" style="display:none;"></div>`,
                                 value: '',
                             },
                         ]
                         return ts
                     },
                 }
-                st.hint.extend.push(ht)
-            }
+                extend.push(ht)
+            })
+            st.hint.extend = extend
+            // console.log('st.hint.extend', st.hint.extend)
 
             //add input
             st.input = (value) => {
@@ -591,6 +623,8 @@ export default {
             let vo = this
             let divTrigger = null
             try {
+                // let eles = vo.$el.querySelectorAll('[class="vditor-hint"]')
+                // divTrigger = eles[0]
                 divTrigger = vo.$el.querySelector('[class="vditor-hint"]')
             }
             catch (err) {}
@@ -632,11 +666,24 @@ export default {
             return pm
         },
 
+        getUseHint: function(divTrigger) {
+            // let vo = this
+
+            //tpht
+            let tpht = ''
+            try {
+                tpht = divTrigger.querySelector('div[name="tar"]').getAttribute('tpht')
+            }
+            catch (err) {}
+
+            return tpht
+        },
+
         detectAndShowHint: function(v) {
             let vo = this
 
             //check
-            if (!isestr(vo.keyHint)) {
+            if (!isearr(vo.keyHints)) {
                 return
             }
 
@@ -649,13 +696,21 @@ export default {
                     if (divTrigger.style.display === 'none') {
                         return
                     }
+                    // console.log('divTrigger', divTrigger)
 
                     //完全透明
                     // divTrigger.style.opacity = 0 //因顯示之後再偵測隱藏會有顯隱問題, 使用者體驗不佳, 改為使用css強制隱藏
 
+                    //顯示時取得與儲存useHint
+                    vo.useHint = vo.getUseHint(divTrigger)
+                    // console.log('divTrigger', divTrigger, 'useHint', vo.useHint)
+
                     //evShow
                     vo.evShow('click', 'call')
 
+                    //blur, 編輯器移除焦點, 避免使用者此時通過鍵盤刪除或再變更
+                    vo.contentEditor.blur()
+
                 })
                 .catch((err) => {
                     console.log(err)
@@ -707,7 +762,11 @@ export default {
                 let value = vo.contentEditor.getValue()
 
                 //取代hint符號
-                value = value.replaceAll(`/ ${vo.keyHint}`, '')
+                // console.log('value(ori)', value)
+                each(vo.keyHints, (keyHint) => {
+                    value = value.replaceAll(`/ ${keyHint}`, '')
+                })
+                // console.log('value(replace)', value)
 
                 //update valueTrans, 由組件內insertValue觸發, 故直接更新valueTrans, 避免emit出去再進來更新
                 vo.valueTrans = vo.value
@@ -733,7 +792,6 @@ export default {
 .WVditorFix >>> .vditor-reset {
     font-size: inherit;
 }
-
 .WVditorFix >>> div.vditor-hint:has(div[name="tar"]) { /* 使觸發區divTrigger(原本彈窗)完全透明 */
     visibility: hidden;
     pointer-events: none;