vue

vue一级、二级菜单点击导航栏切换

  • Post author:
  • Post category:vue

一.一级菜单 1.实际效果,点击标题切换内容 2.用了vertify样式,标题pname从后端传数据 <v-tabs         v-model="tab"     >         <v-tabs-slider color="yellow"></v-tabs-slider>     //标题下黄线         <v-tab         v-…

继续阅读 vue一级、二级菜单点击导航栏切换

Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

  • Post author:
  • Post category:vue

前几天做项目的时候，需要实现一个动态锚点的效果 如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题： 1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？ 2. 如何监听页面滚动事件？ 在浏览了大量文章、进行多次尝试之后，终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法，和 Vue 生命周期中的 mounted 一、锚点实现…

继续阅读 Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

基于antd-vue封装的下拉选择框滑动加载并且带搜索还可以新增的功能

  • Post author:
  • Post category:vue

还是那句话，只有你想不到的，没有产品不敢想的。 这个也无需求也是emmmmm头一回接。 那就是下拉框数据很多的时候不想要一次性查出来，想要滑动加载，那第一反应很简单咯，分页查询嘛 <a-select v-decorator="[ 'organizationId', { initialValue: showData.organizationName, }, ]" show-search all…

继续阅读 基于antd-vue封装的下拉选择框滑动加载并且带搜索还可以新增的功能

Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本

  • Post author:
  • Post category:vue

千呼万唤始出来，终于将原先的 Vue2 升级到了 Vue3，并且使用了 Ts，部分界面使用了 Tsx 的写法，欢迎大家来点个星星~ 项目地址： Vue3 可视化大屏展示 ，点颗星星吧~ 界面展示（这个是动态的后面会换成 gif 图）： 一、项目描述 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 "，使用 ‘.vue’ 和 ‘.tsx’ 文件实现…

继续阅读 Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本

vue 跨域请求_浏览器跨域解决方案

  • Post author:
  • Post category:vue

浏览器跨域请求接口曾经困扰过很多人 浏览器跨域报错 跨域解决方案 前端解决方案 配置浏览器不拦截跨域请求 众所周知，跨域报错是因为浏览器基于同源策略，拦截了开发者发起的跨域请求。对啊，让浏览器不要拦截不就好了嘛。前端开发应该都用的chrome吧？是就对了，打开终端： windows：(假设chrome安装在C盘) C:Program FilesGoogleChromeApplicationchro…

继续阅读 vue 跨域请求_浏览器跨域解决方案

vue项目在打包时，去掉所有的console.log输出

  • Post author:
  • Post category:vue

vue项目在打包时，去掉所有的console.log输出 安装插件 添加配置 安装插件 npm install babel-plugin-transform-remove-console --save-dev 添加配置 安装babel-plugin-transform-remove-console开发依赖，然后在项目的 babel.config.js 的plugin中添加节点。再build就不会有…

继续阅读 vue项目在打包时，去掉所有的console.log输出

vue3 倒计时功能

  • Post author:
  • Post category:vue

const showDialog = ref(false); //显示/隐藏 忘记密码弹层 const timer = ref(60); //倒计时 const showTimer = ref(false); const benginTimer = () => { showTimer.value = true; const times = setInterval(() => { if …

继续阅读 vue3 倒计时功能

用Nginx部署vue项目页面404解决

  • Post author:
  • Post category:vue

nginx是一款优秀的web反向代理服务软件。 将打包好的dist前端项目，基于nginx完成部署上线。 项目场景： 将 vue项目打包 部署到nginx上面运行 打开nginx的主配置文件： nginx安装目录/conf/nginx.conf 。 将vueCLI打的项目包（dist目录）交给nginx服务来管理。使得访问某些路径时，可以指向dist/index.html。 问题描述 问题一： 运…

继续阅读 用Nginx部署vue项目页面404解决

Vue 3源码剖析，一次搞定

  • Post author:
  • Post category:vue

你真的，会写简历吗？ 前几天和一个hr朋友聊天说起前端工程师供需失衡的情况，朋友抱怨道： 每天投过来的简历很多，但 千篇一律，基本没有闪光点，只会简单的罗列技术栈 ，根本招不到想要的前端！ 那么，究竟要怎么写简历才能在一众简历中脱颖而出呢？ 举个例子，Vue 框架因为简单易学好上手而广受欢迎，竞争力度越来越大，如果你的简历没有太多闪光点，不能吸引hr，那可能连面试机会都没有。 但如果你的简历中加入…

继续阅读 Vue 3源码剖析，一次搞定

vue组件中的信息传递

  • Post author:
  • Post category:vue

vue组件中的信息传递 父组件传递数据给子组件 子组件不能直接使用父组件中的数据。 父组件可以通过 props 属性向子组件传值 。 传递数据的方法： ​ 在父组件中通过v-bind:自定义接受名=“传递的数据” ​ 在子组件中用props:[“自定义接受名”],来接收数据 ​ 接受之后在子组件中使用的名称为"自定义接受名" <!DOCTYPE html> <html lang=…

继续阅读 vue组件中的信息传递