脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue多重文字描边组件

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>

项目地址

github

npm

以上就是Vue多重文字描边组件实现示例详解的详细内容，更多关于Vue多重文字描边组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论