效果图

装置

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