项目中有一个功能,需要将文字实现这种弯曲的弧形效果
感觉好麻烦,终于找到了这个超级赞的工具arctext
第一步:安装依赖
npm install --save vue-arc-text
第二步:在项目中使用
import VueArcText from 'vue-arc-text'
export default {
components: { VueArcText },
data() {
return {
arcTextForm: {
text: '我就是弯曲文字效果', // 弯曲文字的内容
arc: 150, // 弯曲的角度
direction: 1 // 弯曲文字的方向 (向上 或 向下)
},
}
}
}
<vue-arc-text ref="arctext" :text="arcTextForm.text" :arc="arcTextForm.arc" :direction="arcTextForm.direction"></vue-arc-text>
是不是就非常的简单!!!