快捷導(dǎo)航

Vue多重文字描邊組件實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年06月11日 11:26:29 作者：我是好人

這篇文章主要為大家介紹了Vue多重文字描邊組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

效果圖

安裝

yarn add vue-stroke-text
npm i vue-stroke-text

引入

import StrokeText from 'vue-stroke-text'
// 全局注冊(cè)
Vue.component(StrokeText.name,StrokeText)
// 或者頁(yè)面內(nèi)注冊(cè)
export default {
    components:{
        StrokeText,
    }
}

使用

<template>
    <stroke-text class="my-stroke-text" text="測(cè)試文字" :strokes="strokes" />
</template>
<script>
export default {
    data: () => ({
        // 這里按照數(shù)組順序直接設(shè)置每一層的描邊，務(wù)必按照描邊寬度從小到大來(lái)設(shè)置。
        // 值的寫(xiě)法就是 -webkit-text-stroke 屬性的寫(xiě)法
        strokes: [
            '0.2em red',
            '0.4em green',
            '0.6em black',
        ]
    })
}
</script>
<style>
.my-stroke-text {
    font-size:24px;
}
</style>

項(xiàng)目地址

github

npm

以上就是Vue多重文字描邊組件實(shí)現(xiàn)示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue多重文字描邊組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue基礎(chǔ)語(yǔ)法之插值表達(dá)式詳解
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語(yǔ)法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
vue elementUi+sortable.js實(shí)現(xiàn)嵌套表格拖拽問(wèn)題
這篇文章主要介紹了vue elementUi+sortable.js實(shí)現(xiàn)嵌套表格拖拽問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下
2017-07-07
Vue3使用contenteditable打造定制化輸入
contenteditable 屬性為網(wǎng)頁(yè)開(kāi)發(fā)者提供了一種靈活的方式來(lái)創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁(yè)上進(jìn)行內(nèi)容編輯,而無(wú)需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下
2023-12-12
vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2020-04-04
詳解vue如何給特殊字段設(shè)置插槽
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下
2023-09-09
vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用
這篇文章主要介紹了vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3+Vite 環(huán)境變量和模式配置詳解(推薦)
在Vue 3中,你可以通過(guò) import.meta.env 訪問(wèn)環(huán)境變量,這些變量可以在你的應(yīng)用代碼中使用,但它們通常用于配置不應(yīng)該硬編碼在代碼中的值,這篇文章主要介紹了Vue3+Vite 環(huán)境變量和模式配置詳解,需要的朋友可以參考下
2024-12-12
基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲
貪吃蛇游戲想必是很多70、80后的回憶，一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實(shí)現(xiàn)這一經(jīng)典的游戲，感興趣的可以了解一下
2022-04-04