Vue中比較流行且好用的組件使用示例
更新時(shí)間：2023年08月17日 08:54:07 作者：ClearBoth
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
1.剪切板組件
復(fù)制文本：vue-clipboard3
npm install --save vue-clipboard3
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const copyPreviewPath = async (string) => {
try {
await toClipboard(string);
message.success("文件路徑復(fù)制成功！");
} catch (e) {
console.error(e);
message.error("復(fù)制失?。∧臑g覽器不支持復(fù)制功能");
}
};<div class="icon" @click="copyPreviewPath(files.url)"> <FolderOutlined/> </div>
2.圖片視口懶加載組件
vue3-lazy
npm install vue3-lazy -S
// 圖片懶加載
export const lazyPlugin = {
install(app) {
// 自定義指令：
app.directive("img-lazy", {
mounted(el, binding) {
// el 指令綁定得那個(gè)元素 img
//bindding: binding.value 指令等于號(hào)后面綁定得表達(dá)式得值 這里指圖片url地址
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }], observerElement) => {
if (isIntersecting) {
//圖片進(jìn)入視覺(jué)入口了
el.src = binding.value;
stop();
}
}
);
},
});
},
};import { lazyPlugin } from "@/utils/use-lazy-data.js";
<img v-img-lazy="baseUrl + item.url" alt="" :key="item.url" />以上就是Vue中比較流行且好用的一些組件的詳細(xì)內(nèi)容，更多關(guān)于Vue流行組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
element-UI?el-table樹(shù)形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹(shù)形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了使用vue實(shí)現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
vue實(shí)現(xiàn)移動(dòng)端多格輸入框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端多格輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽
這篇文章主要介紹了vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue路由 重定向和別名的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09