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双向数据绑定的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家介绍了Vue 2源码解析ParseHTML函数HTML模板详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后，最终得到一个值，watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作，本文就这两种属性给大家详细讲解，感兴趣的朋友一起学习吧2022-11-11
这篇文章主要介绍了Vue mergeProps用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了Vue开发环境中修改端口号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue3 源码解读之 time slicing的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了element-ui中使用upload组件获取上传文件信息方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论