v-fitfont 指令

介绍

v-fitfont 指令用于根据容器的宽度与高度动态调整文本的字体大小，确保内容始终适应容器,以实现更好的阅读体验。

基础用法

知为行之始，行为知之成，唯有知行相资以为用，方能臻于至善之境。 躬身践行以求真知，心领神会而达妙境，此乃知行合一之要津也。 夫君子之道，贵在知行合一，不徒托空言，必见诸行事而笃实之。

知是行的先导，行是知的归宿，做到知行合一，才能不断超越自我。 以知促行，以行践知，坚持知行合一，成功定会属于你。 不做语言的巨人、行动的矮子，将知行合一付诸实践，成就更好的自己 。

查看代码

<template>
  <div class="demo-container">
    <p v-fitfont class="Fitfont-text-1">
      知为行之始，行为知之成，唯有知行相资以为用，方能臻于至善之境。
      躬身践行以求真知，心领神会而达妙境，此乃知行合一之要津也。
      夫君子之道，贵在知行合一，不徒托空言，必见诸行事而笃实之。
    </p>
    <p v-fitfont class="Fitfont-text-2">
      知是行的先导，行是知的归宿，做到知行合一，才能不断超越自我。 以知促行，以行践知，坚持知行合一，成功定会属于你。
      不做语言的巨人、行动的矮子，将知行合一付诸实践，成就更好的自己 。
    </p>
  </div>
</template>
<script setup>
import { vFitfont } from '@cp-vuedir/core'
</script>
<style scoped>
.demo-container {
  width: 100%;
  height: 300px;
}

.Fitfont-text-1 {
  width: 100%;
  height: 60%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

.Fitfont-text-2 {
  width: 100%;
  height: 35%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}
</style>

扩展用法

可以设置多个参数，来达到自定义效果:

参数说明

• minFontSize：字体大小的最小值，默认为 8。
• maxFontSize：字体大小的最大值，默认为 20。
• ratio：缩放比例，默认为 1。

“心外无物，心外无理。” （一切事物的道理都在心中，心是万物的根本。） “圣人之道，吾性自足，不假外求。” （每个人内心都具备成为圣人的潜质，无需向外寻求真理。） “天地万物与人原是一体，其发窍之最精处，是人心一点灵明。” （天地万物与人本为一体，而人心的灵明是最关键的枢纽。） “你未看此花时，此花与汝心同归于寂；你来看此花时，则此花颜色一时明白起来。” （心与物的关系是相互依存的，事物的意义因心的感知而显现。）

“知者行之始，行者知之成。” （知识是行动的起点，行动是知识的完成。） “真知即所以为行，不行不足谓之知。” （真正的知识必然能付诸行动，不能付诸行动的知识不是真知。） “未有知而不行者，知而不行，只是未知。” （知道却不去实践，说明并没有真正理解。）

查看代码

<template>
  <div class="demo-container">
    <p v-fitfont="{ minFontSize: 10, maxFontSize: 30, ratio: 1 }" class="Fitfont-text-1">
      “心外无物，心外无理。” （一切事物的道理都在心中，心是万物的根本。） “圣人之道，吾性自足，不假外求。”
      （每个人内心都具备成为圣人的潜质，无需向外寻求真理。） “天地万物与人原是一体，其发窍之最精处，是人心一点灵明。”
      （天地万物与人本为一体，而人心的灵明是最关键的枢纽。）
      “你未看此花时，此花与汝心同归于寂；你来看此花时，则此花颜色一时明白起来。”
      （心与物的关系是相互依存的，事物的意义因心的感知而显现。）
    </p>
    <p v-fitfont="{ minFontSize: 10, maxFontSize: 30, ratio: 0.9 }" class="Fitfont-text-2">
      “知者行之始，行者知之成。” （知识是行动的起点，行动是知识的完成。） “真知即所以为行，不行不足谓之知。”
      （真正的知识必然能付诸行动，不能付诸行动的知识不是真知。） “未有知而不行者，知而不行，只是未知。”
      （知道却不去实践，说明并没有真正理解。）
    </p>
  </div>
</template>
<script setup>
import { vFitfont } from '@cp-vuedir/core'
</script>
<style scoped>
.demo-container {
  width: 100%;
  height: 300px;
}

.Fitfont-text-1 {
  width: 100%;
  height: 60%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

.Fitfont-text-2 {
  width: 100%;
  height: 35%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}
</style>

API

属性名	说明	类型	是否必选	默认值
minFontSize	字体大小的最小值	number	○	8
maxFontSize	字体大小的最大值	number	○	20
ratio	缩放比例	number	○	1

注意事项

注意

若是对字体大小不满意可以通过调整缩放比例来达到效果，缩放比例默认为 1，若缩放比例设置为 0.5，则字体大小会变为原来的一半。