vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue多重文字描边组件

Vue多重文字描边组件实现示例详解

作者:我是好人

这篇文章主要为大家介绍了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多重文字描边组件的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文