Vue项目实现web端飘窗

开发背景：项目使用了Nuxt.js框架。Nuxt.js 是一个基于 Vue.js 的通用应用框架，具体查看关于 Nuxt.js - NuxtJS | Nuxt.js 中文网

一、封装飘窗组件FloatWindow.vue，放在目录/components下

<template><nuxt-linkv-if="visible"class="float-window":style="{left: `${left}px`,top: `${top}px`,width: `${width}px`,height: `${height}px`}":to="to"target="_blank"@mouseenter.native="stop"@mouseleave.native="start"><div class="float-window-close" @click.prevent="close"><i></i><i></i></div><img :src="data:image" alt=""></nuxt-link>
</template><script>
export default {name: 'FloatWindow',props: {image: {type: String,required: true},width: {type: Number,required: true},height: {type: Number,required: true},to: {type: String,required: true},speed: {type: Number,default: 1000 / 60}},data () {return {visible: false,top: 0,left: 0,maxX: 0,maxY: 0,directionX: -1,directionY: -1}},mounted () {this.setup()this.top = window.innerHeight - this.heightthis.left = window.innerWidth - this.widththis.visible = truewindow.addEventListener('resize', this.setup)this.start()},destroyed () {this.close()},methods: {/*** 配置*/setup () {this.maxX = window.innerWidth - this.width // X轴边界this.maxY = window.innerHeight - this.height // Y轴边界},/*** 开始移动*/start () {this.timer = setInterval(this.move, this.speed)},/*** 停止移动*/stop () {clearInterval(this.timer)},/*** 移动飘窗*/move () {const rect = this.$el.getBoundingClientRect()if (rect.x >= this.maxX) {this.directionX = -1} else if (rect.x <= 0) {this.directionX = 1}if (rect.y >= this.maxY) {this.directionY = -1} else if (rect.y <= 0) {this.directionY = 1}this.left += this.directionXthis.top += this.directionY},/*** 关闭飘窗*/close () {this.visible = falsewindow.removeEventListener('resize', this.setup)clearInterval(this.timer)}}
}
</script><style lang="stylus" scoped>
.float-windowdisplay blocktransform  translateZ(0)position fixedright 0bottom 0z-index 99.float-window-closeposition absolutewidth 20pxheight 20pxtop 15pxright 15pxidisplay blockwidth 2pxheight 20pxbackground-color #FFFborder-radius 1pxtransition 0.3s box-shadowi:first-childposition relativeleft 10pxtransform rotate(-45deg)i:last-childposition absolutetop 0left 10pxtransform rotate(45deg)&:hoveribox-shadow 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)imgwidth 100%display block
</style>

二、在页面引入使用

1.页面组件引入并挂在到components

import FloatWindow from '@/components/FloatWindow.vue'

  components: {FloatWindow},

2.页面上使用

<float-window :image="require('~/assets/img/float-ad.png')" :width="317" :height="212" to="/test/index">
</float-window>

记录于2022-2-25

Vue项目实现web端飘窗相关推荐

Vue项目实现web端第三方分享（qq、qq空间、微博、微信）
开发背景:文章详情页面需要分享到第三方,包括qq.qq空间.微博.微信. 一.封装一个share.js文件,放在目录/utils下 // share.js// url - 需要分享的页面地址(当前页面 ...
Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
Vue项目打包移动端App(App打包教程)，简便直接
一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录首先可以看到dist目录的 ...
flutter和webapp_Flutter全平台！迁移现有Flutter项目到WEB端
写在前面 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS .Android.web和桌面 ...
OpenCV-Python实战（21）——OpenCV人脸检测项目在Web端的部署
OpenCV-Python实战(21)--OpenCV人脸检测项目在Web端的部署 0. 前言 1. OpenCV 人脸检测项目在 Web 端的部署 1.1 解析请求并构建响应 1.2 构建请求进行测 ...
OpenCV-Python实战（20）——OpenCV计算机视觉项目在Web端的部署
OpenCV-Python实战(20)--OpenCV计算机视觉项目在Web端的部署 0. 前言 1. Python Web 框架简介 2. Flask 安装与使用 2.1 Flask 安装 2.2 ...
vue实现web端飘窗组件
项目中需要实现飘窗效果效果如下: 一.封装飘窗组件FloatWidow.vue,放在目录/components下 <template>& ...
Django项目之Web端电商网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 项目源码下载目录一丶项目介绍二丶电商项目开发流程三丶项目需求四丶项目架构概览五丶项目数据库设计六丶项目框架搭建一丶 ...
vue项目转换服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
这是一篇教程,从创建项目到改造项目 vue-cli创建一个项目在放你做demo的地方,创建一个项目 vue create vue-ssr // 如果你安装了vue-cli4,选择vue2的版本,以下 ...
lib-flexible vue项目（移动端适配）
移动端适配步骤 1.安装lib-flexible(npm install lib-flexible --save-dev) 2.在main.js 中引入lib-flexible(import 'lib ...

Vue项目实现web端飘窗

Vue项目实现web端飘窗相关推荐

最新文章

热门文章