vue实现一个右侧悬浮工具栏 

  1 <template>
  2     <div :class="tops?'navbar':'navbar-top'">
  3         <el-tooltip class="item" effect="dark"  content="学习笔记" placement="left">
  4             <el-badge  class="item" >
  5                 <a @click="c"><i class="el-icon-edit"></i></a>
  6             </el-badge>  
  7         </el-tooltip>
  8         <el-tooltip class="item" effect="dark" content="训练评价" placement="left">
  9             <a @click="b"><i class="el-icon-star-on"></i></a>
 10         </el-tooltip>
 11         <el-tooltip class="item" effect="dark" content="产品推荐" placement="left">
 12             <a @click="a"><i class="el-icon-picture"></i></a>
 13         </el-tooltip>
 14      
 15         <el-tooltip class="item" effect="dark" content="返回顶部" placement="left" v-if="tops">
 16             <a @click="gotop"><i class="el-icon-caret-top"></i>
 17             <br>
 18             <span>顶部</span></a>
 19         </el-tooltip>
 20     </div>
 21 </template>
 22 <script>
 23 export default {
 24   name: 'RightBar',
 25   data () {
 26     return {
 27         showQR:false,
 28         tops:false,
 29         heights:window.innerHeight,
 30         scrolltop:'',
 31     };
 32   },
 33   mounted(){
 34         window.addEventListener('scroll', this.scrollToTop)
 35   },
 36   destroyed () {
 37         window.removeEventListener('scroll', this.scrollToTop)
 38   },
 39   methods:{
 40     a(){
 41         debugger
 42 this.$emit('a');
 43     },
 44     b(){
 45         debugger
 46 this.$emit('b');
 47     },
 48     c(){
 49         debugger
 50 this.$emit('c');
 51     },
 52     showQRCode(){//显示二维码
 53         this.showQR = true
 54     },
 55     hideQRCode(){//隐藏二维码
 56         this.showQR = false
 57     },
 58     scrollToTop () {
 59         let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 60         this.scrolltop = scrollTop
 61         if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
 62             this.tops = true
 63         } else {
 64             this.tops = false
 65         }
 66     },
 67     gotop () {
 68         let timer = setInterval(() => {
 69             document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
 70             if (this.scrolltop === 0) {
 71                 clearInterval(timer)
 72             }
 73         }, 15)
 74     },
 75   }
 76 }
 77 </script>
 78 <style scoped>
 79 .navbar {
 80     text-align: center;
 81     background-color: white;
 82     position: fixed;
 83     top: 68%;
 84     right: 2%;
 85     width: 55px;
 86     height: 220px;
 87     z-index: 999;
 88     border-radius: 10px;
 89 }
 90 .navbar-top{
 91     text-align: center;
 92     background-color: white;
 93     position: fixed;
 94     top: 68%;
 95     right: 2%;
 96     width: 55px;
 97     height: 165px;
 98     z-index: 999;
 99     border-radius: 10px;
100 }
101 .navbar a {
102     color: rgb(0, 0, 0);
103     text-decoration: none;
104     width: 100%;
105     height: 55px;
106     display: block;
107     font-size: 30px;
108     padding-top: 5px;
109 }
110 .navbar a:last-child{
111     color: rgb(0, 0, 0);
112     text-decoration: none;
113     width: 100%;
114     height: 55px;
115     display: block;
116     font-size: 15px;
117     border-radius: 0px 0px 10px 10px;
118 }
119 .navbar a:first-child{
120     color: rgb(0, 0, 0);
121     text-decoration: none;
122     width: 55px;
123     height: 55px;
124     display: block;
125     font-size: 30px;
126     border-radius: 10px 10px 0px 0px;
127 }
128 .navbar a:hover {
129     background-color: #d9534f;
130     color: white;
131 }
132 .navbar-top a {
133     color: rgb(0, 0, 0);
134     text-decoration: none;
135     width: 100%;
136     height: 55px;
137     display: block;
138     font-size: 30px;
139     padding-top: 5px;
140 }
141 .navbar-top a:last-child{
142     color: rgb(0, 0, 0);
143     text-decoration: none;
144     width: 100%;
145     height: 55px;
146     display: block;
147     font-size: 30px;
148     border-radius: 0px 0px 10px 10px;
149 }
150 .navbar-top a:first-child{
151     color: rgb(0, 0, 0);
152     text-decoration: none;
153     width: 55px;
154     height: 55px;
155     display: block;
156     font-size: 30px;
157     border-radius: 10px 10px 0px 0px;
158 }
159 .navbar-top a:hover {
160     background-color: #d9534f;
161     color: white;
162 }
163 .qrShow{
164     position: fixed;
165     top: calc(68% + 80px);
166     right: calc(3% + 60px);
167     z-index: 999;
168     background-color: rgb(179, 179, 179);
169     width: 110px;
170     height: 110px;
171     color: white;
172     text-align: center;
173     border-radius: 10px;
174     font-family: sans-serif;
175     padding-top: 5px;
176 }
177 .qrShow:after {
178     content: "";
179     position: absolute;
180     width: 0;
181     height: 0;
182     border: 8px solid;
183 }
184 .right:after {
185     border-left-color: rgb(179, 179, 179);
186     left: 100%;
187     top: 50%;
188     margin-top: -7px;
189 }
190 </style>

参考网址：https://www.cnblogs.com/luzanzan/p/17687579.html

 重构版——组件代码

  1 <template>
  2     <!-- <div class="fz_icon">
  3      <img src="../../static/icons/svg/beisenyouceimg4.svg">
  4     </div> -->
  5     <div>
  6         <ui class="case-fn-ui">
  7             <li class="case-fn-li" @click="a">
  8                 <div class="case-fn-icon"><img src="../../static/icons/svg/beisenyouceimg3.gif"></div>
  9                 <div class="case-fn-icon-des">学习笔记</div>
 10             </li>
 11             <li class="case-fn-li" @click="b">
 12                 <div class="case-fn-icon"><img src="../../static/icons/iconfont/icon_New product-02@2x.png"></div>
 13                 <div class="case-fn-icon-des">训练评价</div>
 14             </li>
 15             <li class="case-fn-li" @click="c">
 16                 <div class="case-fn-icon"><img src="../../static/icons/svg/beisenyouceimg3.gif"></div>
 17                 <div class="case-fn-icon-des">产品推荐</div>
 18             </li>
 19             <li @click="gotop">
 20                 <div class="case-fn-top_icon">
 21                     <svg xmlns="http://www.w3.org/2000/svg" width="22" height="27" viewBox="0 0 22 27"
 22                         data-inject-url="../../static/icons/svg/beisenyouceimg4.svg">
 23                         <path id="beisenyouceimg4--inject-51" class="cls-1"
 24                             d="M1851.68,716h18.64a1.749,1.749,0,0,1,0,3.5h-18.64a1.749,1.749,0,0,1,0-3.5h0Zm18.09,17.172a1.562,1.562,0,0,1-2.23,0l-5.26-5.3V741.7a1.28,1.28,0,1,1-2.56,0V727.865l-5.26,5.3a1.576,1.576,0,0,1-2.24,0,1.606,1.606,0,0,1,0-2.26l7.65-7.718a0.008,0.008,0,0,1,.01-0.007,1.579,1.579,0,0,1,2.24,0v0.007l7.65,7.724a1.606,1.606,0,0,1,0,2.26h0Zm0,0"
 25                             transform="translate(-1850 -716)"></path>
 26                     </svg>
 27 
 28                 </div>
 29             </li>
 30         </ui>
 31     </div>
 32 </template>
 33 
 34 <script>
 35 export default {
 36     methods: {
 37         a() {
 38 
 39             this.$emit('a');
 40         },
 41         b() {
 42 
 43             this.$emit('b');
 44         },
 45         c() {
 46 
 47             this.$emit('c');
 48         },
 49         gotop () {
 50             this.$emit('d');
 51     }
 52 },
 53 
 54 }
 55 </script>
 56 
 57 <style>
 58 .case-fn-ui {
 59     right: 0.25rem;
 60     top: 50%;
 61     border-radius: 35px;
 62     -webkit-transform: translateY(-50%);
 63     transform: translateY(-50%);
 64     position: fixed;
 65     background-color: #fff;
 66     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
 67     padding: 0 7px;
 68     width: 70px;
 69     z-index: 466;
 70     padding-bottom: 22px;
 71 }
 72 
 73 .case-fn-li {
 74     border-bottom: 1px solid #f0f0f0;
 75     position: relative;
 76     padding: 12px 0 14px;
 77     cursor: pointer;
 78     color: #505050;
 79     display: flex;
 80     font-size: 14px;
 81     flex-direction: column;
 82     align-items: center;
 83 }
 84 
 85 .case-fn-icon {
 86     width: 44px;
 87     height: 44px;
 88 }
 89 
 90 .case-fn-top_icon {
 91     position: absolute;
 92     bottom: 1.6rem;
 93     width: 0.8rem;
 94     right: 0.3rem;
 95     top: 100%;
 96     left: 0;
 97     margin-top: 13px;
 98     padding: 0;
 99     width: 100%;
100     background-color: #fff;
101     border-radius: 50px;
102     display: flex;
103     align-items: center;
104     border-radius: 50%;
105     width: 70px;
106     height: 70px;
107     justify-content: center;
108     -webkit-transition: all 0.4s;
109     transition: all 0.4s;
110 }
111 
112 .case-fn-icon img {
113     width: 100%;
114     height: 100%;
115 }
116 
117 .fz_icon {
118     display: flex;
119     align-items: center;
120     border-radius: 50%;
121     width: 44px;
122     height: 44px;
123     justify-content: center;
124     width: 100%;
125     height: 100%;
126     background-color: #fff;
127 }
128 
129 .case-fn-top_icon:hover {
130     background-color: #2cc6d0;
131 }
132 
133 .case-fn-top_icon:hover .cls-1 {
134     fill: #fff;
135 }
136 
137 .cls-1 {
138     fill: #2cc6d0;
139     fill-rule: evenodd;
140 }
141 </style>

重构版-测试代码

  1 <template>
  2     <div >
  3         <F-N @a="a()" @b="b()" @c="c()" @d="d()"></F-N>
  4     <div id="myD1" class="toggle_block sub-menu col-xs-12" >
  5         <ul class="specs_list clearfix" :data="tableData" v-for="(item) in tableData" :key="item.Id">
  6             <li class="left">
  7               <p class="p1">{{ item.name }}</p>  
  8             </li>
  9             <li class="right">
 10                 <p class="p1">{{ item.value }}</p>  
 11             </li>
 12         </ul>
 13     </div>
 14     <div id="myD2" class="toggle_block sub-menu col-xs-12" >
 15         <ul class="specs_list clearfix" :data="tableData" v-for="(item) in tableData" :key="item.Id">
 16             <li class="left">
 17               <p class="p1">{{ item.name }}</p>  
 18             </li>
 19             <li class="right">
 20                 <p class="p1">{{ item.value }}</p>  
 21             </li>
 22         </ul>
 23     </div>
 24     <div id="myD3" class="toggle_block sub-menu col-xs-12" >
 25         <ul class="specs_list clearfix" :data="tableData" v-for="(item) in tableData" :key="item.Id">
 26             <li class="left">
 27               <p class="p1">{{ item.name }}</p>  
 28             </li>
 29             <li class="right">
 30                 <p class="p1">{{ item.value }}</p>  
 31             </li>
 32         </ul>
 33     </div>
 34     <div id="myD4" class="toggle_block sub-menu col-xs-12" >
 35         <ul class="specs_list clearfix" :data="tableData" v-for="(item) in tableData" :key="item.Id">
 36             <li class="left">
 37               <p class="p1">{{ item.name }}</p>  
 38             </li>
 39             <li class="right">
 40                 <p class="p1">{{ item.value }}</p>  
 41             </li>
 42         </ul>
 43     </div>
 44 </div>
 45 </template>
 46 
 47 <script>
 48 import FN from '@/views/Case/FloatingNavigation.vue'
 49 export default {
 50 data(){
 51     return {
 52         tableData: [
 53             {name:'测量范围（直线距离）',value:'5-730米 / 6-800码'},
 54             {name:'长度',value:'800px'},
 55             {name:'宽度',value:'600px'},
 56             {name:'材质',value:'皮革'},
 57         ],
 58     }
 59 },  components: {// 通过 components节点，为当前的组件注册私有子组件
 60     'F-N':FN
 61   },
 62   methods:{
 63     a() {
 64       this.$scrollTo('#myD1', { offset: -120 })
 65     },
 66     b() {
 67       this.$scrollTo('#myD2', { offset: -120 })
 68     },
 69     c() {
 70       this.$scrollTo('#myD3', { offset: -120 })
 71     },
 72     d() {
 73       this.$scrollTo('#header')
 74     },
 75   }
 76 }
 77 </script>
 78 
 79 <style>
 80 ul li.left {
 81     width: 30%;
 82     padding-left: 40px;
 83     float: left;
 84     text-align: left;
 85 }
 86 
 87 ul li.right {
 88     width: 70%;
 89     padding-right: 40px;
 90     float:right;
 91     text-align: left;
 92 }
 93 ul.specs_list {
 94     width: 100%;
 95 }
 96 ul li.left .p1 {
 97     font-family: HelveticaNeueW01-55Roma,"Microsoft JhengHei",STHeiti,Helvetica,Arial,sans-serif;
 98     font-weight: 700;
 99     padding-right: 40px;
100 }
101 
102 ul li .p1 {
103     border-top: 1px solid #d9d9d9;
104     margin: 0;
105     padding-top: 22px;
106     padding-bottom: 18px;
107 }
108 ul:first-child li .p1 {
109     border-top: 0px;
110     list-style: none;
111 }
112 .p1 {
113     color: #666;
114     margin: 0;
115     font-size: 14px;
116 }
117  .p1, h1, h2, h3, h4, select, strong {
118     font-family: Microsoft YaHei,Arial,sans-serif!important;
119 }
120 
121 .toggle_block {
122 
123     position: relative;
124 }
125 .col-xs-12 {
126     width: 100%;
127     float: left;
128     min-height: 1px;
129     padding-left: 0;
130     padding-right: 0;
131 }
132 </style>

 

 

posted @ 2023-10-17 17:04  Fast & Furious  阅读(380)  评论(0)    收藏  举报