分类：Vue

2020
10-06

Vue自定义render统一项目组弹框功能

Vue自定义render统一项目组弹框功能 一、本文收获pick二、为什么要统一封装弹框；要封装成怎样通过举例常规弹框的写法。我们可以体会到，通常要弹出一个页面，需要创建一个页面normalDialog.vue包裹dialogBody.vue（弹框主体）；需要parent.vue设置flag控制弹框显示隐藏，normalDialog.vue关闭的时候设置parent.vue对应flag。缺点：流程繁杂、配置繁琐、不灵活、样式不统一和参数传递麻烦等。如果一个项目弹框较多的时候，弊端将会更明显，大量的isXxx... 继续阅读 >
2020
10-06

Vue使用自定义指令实现拖拽行为实例分析

本文实例讲述了Vue使用自定义指令实现拖拽行为。分享给大家供大家参考，具体如下：需求通过自定义指令的方式实现拖拽效果，预期的使用方式为：<divstyle="background:#f00;width:200px;height:200px;"v-drag>XXXX</div>更重要的一个需求点：拖拽元素内部的子元素可以自行阻止拖拽行为比如：<divstyle="background:#f00;width:200px;height:200px;"v-drag><el-button@mousedown.native.stop>test</el-button... 继续阅读 >
2020
10-06

Vue CLI4 Vue.config.js标准配置(最全注释)

前言：Vue.jsCLI工具不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。安装npmi-dvue-cli-configjs//vue.config.jsconstpath=require('path');constCompressionWebpackPlugin=require("compression-webpack-plugin");//开启gzip压缩，按需引用constproductionGzipExtensions... 继续阅读 >
2020
10-06

Vue路由的模块自动化与统一加载实现

Vue路由的模块自动化与统一加载实现 首先呢，我们来看看一般项目路由是怎么划分的。为什么这么划分呢？如果大项目业务非常多，单纯的单页面很难维护，我们只有这样规范化，才能高效率。模块自动化与统一加载的好处：规范化命名（模块名.业务名.vue）不用每次写页面都要去总路由引入组件接下来，我们实战一波。一、建立项目文件目录以及文件夹根据上面的要求建立，依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功能模块（可以分别创建... 继续阅读 >
2020
10-06

vscode 插件开发 + vue的操作方法

如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作1.把开发好的vue项目打包，如果打包出来的vue执行是空白页，就需要看看之前我写的文章，vue3clie打包配置-这里要注意的是，要确保vue项目里面的public有一个index用作插件打开时的模板，等一下需要做base的特换，不然插件是不知道网页的根目录在哪里index.html-vue.config.js的配置<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp... 继续阅读 >
2020
10-06

vue渲染方式render和template的区别

render函数详解Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中createElement这个函数中有3个参数第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类第三个参数（类型是数组，数组元素类型是VNode，... 继续阅读 >
2020
10-06

Vue 如何使用props、emit实现自定义双向绑定的实现

下面我将使用Vue自带的属性实现简单的双向绑定。下面的例子就是利用了父组件传给子组件（在子组件定义props属性，在父组件的子组件上绑定属性），子组件传给父组件（在子组件使用$emit()属性定义一个触发方法，在父组件上的子组件监听这个事件）。importVuefrom'vueEsm'varCom={name:'Com',props:['val'],template:`<inputtype='text'@input='handleInput'/>`,methods:{handleInput(e){this.$emit("in... 继续阅读 >
2020
10-06

2分钟实现一个Vue实时直播系统的示例代码

2分钟实现一个Vue实时直播系统的示例代码 前言我们在不敲代码的时候可能会去看游戏直播，那么是前台怎么实现的呢？下面我们来讲一下。第一步，购买云直播服务首先，你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱，练手的话，几十块钱就够了。这里我拿阿里云举例，购买完了，配置好推流域名跟播流域名，下面我们将进行地址生成。记住下面生成的地址，下面会用到。第二步，下载本地推流工具https://obsproject.com/第三步，设置OBS在第一步中图片底部有推流地址... 继续阅读 >
2020
10-06

Vue 封装防刷新考试倒计时组件的实现

Vue 封装防刷新考试倒计时组件的实现 本文详细的介绍了防刷新考试倒计时组件，分享给大家，也给自己留个笔记，感兴趣的可以了解下<!--考试倒计时组件--><template><divclass="time"><p>00:{{timerCount2}}:{{timerCount1}}</p><button@click="reset">重新计时</button></div></template><script>exportdefault{name:"Time",data(){return{timeSeconds:0,timeMinutes:0,seconds:59,//秒minutes:1,//分timer:null};},me... 继续阅读 >
2020
10-06

vue使用nprogress加载路由进度条的方法

vue使用nprogress加载路由进度条的方法 1、效果图2、安装npminstall--savenprogress基本用法NProgress.start();NProgress.done();3、在路由中使用importNProgressfrom'nprogress'import'nprogress/nprogress.css'router.beforeEach((to,from,next)=>{NProgress.start();next();});router.afterEach(()=>{NProgress.done();});PS：下面看下Vue使用NProgress的方法NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/... 继续阅读 >
2020
10-05

vue样式穿透 ::v-deep的具体使用

之前在项目中用到了vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在<stylelang="scss"scoped>....</style>中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。百度之后发现可以用/deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错）***。没想到官方文档中其实早就给... 继续阅读 >
2020
10-05

实现一个Vue自定义指令懒加载的方法示例

在项目中如果有大量的图片需要加载的时候，就可以考虑使用懒加载了，懒加载其实就是监听浏览器的滚动，当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听。实现的方法也比较简单，可以通过懒加载的插件实现，也可以手写，手写通过vue自定义指令来实现，一般情况自定义指令用的也不多，比较vue自带的就够用了，大型复杂的项目的可能用的多。什么是图片懒加载当我们向下滚动的时候图片资源才被请求到，这也就是我们本... 继续阅读 >
2020
10-05

vue webpack build资源相对路径的问题及解决方法

vue webpack build资源相对路径的问题及解决方法 默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的，即static在根目录下，如果部署到带有文件夹目录的项目中，资源路径就会出错。如图：解决方法:在webpack.prod.conf.js中，output中添加或者修改为publicPath:‘./'；output:{publicPath:'./',path:config.build.assetsRoot,filename:utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename:utils.assetsPath('js/[id].[chunkhash].js')},这是修改... 继续阅读 >
2020
10-04

Vue + element 实现多选框组并保存已选id集合的示例代码

Vue + element 实现多选框组并保存已选id集合的示例代码 Vue+element实现列表复选框并保存已选id集合1.引用element组件多选框组，checkList为提交后台数据得数组，tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选框组上添加chang事件tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',... 继续阅读 >