Vue多重文字描边组件实现示例详解
更新时间：2023年06月11日 11:26:29 作者：我是好人
这篇文章主要为大家介绍了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多重文字描边组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
vue2左侧菜单栏收缩展开目前是非常常见的,我们在日常开发过程中经常会碰到,这篇文章给大家介绍vue2左侧菜单栏收缩展开功能,感兴趣的朋友跟随小编一起看看吧2024-04-04
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
这篇文章主要介绍了使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件 ,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
这篇文章主要介绍了vue异步组件与组件懒加载问题(import不能导入变量字符串路径)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue js如何用split切分并去掉空值和item的空格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了Vue实现双向滑动输入条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue绘制双Y轴折线柱状图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在Vue3中,this的使用方式与Vue2存在较大差异,尤其是在引入组合式API后,本文详细解析了Vue3中this的使用情况、底层源码和设计理念,并提供了面试技巧,感兴趣的可以了解一下2024-09-09
这篇文章主要为大家详细介绍了Vue3中响应式的一些特殊处理，文中的示例代码讲解详细，对我们深入了解Vue3有一定的帮助，需要的可以参考一下2023-04-04
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论