{"id":16908045,"url":"https://github.com/dream2023/vue-auto-text","last_synced_at":"2025-04-11T15:41:46.285Z","repository":{"id":57394556,"uuid":"184750399","full_name":"dream2023/vue-auto-text","owner":"dream2023","description":"vue-auto-text | 文字大小自适应组件","archived":false,"fork":false,"pushed_at":"2019-05-03T12:48:00.000Z","size":413,"stargazers_count":11,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T15:56:47.344Z","etag":null,"topics":["calculate-size","fit-text","font","font-size","size","text-metrics","vue","vue-auto-text"],"latest_commit_sha":null,"homepage":"https://dream2023.github.io/vue-auto-text","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-03T12:19:09.000Z","updated_at":"2024-12-18T08:49:46.000Z","dependencies_parsed_at":"2022-09-10T23:11:21.497Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-auto-text","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-auto-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-auto-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-auto-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-auto-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-auto-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248433072,"owners_count":21102498,"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":["calculate-size","fit-text","font","font-size","size","text-metrics","vue","vue-auto-text"],"created_at":"2024-10-13T18:49:56.328Z","updated_at":"2025-04-11T15:41:46.240Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-auto-text | 文字大小自适应组件\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)\n[![npm](https://img.shields.io/npm/v/vue-auto-text.svg)](https://www.npmjs.com/package/vue-auto-text)\n[![size](https://img.shields.io/bundlephobia/minzip/vue-auto-text.svg)](https://www.npmjs.com/package/vue-auto-text)\n[![download](https://img.shields.io/npm/dw/vue-auto-text.svg)](https://npmcharts.com/compare/vue-auto-text?minimal=true)\n\n## 介绍\n\n当给定宽度时, 文字的大小自适应, 以保证不溢出和换行\n\n![演示图](./public/example.gif)\n\n## 文档\n\n[https://dream2023.github.io/vue-auto-text](https://dream2023.github.io/vue-auto-text/)\n\n## 安装\n\n```bash\nnpm install vue-auto-text --save\n```\n\n## 使用\n\n```js\n// 局部引入\nimport AutoText from 'vue-auto-text'\nexport default {\n  components: {\n    AutoText\n  }\n}\n```\n\n```js\n// 全局引入\nimport AutoText from 'vue-auto-text'\nVue.component(AutoText.name, AutoText)\n```\n\n## Props 参数\n\n```js\nprops: {\n  // 文本限定宽度, 单位px, 可选, 如果不传, 则默认是父元素宽度\n  width: Number,\n  // 给定文本, 可选, 如果不传, 则获取插槽内文本, 但无法检测变化\n  text: String,\n  // 默认 font-size 大小, 数字, 必填\n  size: {\n    type: Number,\n    required: true\n  },\n  // 最小 font-size 大小, 默认是 16 px\n  minSize: {\n    type: Number,\n    default: 16\n  },\n  // 当文本超出时处理方式, elip 超出省略号, clip 超出截断, break 超出换行\n  overflow: {\n    type: String,\n    default: 'ellipsis',\n    validator (value) {\n      return value === 'ellipsis' || value === 'clip' || value === 'break'\n    }\n  }\n}\n```\n\n## 例子\n\n```html\n\u003c!-- 可以检查到字数变化, 进而动态更改字体大小 --\u003e\n\u003cauto-text :minSize=\"24\" :size=\"48\" :text=\"text\" :width=\"200\" /\u003e\n```\n\n```html\n\u003c!-- 仅能根据首次获取字数多少, 进行判断字数大小, 无法检测到字数变化 --\u003e\n\u003cauto-text :minSize=\"24\" :size=\"48\" :width=\"200\"\u003e{{text}}\u003c/auto-text\u003e\n```\n\n```html\n\u003c!-- 超出换行 --\u003e\n\u003cauto-text\n  :minSize=\"24\"\n  overflow=\"break\"\n  :size=\"48\"\n  :text=\"text\"\n  :width=\"200\"\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-auto-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-auto-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-auto-text/lists"}