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