Vue中比較流行且好用的組件使用示例
更新時間：2023年08月17日 08:54:07 作者：ClearBoth
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1.剪切板組件
復制文本：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("文件路徑復制成功！");
} catch (e) {
console.error(e);
message.error("復制失??！您的瀏覽器不支持復制功能");
}
};<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 指令綁定得那個元素 img
//bindding: binding.value 指令等于號后面綁定得表達式得值 這里指圖片url地址
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }], observerElement) => {
if (isIntersecting) {
//圖片進入視覺入口了
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中比較流行且好用的一些組件的詳細內(nèi)容，更多關于Vue流行組件的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了VUE項目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
這篇文章主要介紹了vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
Vue router的addRoute方法實現(xiàn)控制權限方法詳解
這篇文章主要介紹了vue動態(tài)路由添加，vue-router的addRoute方法實現(xiàn)權限控制流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端多格輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue實現(xiàn)input框禁止輸入標簽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue路由 重定向和別名的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue和relation-graph庫打造高質(zhì)量的關系圖應用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關系圖應用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關系圖,我們詳細介紹了數(shù)據(jù)準備、關系映射、點擊事件等關鍵步驟,需要的朋友可以參考下2023-09-09