[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