https://github.com/dream2023/vue-auto-text

vue-auto-text | 文字大小自适应组件
https://github.com/dream2023/vue-auto-text

calculate-size fit-text font font-size size text-metrics vue vue-auto-text

Last synced: about 1 month ago
JSON representation

vue-auto-text | 文字大小自适应组件

• Host: GitHub
• URL: https://github.com/dream2023/vue-auto-text
• Owner: dream2023
• Created: 2019-05-03T12:19:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-03T12:48:00.000Z (about 6 years ago)
• Last Synced: 2025-03-18T15:56:47.344Z (about 2 months ago)
• Topics: calculate-size, fit-text, font, font-size, size, text-metrics, vue, vue-auto-text
• Language: Vue
• Homepage: https://dream2023.github.io/vue-auto-text
• Size: 403 KB
• Stars: 11
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-auto-text | 文字大小自适应组件

[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)

[![npm](https://img.shields.io/npm/v/vue-auto-text.svg)](https://www.npmjs.com/package/vue-auto-text)

[![size](https://img.shields.io/bundlephobia/minzip/vue-auto-text.svg)](https://www.npmjs.com/package/vue-auto-text)

[![download](https://img.shields.io/npm/dw/vue-auto-text.svg)](https://npmcharts.com/compare/vue-auto-text?minimal=true)

## 介绍

当给定宽度时, 文字的大小自适应, 以保证不溢出和换行

![演示图](./public/example.gif)

## 文档

[https://dream2023.github.io/vue-auto-text](https://dream2023.github.io/vue-auto-text/)

## 安装

```bash

npm install vue-auto-text --save

```

## 使用

```js

// 局部引入

import AutoText from 'vue-auto-text'

export default {

  components: {

    AutoText

  }

}

```

```js

// 全局引入

import AutoText from 'vue-auto-text'

Vue.component(AutoText.name, AutoText)

```

## Props 参数

```js

props: {

  // 文本限定宽度, 单位px, 可选, 如果不传, 则默认是父元素宽度

  width: Number,

  // 给定文本, 可选, 如果不传, 则获取插槽内文本, 但无法检测变化

  text: String,

  // 默认 font-size 大小, 数字, 必填

  size: {

    type: Number,

    required: true

  },

  // 最小 font-size 大小, 默认是 16 px

  minSize: {

    type: Number,

    default: 16

  },

  // 当文本超出时处理方式, elip 超出省略号, clip 超出截断, break 超出换行

  overflow: {

    type: String,

    default: 'ellipsis',

    validator (value) {

      return value === 'ellipsis' || value === 'clip' || value === 'break'

    }

  }

}

```

## 例子

```html

```

```html

{{text}}

```

```html

```