vue懸浮可拖拽懸浮按鈕的實(shí)例代碼
更新時間：2019年08月20日 09:43:18 作者：乖摸摸頭
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
前言
vue開發(fā)手機(jī)端懸浮按鈕實(shí)現(xiàn)，可以拖拽，滾動的時候收到里邊，不影響視線
使用，基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構(gòu)建手機(jī)端模板腳手架 vue-h5-template
后續(xù)將發(fā)布各種商城組件組件，讓商城簡單高效開發(fā)
線上體驗(yàn)
使用
將 src/components文件夾下的s-icons組件放到你的組件目錄下
使用組件
// template
<template>
<div>
<float-icons padding="10 10 60 10" class="icons-warp">
<div class="float-icon-item">
<img src="../../assets/images/home-icon.png" alt="" @click="handleIcons('home')">
<span>首頁</span>
</div>
<div class="float-icon-item">
<img src="../../assets/images/cart-icon.png" alt="" @click="handleIcons('cart')">
<span>購物車</span>
</div>
</float-icons>
</div>
</template>
<script>
import FloatIcons from '@/components/s-icons'
export default {
components: {
'float-icons': FloatIcons
},
methods: {
// 點(diǎn)擊按鈕
handleIcons(router) {
console.log('router', router)
this.$router.push(router)
}
}
}
</script>
<style lang='scss' scoped>
.icons-warp {
border-radius: 25px;
.float-icon-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 50px;
height: 50px;
img {
width: 25px;
height: 25px;
margin-bottom: 3px;
}
span {
font-size: 9px;
color: #666666;
}
}
}
</style>
參數(shù)
| 字段名 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| padding | String | '10 10 10 10' | 懸浮按鈕可拖拽的安全范圍，與 css padding 傳參一致 |
| scoller | String | '' | 監(jiān)聽頁面滾動容器 id,不傳時候監(jiān)聽 window （解決滾動時懸浮框按鈕不收進(jìn)去） |
注意
如果滾滾動的時候收到里邊，需要穿scoller參數(shù)
比如：
你的滾動列表外層div 設(shè)置id
<div id="loadmore">
<van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
<van-cell v-for="item in list" :key="item" :title="`我是你的小仙女，愛你第${item}遍`" />
</van-list>
</div>
組件傳參 scoller="loadmore"
<float-icons **scoller="loadmore"** padding="10 10 60 10" class="icons-warp"> </float-icons>
因?yàn)槟憧赡苁褂媒M件導(dǎo)致監(jiān)聽的滾動元素是window，所以你需要將你的滾動容器的id傳進(jìn)我的組件
總結(jié)
以上所述是小編給大家介紹的vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了Element Badge標(biāo)記的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
ElementUI中el-dropdown-item點(diǎn)擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文介紹了Vue的全局安裝過程、查看版本、安裝擴(kuò)展等步驟,并提供了解決在.vue文件目錄下運(yùn)行報(bào)錯的方法,涉及到的錯誤解決包括使用命令安裝@vue/compiler-sfc和執(zhí)行npm install命令安裝依賴2024-10-10
vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了詳解vue.js之綁定class和style的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Element-UI 解決el-table中圖片懸浮被遮擋問題小結(jié)
在開發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時,會被單元格遮擋的問題,對于此問題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue實(shí)現(xiàn)登錄記住賬號密碼功能的思路與過程
最近在學(xué)習(xí)vue,發(fā)現(xiàn)了vue的好多坑,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)登錄記住賬號密碼功能的思路與過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
vue項(xiàng)目如何使用$router.go(-1)返回時刷新原來的界面
這篇文章主要介紹了vue項(xiàng)目如何使用$router.go(-1)返回時刷新原來的界面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11