{"id":16441655,"url":"https://github.com/kavalcante/vue-truncate-collapsed","last_synced_at":"2025-04-04T10:07:28.997Z","repository":{"id":19052954,"uuid":"85987401","full_name":"kavalcante/vue-truncate-collapsed","owner":"kavalcante","description":"A simple component that truncates your text and adds a 'Read More/Show Less' clickable.","archived":false,"fork":false,"pushed_at":"2022-12-09T02:46:09.000Z","size":1682,"stargazers_count":108,"open_issues_count":37,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T06:05:08.782Z","etag":null,"topics":["component","javascript","vue","vue-component","vue2"],"latest_commit_sha":null,"homepage":"https://kavalcante.github.io/vue-truncate-collapsed/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kavalcante.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-23T19:04:39.000Z","updated_at":"2023-11-30T13:07:22.000Z","dependencies_parsed_at":"2023-01-14T07:00:31.054Z","dependency_job_id":null,"html_url":"https://github.com/kavalcante/vue-truncate-collapsed","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavalcante%2Fvue-truncate-collapsed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavalcante%2Fvue-truncate-collapsed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavalcante%2Fvue-truncate-collapsed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavalcante%2Fvue-truncate-collapsed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kavalcante","download_url":"https://codeload.github.com/kavalcante/vue-truncate-collapsed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157242,"owners_count":20893216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","javascript","vue","vue-component","vue2"],"created_at":"2024-10-11T09:14:59.974Z","updated_at":"2025-04-04T10:07:28.976Z","avatar_url":"https://github.com/kavalcante.png","language":"Vue","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","Vue","UI Components","UI Components [🔝](#readme)"],"sub_categories":["杂","UI Components","Miscellaneous"],"readme":"# vue-truncate-collapsed\n\nA simple Vue 2 Component that's truncate your text and adds a \"Read Me/Show Less\" clickable.\n\n## Getting Started\n\n#### NPM\n\n```bash\n$ npm install vue-truncate-collapsed --save\n```\n\n#### Clone this repo\n\nClone or [download](https://github.com/kavalcante/vue-truncate-collapsed/archive/master.zip) the component and save in your own project.\n\n## Installing\n\n#### ES6\n```js\nimport truncate from 'vue-truncate-collapsed';\n\nnew Vue({\n  components: {\n    truncate\n  }\n})\n```\n\n#### CommonJS\n\n```js\nvar truncate = require('vue-truncate-collapsed');\n\nnew Vue({\n  components: {\n    'truncate': truncate\n  }\n})\n```\n\n#### CDN\n\n```js\n\u003c!-- import JavaScript --\u003e\n\u003cscript src=\"https://unpkg.com/vue-truncate-collapsed\"\u003e\u003c/script\u003e\n```\n\n## USAGE\n\n#### Text\n\n```html\n\u003ctruncate clamp=\"...\" :length=\"90\" less=\"Show Less\" text=\"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.\"\u003e\u003c/truncate\u003e\n```\n\n#### Raw HTML\n\n```html\n\u003ctruncate clamp=\"...\" :length=\"90\" less=\"Show Less\" type=\"html\" text=\"\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e \u003cp\u003e Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.\u003c/p\u003e\"\u003e\u003c/truncate\u003e\n```\n\n#### Add class to Show More/ Show Less link\n\n```html\n\u003ctruncate action-class=\"customClass\" clamp=\"Show more\" :length=\"90\" less=\"Show Less\" type=\"html\" text=\"\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e \u003cp\u003e Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.\u003c/p\u003e\"\u003e\u003c/truncate\u003e\n```\n\n#### Add class to collapsed text\n\n```html\n\u003ctruncate collapsed-text-class=\"collapsed\" clamp=\"Show more\" :length=\"90\" less=\"Show Less\" type=\"html\" text=\"\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e \u003cp\u003e Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.\u003c/p\u003e\"\u003e\u003c/truncate\u003e\n```\n\n## Attributes\n\n\n| Option        | Default       | Type   | Description  |\n| :------------ | :------------ | :----- | :--------- |\n| __truncated__ | false | boolean | The initial state of the truncation. `true` is collapsed, `false` is expanded. |\n| __text__     | no default value | string | The text that will be truncated. |\n| __length__   | 100 | number | Length of text after truncate. |\n| __clamp__    | Read More | string | Link that will be after the text with a link to expand. |\n| __less__   | Show Less | string | Link that will be after the text when it's expand, when click text collapses. |\n| __type__   | text | string | Either `text` or `html`. To change whether to treat the input from `text` attribute as text or raw HTML. |\n| __class__   | empty string | string | To add a class name to the link that will be after the text is expanded or collapsed. |\n| __collapsedTextClass__   | '' | string | Allows you to add a class to the text when it is collapsed. |\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkavalcante%2Fvue-truncate-collapsed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkavalcante%2Fvue-truncate-collapsed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkavalcante%2Fvue-truncate-collapsed/lists"}