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_ | - |
| expand-text | Expand operation text | _string_ | - |
| collapse-text | Collapse operation text | _string_ | - |
| dots | Text content of ellipsis | _string_ | `'...'` |
### Events

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

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

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

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