Просмотр исходного кода

Added:增加超出隐藏组件

洪海涛 4 лет назад
Родитель
Сommit
543f68edd4
3 измененных файлов с 36 добавлено и 2 удалено
  1. 1 1
      package.json
  2. 33 0
      src/components/isEllipsis/index.js
  3. 2 1
      src/index.js

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@didi/platformui",
-  "version": "0.1.83",
+  "version": "0.1.84",
   "description": "A platformui",
   "main": "dist/bundle.js",
   "author": "wenbobowen",

+ 33 - 0
src/components/isEllipsis/index.js

@@ -0,0 +1,33 @@
+/*
+ * @Author: honghaitao_v
+ * @Date:   2021-08-25 15:21:43
+ * @Last Modified by:   洪海涛
+ * @Last Modified time: 2021-08-25 15:49:02
+ */
+import React, { useState, useLayoutEffect } from "react"
+import { Tooltip } from "antd"
+/**
+ * name
+ * width
+ **/
+export default function IsEllipsis(props) {
+  const { name = "", width = 50, placement = "topLeft" } = props
+  const nameEl = useRef(null)
+  const [showTooltip, setShowTooltip] = useState(false)
+  useLayoutEffect(() => {
+    setShowTooltip(nameEl.current.scrollWidth > width)
+  }, [name])
+
+  return (
+    <div className="ellipsis" ref={nameEl} style={{ width: `${width}px` }}>
+      {showTooltip ? (
+        <Tooltip placement={placement} title={name}>
+          {name}
+        </Tooltip>
+      ) : (
+        name
+      )}
+    </div>
+  )
+}
+

+ 2 - 1
src/index.js

@@ -20,4 +20,5 @@ export { default as SearchTree } from './components/searchTree';
 export { default as SelectDetialTable } from './components/selectDetialTable';
 export { default as TagModular } from './components/tagModular';
 export { default as MainTitle } from './components/pageHeader/components/mainTitle'
-export { default as CodeMirrorInput } from './components/codemirror'
+export { default as CodeMirrorInput } from './components/codemirror'
+export { default as IsEllipsis} from './components/isEllipsis'