当前位置: 首页 > 网页制作 > 所有文章
  • vue实现浏览器桌面通知的示例代码

    2023年01月09日

    浏览器桌面通知:当浏览器最小化,或者切换到其他标签页不在当前系统页面,或在其他页面时依然可以显示通知 *使用前注意:生产环境地址必须为https协议,开发环境可以用localhost IP地址,且必须允许显示通知才能显示桌面通知*存在兼容性问题,不同系统不同浏览器甚至不同版本浏览器效果略有不同 方案一: H5 JavaScrip ...

    阅读全文
  • Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    2022年12月08日

    最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用。 查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到。 然后使 ...

    阅读全文
  • Nginx部署Vue项目动态路由刷新404怎么解决

    2022年12月05日

    期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下。 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法上传文件 ...

    阅读全文
  • Vue下拉框加分页搜索功能的实现方法

    2022年11月25日

    开发任务中有这样一个需求,下拉框中需要展示超过5000条数据,甚至更多。这数据量直接整个页面卡死了,就想到在下拉框中加分页,实现方式有如下两种: 方式一:使用elementui中的el-select和el-pagination实现分页 HTML部分: <el-select v-model="value1" placeholder="请选择数据" :clearable="false" ...

    阅读全文
  • Vue屏幕自适应三种实现方法详解

    2022年11月24日

    在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们来解决一下这个不算难题的难题! 使用 scale-box 组件 属性: width宽度 默认1920 height高度 默认1080 bgc背景颜色 默认"transparent" delay ...

    阅读全文
  • Vuex与Vue router的使用详细讲解

    2022年11月03日

    在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,用于任意组件间的通信 state:存储数据的地址 actions:中转站,可发送异步请求增加判断 mutations:真正改state数据的地方 Vuex的使用流程 - 第一步:在state中定义变量 - 第二步: ...

    阅读全文
  • vue当中组件之间共享数据的实现方式

    2022年10月17日

    vue组件之间共享数据方式 父向子传值:v-bind 属性绑定 子向父传值:v-on 事件绑定 兄弟组件之间共享数据:EventHBus $emit 发送数据的那个组件 $on 接收数据的那个组件 上面介绍的这三种组件之间的通讯方式,只适合在小范围内来进行数据的共享,如果我们要频繁的、大范围的实现数据的共享,以上三种方式就有点力不从 ...

    阅读全文
  • Vue Echarts实现实时大屏动态数据显示

    2022年10月14日

    因为是国企线上应用的活动大屏,我就不附图了。代码仅供参考。 一、vue配置 1. 我是用vue-cli 搭建的,大屏项目复杂度不高,vue-router、vuex 、axios、sass 等都可以不用,vue、echarts就够用。 2. vue.config.js 配置就正常配,出口入口等基本配置我就不展示了,这两个配置项大屏还有点用。主要是我把每个图表都拆成 ...

    阅读全文
  • vue项目安装sass常见报错处理方式

    2022年09月23日

    这篇文章主要介绍了vue项目安装sass常见报错处理方式,具有很好的参考价值,希望对大家有所帮助。 安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 第一种:Module build failed: TypeError: this.getResolve is not a function 如果运行之后项目报 ...

    阅读全文
  • Vue项目中实现描点跳转scrollIntoView的案例

    2022年09月16日

    这篇文章主要介绍了Vue项目中实现描点跳转scrollIntoView的案例,具有很好的参考价值,希望对大家有所帮助。 Vue实现描点跳转scrollIntoView 方式一:使用a标签#id形式 <a href="#about" rel="external nofollow" >联系我们</a>   <div id="about">     跳转内容 </div> 方式二:scrollInt ...

    阅读全文
  • vue数字金额动态变化功能实现方法详解

    2022年09月15日

    这篇文章主要介绍了vue实现数字金额动态变化效果,数字动态变化是我们在前端开发中经常需要做的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧! 1 前言 在某些场景中,要求我们能够动态与用户进行交互,如页面加载一个数字的时候,动态改变 ...

    阅读全文
  • vue代理模式解决跨域详解

    2022年09月14日

    简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让不用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯。 解决跨域 我是用vue开发的,就vue代理模式解决跨域说明一下。 1、在vue.config.js中这样写: let devProxy = {   //获取ip信息   '/getIpMsg': {     target: "https://whois.pconl ...

    阅读全文
  • vue项目实现通过ip地址访问和localhost访问方式

    2022年09月06日

    vue项目通过ip地址访问和localhost访问 为了实现vue项目启动服务,多个人可以查看,别人可以通过ip+端口访问 在config文件下的index.js文件中,修改host为: host: '0.0.0.0', 或者在package.json文件下"scripts"的"dev"后面加上-host 0.0.0.0" 例如: "dev": "webpack-dev-server --inline --progress --config build ...

    阅读全文
  • Vue.use()的作用及原理解析

    2022年09月02日

    最近帮忙面试前端的时候,就随口一问,发现很多2年以上的vue开发者说不出vue.use()为什么用,什么时候用,原理是什么所以我整理一下网上的资源,写一篇毕竟容易理解的文章 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prot ...

    阅读全文
  • Vue+Mockjs模拟curd接口请求的示例详解

    2022年07月12日

    在前后端分离的项目中常常会遇到当前端页面开发完成,但是后端接口还没好,暂不支持联调的情况下,一般我们会用到mock数据,这边简单说一下最常见且经常会遇到的curd接口模拟,注:这边可以和后端先约定好接口路径以及入参返参的字段,避免二次修改。 1.安装依赖,新建js文件,在文件中导入mock.js,模拟列表数据 yarn ...

    阅读全文
  • Vue分页组件的封装方法

    2022年07月06日

    这个是基于vue2的分页封装,仿照elementUI而写的组件。 效果如图 话不多说,直接上代码 <template>   <div class="pagination">     <!-- 总页数 -->     <div class="total">共{{ total }}条</div>     <!-- 选择每页的条数 -->     <select name="" id="size_select" v ...

    阅读全文
  • vue项目中如何使用阿里iconfont图标

    2022年06月02日

    vue如何在创建好的项目中引入阿里图标iconfont呢?下面已经为你准备好了操作方法步骤,有需要的可以借鉴一下! 先登录阿里 iconfont 图标库:https://www.iconfont.cn/ 1、选择需要的图标添加到购物车中 2、在资源管理里面 ——我的项目: 添加新项目 这样的话就会永久保存了。 3. 建好了之后, 低价购物车,把所有图标 ...

    阅读全文
  • 如何在IDEA中Debug调试VUE前端项目

    2022年05月23日

    调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化。偶然发现idea竟然有这个功能,简直神器啊。研究了半天终于搞定了,哈哈,开心。下面是详细步骤: 1.下载浏览器插件 在chrome应用商店搜索"jetbrains ide support"插件,可能需要FQ(不会百度,老D google host),如下 ...

    阅读全文
  • vue项目如何配置打包测试环境或者生产环境

    2022年05月06日

    vue项目配置打包测试环境/生产环境: 开发环境运行命令:npm run serve 生产环境打包命令:npm run pro 测试环境打包命令:npm run build 步骤: 1.项目中添加一个配置ip的js文件,比如如下的ip-config.js(位置不重要) 2.在生成axios实例的时候引入,封装baseUrl 3.在main.js中全局引入封装号的axios import http ...

    阅读全文