Vue中比較流行且好用的組件使用示例
更新時間：2023年08月17日 08:54:07 作者：ClearBoth
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
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 指令綁定得那個元素 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)容，更多關(guān)于Vue流行組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過濾器filter實例，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了在線使用iconfont字體圖標的簡單實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項目嵌套iframe實現(xiàn)發(fā)送、接收數(shù)據(jù)
這篇文章主要介紹了vue項目嵌套iframe實現(xiàn)發(fā)送、接收數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了在Vue中使用Select選擇器拼接label的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue報錯：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報錯：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-06-06
Electron+vite+vuetify項目搭建的流程和方法
最近想用Electron來進行跨平臺的桌面應(yīng)用開發(fā),同時想用vuetify作為組件,于是想搭建一個這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了詳解vue路由篇(動態(tài)路由、路由嵌套)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue + element ui實現(xiàn)播放器功能的實例代碼
這篇文章主要介紹了vue + element ui實現(xiàn)播放器功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
下面小編就為大家分享一篇基于vue-resource jsonp跨域問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02