Vue多重文字描邊組件實現(xiàn)示例詳解
更新時間：2023年06月11日 11:26:29 作者：我是好人
這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
效果圖
安裝
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: () => ({
// 這里按照數(shù)組順序直接設置每一層的描邊，務必按照描邊寬度從小到大來設置。
// 值的寫法就是 -webkit-text-stroke 屬性的寫法
strokes: [
'0.2em red',
'0.4em green',
'0.6em black',
]
})
}
</script>
<style>
.my-stroke-text {
font-size:24px;
}
</style>項目地址
以上就是Vue多重文字描邊組件實現(xiàn)示例詳解的詳細內容，更多關于Vue多重文字描邊組件的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了基于vue2.0實現(xiàn)簡單輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細講解，感興趣的朋友一起學習吧2022-11-11
這篇文章主要介紹了Vue?mergeProps用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題
這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3 源碼解讀之 time slicing的使用方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07