Nine Pomeranian Monsters

    vue-auto-text

    1.0.4 • Public • Published

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

    MIT Licence npm size download

    介绍

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

    演示图

    文档

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

    安装

    npm install vue-auto-text --save

    使用

    // 局部引入
    import AutoText from 'vue-auto-text'
    export default {
      components: {
        AutoText
      }
    }
    // 全局引入
    import AutoText from 'vue-auto-text'
    Vue.component(AutoText.name, AutoText)

    Props 参数

    props: {
      // 文本限定宽度, 单位px, 可选, 如果不传, 则默认是父元素宽度
      width: Number,
      // 给定文本, 可选, 如果不传, 则获取插槽内文本, 但无法检测变化
      text: String,
      // 默认 font-size 大小, 数字, 必填
      size: {
        type: Number,
        required: true
      },
      // 最小 font-size 大小, 默认是 16 px
      minSize: {
        type: Number,
        default: 16
      },
      // 当文本超出时处理方式, ellipsis 超出省略号, clip 超出截断, break 超出换行
      overflow: {
        type: String,
        default: 'ellipsis',
        validator (value) {
          return value === 'ellipsis' || value === 'clip' || value === 'break'
        }
      }
    }

    例子

    <!-- 可以检查到字数变化, 进而动态更改字体大小 -->
    <auto-text :minSize="24" :size="48" :text="text" :width="200" />
    <!-- 仅能根据首次获取字数多少, 进行判断字体大小, 无法检测到字数变化 -->
    <auto-text :minSize="24" :size="48" :width="200">{{text}}</auto-text>
    <!-- 超出换行 -->
    <auto-text
      :minSize="24"
      overflow="break"
      :size="48"
      :text="text"
      :width="200"
    />

    Install

    npm i vue-auto-text

    DownloadsWeekly Downloads

    25

    Version

    1.0.4

    License

    none

    Unpacked Size

    212 kB

    Total Files

    8

    Last publish

    Collaborators

    • zhangchaojie