blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(TextEllipsis): add dots prop (#11745)

Browse Source 
* feat(TextEllipsis): add dots prop

* chore: update snap
This commit is contained in:
neverland 2023-04-09 10:57:34 +08:00 committed by GitHub
parent 949c535889
commit 8bc9b262f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/vant/src/text-ellipsis/README.md
View File

@ -91,6 +91,7 @@ export default {
| content | The text displayed | _string_ | - | | content | The text displayed | _string_ | - |
| expand-text | Expand operation text | _string_ | - | | expand-text | Expand operation text | _string_ | - |
| collapse-text | Collapse operation text | _string_ | - | | collapse-text | Collapse operation text | _string_ | - |
| dots | Text content of ellipsis | _string_ | `'...'` |
### Events ### Events

13
packages/vant/src/text-ellipsis/README.zh-CN.md
View File

@ -80,12 +80,13 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------------- | -------------- | ------------------ | ------ | | ------------- | ---------------- | ------------------ | ------- |
| rows | 展示的行数 | _number \| string_ | `1` | | rows | 展示的行数 | _number \| string_ | `1` |
| content | 需要展示的文本 | _string_ | - | | content | 需要展示的文本 | _string_ | - |
| expand-text | 展开操作的文案 | _string_ | - | | expand-text | 展开操作的文案 | _string_ | - |
| collapse-text | 收起操作的文案 | _string_ | - | | collapse-text | 收起操作的文案 | _string_ | - |
| dots | 省略号的文本内容 | _string_ | `'...'` |
### Events ### Events

9
packages/vant/src/text-ellipsis/TextEllipsis.tsx
View File

@ -16,6 +16,7 @@ const [name, bem] = createNamespace('text-ellipsis');
export const textEllipsisProps = { export const textEllipsisProps = {
rows: makeNumericProp(1), rows: makeNumericProp(1),
dots: makeStringProp('...'),
content: makeStringProp(''), content: makeStringProp(''),
expandText: makeStringProp(''), expandText: makeStringProp(''),
collapseText: makeStringProp(''), collapseText: makeStringProp(''),
@ -69,15 +70,15 @@ export default defineComponent({
container: HTMLDivElement, container: HTMLDivElement,
maxHeight: number maxHeight: number
) => { ) => {
const { content, expandText } = props; const { dots, content, expandText } = props;
const dot = '...';
let left = 0; let left = 0;
let right = content.length; let right = content.length;
let res = -1; let res = -1;
while (left <= right) { while (left <= right) {
const mid = Math.floor((left + right) / 2); const mid = Math.floor((left + right) / 2);
container.innerText = content.slice(0, mid) + dot + expandText; container.innerText = content.slice(0, mid) + dots + expandText;
if (container.offsetHeight <= maxHeight) { if (container.offsetHeight <= maxHeight) {
left = mid + 1; left = mid + 1;
res = mid; res = mid;
@ -85,7 +86,7 @@ export default defineComponent({
right = mid - 1; right = mid - 1;
} }
} }
return content.slice(0, res) + dot; return content.slice(0, res) + dots;
}; };
const container = cloneContainer(); const container = cloneContainer();