分类：Vue

2022
01-12

Vue生产和开发环境如何切换及过滤器的使用

目录一、生产环境，开发环境切换第一种方法：通过配置.env文件来实现第二种方法二、过滤器三、moment时间库使用一、生产环境，开发环境切换开发环境：开发环境就是在/config/index.js下配置proxyTable生产环境：打包项目后代理就失效啦，所以再生产环境下要重新配置一下第一种方法：通过配置.env文件来实现参考：https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步：通过创建不同环境js文件，再通过cross-env来切... 继续阅读 >
2021
12-16

图文详解vue中proto文件的函数调用

图文详解vue中proto文件的函数调用 1、编译proto在src文件夹下新建proto文件夹用以存放所有的.proto文件。在proto文件夹下打开终端，输入如下命令：//进入proto文件夹执行下列编译，将helloworld.proto替换为当前的.proto文件名protoc-I=.helloworld.proto\--js_out=import_style=commonjs,binary:.\--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.一个.proto文件（helloworld.proto）编译后生成2个js文件：helloworld_pb.jshelloworl... 继续阅读 >
2021
12-14

浅谈vue实现双向事件绑定v-model的原理

目录解释：总结补充与js或者jquery直接改变操作dom不同，vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值官方文档这么解释：v-model只不过是一个语法糖而已,真正的实现靠的还是v-bind:绑定响应式数据触发input事件并传递数据(核心和重点... 继续阅读 >
2021
12-13

Vue后台中优雅书写状态标签的方法实例

目录前言优化抽离变量二次封装el-tag组件使用总结前言在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色，在写代码时有些人往往是这么做的：<template><el-form:model="query"><el-form-itemlabel="审批状态"prop="status"><el-selectv-model="query.status"clearable><el-optionv-f... 继续阅读 >
2021
12-11

Vue封装通用table组件的完整步骤记录

目录前言为什么需要封装table组件？第一步：定义通用组件第二步：父组件与子组件进行render通信第三步：使用组件总结前言随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。为什么需要封装table组件？后台管理系统表格使用频率高，减少关于... 继续阅读 >
2021
12-10

Vue组件封装上传图片和视频的示例代码

Vue组件封装上传图片和视频的示例代码  首先下载依赖：cnpmi-Svue-uuidali-oss图片和视频字段都是数组类型，保证可以上传多个文件。UploadImageVideo：<!--UploadImageVideo分片上传--><template><divclass="UploadImageVideo"><el-uploadaction:on-change="handleChange":on-remove="handleRemove":limit="limitFileNumber":on-exceed="handleExceed":file-list="_fileList":http-request="handleHttp... 继续阅读 >
2021
11-19

Vue实现固定底部组件的示例

目录【实现效果】【实现方式】【实现效果】【实现方式】<template><divid="app"><divclass="main"><imgalt="Vuelogo"src="./assets/logo.png"><HelloWorldmsg="WelcometoYourVue.jsApp"/><imgalt="Vuelogo"src="./assets/logo.png"></div><divclass="footer">这是固定在底部的按钮</div></div></template><script>importHelloWorldfrom'./components/HelloWorld.vue'exportde... 继续阅读 >
2021
11-19

Vue 可拖拽组件Vue Smooth DnD的使用详解

Vue 可拖拽组件Vue Smooth DnD的使用详解 目录简介和Demo展示API:Container属性生命周期回调事件API:Draggable实战简介和Demo展示最近需要有个拖拽列表的需求，发现一个简单好用的Vue可拖拽组件。安利一下~VueSmoothDnD是一个快速、轻量级的拖放、可排序的Vue.js库，封装了smooth-dnd库。VueSmoothDnD主要包含了两个组件，Container和Draggable，Container包含可拖动的元素或组件，它的每一个子元素都应该被Draggable包裹。每一个要被设置为可拖动... 继续阅读 >
2021
11-17

超详细的vue组件间通信总结

超详细的vue组件间通信总结 目录前言一、props、$emit单向数据流二、$parent、$children三、$attrs、$listeners四、provide、inject五、eventBus(事件总线)六、vuex七、localstorage总结前言组件通信在我们平时开发过程中，特别是在vue和在react中，有着举足轻重的地位。本篇将总结在vue中，组件之间通信的几种方式：props、$emit$parent、$children$attrs、$listenersprovide、injecteventBusvuex本地存储一、props、$emit单向... 继续阅读 >
2021
11-17

Vue使用echarts可视化组件的方法

Vue使用echarts可视化组件的方法 echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html1.找到脚手架项目所在地址，执行cnpminstallecharts，安装echarts组件（脚手架的地址就是你vue项目的地址）（E:\demo\vuepro）这是我的项目地址，vuepro为项目名2.按需导入，以加快打开速度//引入echarts组件importechartsfrom"echarts"//引入基本模板letechart=require('echarts/lib/echarts')//引入柱状图组件require('ech... 继续阅读 >
2021
11-16

Vue + element实现动态显示后台数据到options的操作方法

Vue + element实现动态显示后台数据到options的操作方法 需求：实现selector选择器中选项值options数据的动态显示，而非写死的数据，我的角色ID数据如下：现在实现把这些数据请求显示option上实现如下：使用element-ui中selector选择器：<el-form-itemlabel="角色ID："prop="roleId"><el-selectv-model="addUserForm.roleId"placeholder="请选择角色ID"><el-optionv-for="iteminroleList":key="item.value":label="item.label"... 继续阅读 >
2021
11-14

vue Nprogress进度条功能实现常见问题

vue Nprogress进度条功能实现常见问题 NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress下图中的这种顶部进度条是非常常见的，在vue项目中有对应的插件。NprogressNprogress进度条的使用方法如下：1.安装nprogress插件npminstall--savenprogress注意此处的--save等同于-s,就是将插件的名称及版本号保存到package.json文件中的dependencies中，这样其他人克隆项目后，可以通过np... 继续阅读 >
2021
11-14

vue中实现全屏以及对退出全屏的监听

vue中实现全屏以及对退出全屏的监听 目录前言：       实现步骤：完整源码：更多资料：前言：        vue中实现默认进来页面，某个div全屏，并监听退出全屏的次数，当退出全屏次数达到5的时候跳转到别的页面。实现步骤：1、页面上在你想要的容器上加上id=‘con_lf_top_div'，再给他加个动态class名，加上提示和点击进入全屏按钮<template><el-cardshadow="never"class="exam... 继续阅读 >
2021
11-09

Vue3.0 手写放大镜效果

Vue3.0 手写放大镜效果 需要实现的效果是:固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursor 鼠标跟随效果如何实现:(子绝父相)绝对定位+ 修改top,left控制移动 在@vueuse中，有一个工具方法：useMouseInElement<template><divref="target"><h1>Helloworld</h1></div></template><script>import{ref}from'vue'import{useMouseInElement}from'@vueuse/core'export... 继续阅读 >
2021
11-05

vue实现旋转木马动画

本文实例为大家分享了vue实现旋转木马动画的具体代码，供大家参考，具体内容如下图片数量可为任意值都能正常处理[1-无限个]：<!DOCTYPEhtml><html><head><title></title><metacharset="UTF-8"><metahttp-equiv="Access-Control-Allow-Origin"content="*"><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>html,body{font-size:100px;}... 继续阅读 >