Vue多重文字描边组件实现示例详解
作者：我是好人
这篇文章主要为大家介绍了Vue多重文字描边组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
效果图
安装
yarn add vue-stroke-text npm i vue-stroke-text
引入
import StrokeText from 'vue-stroke-text'
// 全局注册
Vue.component(StrokeText.name,StrokeText)
// 或者页面内注册
export default {
components:{
StrokeText,
}
}使用
<template>
<stroke-text class="my-stroke-text" text="测试文字" :strokes="strokes" />
</template>
<script>
export default {
data: () => ({
// 这里按照数组顺序直接设置每一层的描边，务必按照描边宽度从小到大来设置。
// 值的写法就是 -webkit-text-stroke 属性的写法
strokes: [
'0.2em red',
'0.4em green',
'0.6em black',
]
})
}
</script>
<style>
.my-stroke-text {
font-size:24px;
}
</style>项目地址
以上就是Vue多重文字描边组件实现示例详解的详细内容，更多关于Vue多重文字描边组件的资料请关注脚本之家其它相关文章！