From a0c66bcdd4a95862ca1cf158391cf2a07545ff33 Mon Sep 17 00:00:00 2001
From: JYeontu <yongtaozheng0201@163.com>
Date: Wed, 16 Mar 2022 12:02:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?toolTip=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examples/config/router.json               |  12 +
 .../views/componentShowViews/JToolTipView.vue | 225 ++++++++++++++++++
 .../packages/JToolTip/index.js                |   5 +
 .../packages/JToolTip/src/JToolTip.vue        | 119 +++++++++
 JYeontuComponentWarehouse/packages/index.js   |   4 +-
 .../packages/utils/strTool.js                 |  15 ++
 6 files changed, 379 insertions(+), 1 deletion(-)
 create mode 100644 JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
 create mode 100644 JYeontuComponentWarehouse/packages/JToolTip/index.js
 create mode 100644 JYeontuComponentWarehouse/packages/JToolTip/src/JToolTip.vue

diff --git a/JYeontuComponentWarehouse/examples/config/router.json b/JYeontuComponentWarehouse/examples/config/router.json
index a107059..c640270 100644
--- a/JYeontuComponentWarehouse/examples/config/router.json
+++ b/JYeontuComponentWarehouse/examples/config/router.json
@@ -219,6 +219,18 @@
             "component": "views/componentShowViews/JCommentView.vue",
             "children": []
         },
+        {
+            "id": 21,
+            "name": "JToolTipView",
+            "path": "/JToolTipView",
+            "label": "悬浮提示",
+            "selected": false,
+            "icon": "icon-ciyuntu",
+            "open": false,
+            "hide": false,
+            "component": "views/componentShowViews/JToolTipView.vue",
+            "children": []
+        },
         {
             "id": 8,
             "name": "utilsTools",
diff --git a/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue b/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
new file mode 100644
index 0000000..c182717
--- /dev/null
+++ b/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
@@ -0,0 +1,225 @@
+<template>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="j-title">
+                悬浮提示（JToolTip）
+                <div class="j-detail">
+                    动态工具悬浮提示
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <p>
+                    hover
+                    <j-tool-tip
+                        tipText="one"
+                        :textStyle="textStyle"
+                        :toolTipStyle="toolTipStyle"
+                        >here
+                    </j-tool-tip>
+                    to see one.
+                </p>
+                <p>
+                    hover
+                    <j-tool-tip tipText="another">here </j-tool-tip>
+                    to see another.
+                </p>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <div>
+                <j-table
+                    :title="tableTitle"
+                    :tableData="tableData"
+                    style="height: 500px;"
+                >
+                </j-table>
+            </div>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
+</template>
+<script>
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
+export default {
+    name: "JToolTipView",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            code: "",
+            textStyle: {
+                borderBottom: "1px dotted skyblue",
+                fontSize: "large",
+                color: "skyblue"
+            },
+            toolTipStyle: {
+                backgroundColor: "grey",
+                color: "skyblue",
+                width: "100px"
+            },
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "bgColor",
+                    field: "按钮背景颜色",
+                    type: "String",
+                    describe: "默认为deepskyblue"
+                },
+                {
+                    parameter: "autoHide",
+                    field: "贴边隐藏",
+                    type: "Boolean",
+                    describe: "按钮移动到左右两侧会自动缩进两边，默认为true"
+                },
+                {
+                    parameter: "clickDis",
+                    field: "判断是否点击事件距离（px）",
+                    type: "Number",
+                    describe: "移动距离小于该值则为点击事件，默认为10"
+                },
+                {
+                    parameter: "showWidth",
+                    field: "贴边隐藏后露出宽度（px）",
+                    type: "Number",
+                    describe: "数字保留小数点，默认为15"
+                },
+                {
+                    parameter: "width",
+                    field: "按钮宽高（px）",
+                    type: "Number",
+                    describe: "默认为80"
+                },
+                {
+                    parameter: "radius",
+                    field: "是否圆角",
+                    type: "Boolean",
+                    describe: "默认为true"
+                },
+                {
+                    parameter: "btnStyle",
+                    field: "自定义样式",
+                    type: "Object",
+                    describe: "键值对形式，支持驼峰命名和-命名"
+                },
+                {
+                    parameter: "text",
+                    field: "按钮显示文字",
+                    type: "String",
+                    describe: "默认为'悬浮按钮'"
+                },
+                {
+                    parameter: "zIndex",
+                    field: "按钮层级",
+                    type: "Number",
+                    describe: "默认为999"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
+		<j-hover-btn bgColor = 'pink' 
+					width = '80' 
+					text = '按钮文字' 
+					:btn-style = "btnStyle" 
+					@hoverBtnClick = "hoverBtnClick()">
+			
+		</j-hover-btn>
+		export default {
+			data(){
+			  return {
+				  btnStyle:{
+					"fontSize":'small',
+					"top":'60vh',
+					"left":'90vw'
+				  },
+			  }
+			},
+			methods:{
+			  hoverBtnClick(){
+				alert('触发点击事件');
+			  }
+			}
+		}
+	`;
+    },
+    mounted() {},
+    methods: {
+        hoverBtnClick() {
+            alert("触发点击事件");
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
+    // width: 50%;
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
+</style>
diff --git a/JYeontuComponentWarehouse/packages/JToolTip/index.js b/JYeontuComponentWarehouse/packages/JToolTip/index.js
new file mode 100644
index 0000000..43323f7
--- /dev/null
+++ b/JYeontuComponentWarehouse/packages/JToolTip/index.js
@@ -0,0 +1,5 @@
+import JToolTip from "./src/JToolTip.vue";
+
+JToolTip.install = Vue => Vue.component(JToolTip.name, JToolTip); //注册组件
+
+export default JToolTip;
diff --git a/JYeontuComponentWarehouse/packages/JToolTip/src/JToolTip.vue b/JYeontuComponentWarehouse/packages/JToolTip/src/JToolTip.vue
new file mode 100644
index 0000000..422e366
--- /dev/null
+++ b/JYeontuComponentWarehouse/packages/JToolTip/src/JToolTip.vue
@@ -0,0 +1,119 @@
+<template>
+    <span
+        :style="{
+            '--backgroundColor': toolTipStyle.backgroundColor,
+            '--color': toolTipStyle.color,
+            '--width': toolTipStyle.width
+        }"
+    >
+        <span
+            :id="uid"
+            class="j-tooltip"
+            :data-tooltip="tipText"
+            :style="getTextStyle()"
+            ><slot></slot
+        ></span>
+    </span>
+</template>
+
+<script>
+import { _toLittleCamel, getUId } from "../../utils/strTool";
+export default {
+    name: "JToolTip",
+    props: {
+        tipText: {
+            type: String,
+            default: "Tooltip Content"
+        },
+        textStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    "border-bottom": "1px dotted black"
+                };
+            }
+        },
+        toolTipStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    backgroundColor: "#062b45",
+                    color: "#fff",
+                    width: "100px"
+                };
+            }
+        }
+    },
+    computed: {},
+    data() {
+        return {
+            uid: "",
+            tipStyle: {}
+        };
+    },
+    created() {
+        this.setUid();
+    },
+    methods: {
+        setUid() {
+            this.uid = getUId();
+        },
+        getTextStyle() {
+            const textStyle = this.textStyle;
+            let styleStr = "";
+            for (const key in textStyle) {
+                styleStr += _toLittleCamel(key) + ":" + textStyle[key] + ";";
+            }
+            return styleStr;
+        }
+    }
+};
+</script>
+
+<style vars="{ backgroundColor, color, width }" lang="scss" scoped>
+.j-tooltip {
+    position: relative;
+    border-bottom: 1px dotted black;
+}
+
+.j-tooltip:before {
+    content: attr(data-tooltip);
+    position: absolute;
+    width: var(--width);
+    background-color: var(--backgroundColor);
+    color: var(--color);
+    text-align: center;
+    padding: 10px;
+    line-height: 1.2;
+    border-radius: 6px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.6s;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    font-size: 0.75em;
+    visibility: hidden;
+    word-break: break-all;
+}
+
+.j-tooltip:after {
+    content: "";
+    position: absolute;
+    bottom: 75%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    opacity: 0;
+    transition: opacity 0.6s;
+    border-color: var(--backgroundColor) transparent transparent transparent;
+    visibility: hidden;
+}
+
+.j-tooltip:hover:before,
+.j-tooltip:hover:after {
+    opacity: 1;
+    visibility: visible;
+}
+</style>
diff --git a/JYeontuComponentWarehouse/packages/index.js b/JYeontuComponentWarehouse/packages/index.js
index 1cfc419..035d84a 100644
--- a/JYeontuComponentWarehouse/packages/index.js
+++ b/JYeontuComponentWarehouse/packages/index.js
@@ -21,6 +21,7 @@ import JTagList from "./JTagList";
 import JToast from "./JToast";
 import JWordCloud from "./JWordCloud";
 import JComment from "./JComment";
+import JToolTip from "./JToolTip";
 
 // 存储组件列表
 const components = [
@@ -39,7 +40,8 @@ const components = [
     JTagList,
     JToast,
     JWordCloud,
-    JComment
+    JComment,
+    JToolTip
     // Toast
 ];
 
diff --git a/JYeontuComponentWarehouse/packages/utils/strTool.js b/JYeontuComponentWarehouse/packages/utils/strTool.js
index 0cedd52..dd1ce78 100644
--- a/JYeontuComponentWarehouse/packages/utils/strTool.js
+++ b/JYeontuComponentWarehouse/packages/utils/strTool.js
@@ -45,3 +45,18 @@ export const camelTo_ = function(str) {
     }
     return res;
 };
+export const getRandomLetter = (size = 8) => {
+    let res = "";
+    for (let i = 0; i < size; i++) {
+        let ind = Math.floor(Math.random() * 26);
+        res += String.fromCharCode(ind + 65);
+    }
+    return res;
+};
+export const getUId = (letterNums = 8, numberNums = 6) => {
+    const uId =
+        getRandomLetter(letterNums) +
+        "-" +
+        Math.ceil(Math.random() * Math.pow(10, numberNums));
+    return uId;
+};
-- 
Gitee


From 0769e9b8d6c2d5c6f5d24e49695449003e22a9a7 Mon Sep 17 00:00:00 2001
From: JYeontu <yongtaozheng0201@163.com>
Date: Wed, 16 Mar 2022 15:21:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?toolTip=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 JYeontuComponentWarehouse/examples/App.vue    |   2 +-
 JYeontuComponentWarehouse/examples/main.js    |   7 +
 .../views/componentShowViews/JToolTipView.vue | 184 +++++++++---------
 JYeontuComponentWarehouse/public/index.html   |   5 +
 4 files changed, 108 insertions(+), 90 deletions(-)

diff --git a/JYeontuComponentWarehouse/examples/App.vue b/JYeontuComponentWarehouse/examples/App.vue
index ccbb8ab..273ddc1 100644
--- a/JYeontuComponentWarehouse/examples/App.vue
+++ b/JYeontuComponentWarehouse/examples/App.vue
@@ -134,7 +134,7 @@ body {
     font-family: "Avenir", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
+    // text-align: center;
     color: #2c3e50;
     /*margin-top: 60px;*/
     width: 100vw;
diff --git a/JYeontuComponentWarehouse/examples/main.js b/JYeontuComponentWarehouse/examples/main.js
index 212c120..c2b7ae3 100644
--- a/JYeontuComponentWarehouse/examples/main.js
+++ b/JYeontuComponentWarehouse/examples/main.js
@@ -18,6 +18,13 @@ Vue.use(ElementUI);
 Vue.config.devtools = true;
 Vue.config.productionTip = false;
 
+Vue.directive("highlight", function(el) {
+    let blocks = el.querySelectorAll("pre code");
+    blocks.forEach(block => {
+        hljs.highlightBlock(block);
+    });
+});
+
 new Vue({
     router,
     render: h => h(App)
diff --git a/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue b/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
index c182717..ca5a3b0 100644
--- a/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
+++ b/JYeontuComponentWarehouse/examples/views/componentShowViews/JToolTipView.vue
@@ -29,17 +29,16 @@
         </template>
         <template v-slot:right-p>
             <div>
-                <j-table
-                    :title="tableTitle"
-                    :tableData="tableData"
-                    style="height: 500px;"
-                >
-                </j-table>
+                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
             </div>
         </template>
         <template v-slot:footer-p>
-            <j-code-height-light :code="code" class="footer">
-            </j-code-height-light>
+            <!-- <j-code-height-light :code="code" class="footer">
+            </j-code-height-light> -->
+            <pre v-highlight>
+                <code class="vue" v-text="code">
+                </code>
+            </pre>
         </template>
     </split-horizontal>
 </template>
@@ -105,95 +104,102 @@ export default {
                     sort: false // 是否支持排序
                 }
             ],
-            tableData: [
+            tableData: []
+        };
+    },
+    created() {
+        this.initTableData();
+        this.initCodeContent();
+    },
+    mounted() {},
+    methods: {
+        initCodeContent() {
+            this.code = `
+<template>
+    <div class="content">
+        <p>
+            hover
+            <j-tool-tip
+                tipText="one"
+                :textStyle="textStyle"
+                :toolTipStyle="toolTipStyle"
+                >here
+            </j-tool-tip>
+            to see one.
+        </p>
+        <p>
+            hover
+            <j-tool-tip tipText="another">here </j-tool-tip>
+            to see another.
+        </p>
+    </div>
+</template>
+export default {
+    data() {
+        return {
+            textStyle: {
+                borderBottom: "1px dotted skyblue",
+                fontSize: "large",
+                color: "skyblue"
+            },
+            toolTipStyle: {
+                backgroundColor: "grey",
+                color: "skyblue",
+                width: "100px"
+            },
+        }
+    }
+}
+            `;
+        },
+        initTableData() {
+            this.tableData = [
                 {
-                    parameter: "bgColor",
-                    field: "按钮背景颜色",
+                    parameter: "tipText",
+                    field: "提示内容",
                     type: "String",
-                    describe: "默认为deepskyblue"
-                },
-                {
-                    parameter: "autoHide",
-                    field: "贴边隐藏",
-                    type: "Boolean",
-                    describe: "按钮移动到左右两侧会自动缩进两边，默认为true"
-                },
-                {
-                    parameter: "clickDis",
-                    field: "判断是否点击事件距离（px）",
-                    type: "Number",
-                    describe: "移动距离小于该值则为点击事件，默认为10"
-                },
-                {
-                    parameter: "showWidth",
-                    field: "贴边隐藏后露出宽度（px）",
-                    type: "Number",
-                    describe: "数字保留小数点，默认为15"
-                },
-                {
-                    parameter: "width",
-                    field: "按钮宽高（px）",
-                    type: "Number",
-                    describe: "默认为80"
-                },
-                {
-                    parameter: "radius",
-                    field: "是否圆角",
-                    type: "Boolean",
-                    describe: "默认为true"
+                    describe: ""
                 },
                 {
-                    parameter: "btnStyle",
-                    field: "自定义样式",
+                    parameter: "textStyle",
+                    field: "文字样式",
                     type: "Object",
-                    describe: "键值对形式，支持驼峰命名和-命名"
-                },
-                {
-                    parameter: "text",
-                    field: "按钮显示文字",
-                    type: "String",
-                    describe: "默认为'悬浮按钮'"
+                    describe: "设置文字样式，如下划线样式",
+                    children: {
+                        type: "text",
+                        text: '{"border-bottom": "1px dotted black"}'
+                    }
                 },
                 {
-                    parameter: "zIndex",
-                    field: "按钮层级",
-                    type: "Number",
-                    describe: "默认为999"
+                    parameter: "toolTipStyle",
+                    field: "提示框内容样式",
+                    type: "Object",
+                    describe: "具体配置如下",
+                    children: {
+                        title: this.tableTitle,
+                        data: [
+                            {
+                                parameter: "backgroundColor",
+                                field: "提示框背景颜色",
+                                type: "String",
+                                describe: "默认为#062b45"
+                            },
+                            {
+                                parameter: "color",
+                                field: "提示框字体颜色",
+                                type: "String",
+                                describe: "默认为#fff"
+                            },
+                            {
+                                parameter: "width",
+                                field: "提示框宽度",
+                                type: "String",
+                                describe: "默认为100px"
+                            }
+                        ]
+                    }
                 }
-            ]
-        };
-    },
-    created() {
-        this.code = `
-		<j-hover-btn bgColor = 'pink' 
-					width = '80' 
-					text = '按钮文字' 
-					:btn-style = "btnStyle" 
-					@hoverBtnClick = "hoverBtnClick()">
-			
-		</j-hover-btn>
-		export default {
-			data(){
-			  return {
-				  btnStyle:{
-					"fontSize":'small',
-					"top":'60vh',
-					"left":'90vw'
-				  },
-			  }
-			},
-			methods:{
-			  hoverBtnClick(){
-				alert('触发点击事件');
-			  }
-			}
-		}
-	`;
-    },
-    mounted() {},
-    methods: {
-        hoverBtnClick() {
-            alert("触发点击事件");
+            ];
         }
     }
 };
diff --git a/JYeontuComponentWarehouse/public/index.html b/JYeontuComponentWarehouse/public/index.html
index 5dcd8db..f373b6f 100644
--- a/JYeontuComponentWarehouse/public/index.html
+++ b/JYeontuComponentWarehouse/public/index.html
@@ -5,6 +5,11 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <link
+            href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css"
+            rel="stylesheet"
+        />
+        <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
         <title>JYeontu组件库</title>
     </head>
     <body>
-- 
Gitee