分类：Vue

2020
12-22

Vue——前端生成二维码的示例

与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，vue-qr比qrcode多了一个再中间添加logo的功能。方式一：qrcodenpmnpminstall--saveqrcodejs2importimportQRCodefrom'qrcodejs2'使用<divclass="qrcode"ref="qrCodeUrl"></div> <script>methods:{    creatQrCode(){        var... 继续阅读 >
2020
12-22

如何在vue中使用kindeditor富文本编辑器

第一步，下载依赖yarnaddkindeditor第二步，建立kindeditor.vue组件<template><divclass="kindeditor"><textarea:id="id"name="content"v-model="outContent"></textarea></div></template><script>import'../../node_modules/kindeditor/kindeditor-all.js'import'../../node_modules/kindeditor/lang/zh-CN.js'import'../../node_modules/kindeditor/themes/default/default.css'exportdefault{name:'kindeditor... 继续阅读 >
2020
12-22

vue 在服务器端直接修改请求的接口地址

一个项目可能有很多环境，开发，测试，预生产，生产等环境，如果每一个环境都需要重新打包会显得比较麻烦，那么如何解决这个问题呢在vue和uniapp中以及其他框架下的都是可以按照如下操作来解决的在静态资源下新建一个env.json,vue项目是在public文件下新建，uniapp是在static下新建文件文件格式如下{"name":"development","base":"/customer"}name，代表的是环境，方便直接在服务器上查看当前是什么环境的，base是请求的地址... 继续阅读 >
2020
12-22

vue 通过base64实现图片下载功能

1.使用场景当我们处理图片下载功能的时候，如果本地的图片，那么是可以通过canvas获得图片的base64的，方法如下。但是如果图片的url存在跨域问题的话，下面的方法将行不通，这时候我们可以另辟蹊径，将后台的同学，将图片以base64的形式进行返回。functiongetBase64(url){//通过构造函数来创建的img实例，在赋予src值后就会立刻下载图片，相比createElement()创建<img>省去了append()，也就避免了文档冗余和污染var... 继续阅读 >
2020
12-22

Vue中computed和watch有哪些区别

计算属性computed：支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed如果computed属性属性值是函数，... 继续阅读 >
2020
12-18

Vue实现指令式动态追加小球动画组件的步骤

1.小球组件我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-uitemplate模板<template><divclass="ball-wrapper"><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"name="ball"><divclass="ball"ref="ball"v-show="ballShow"><divclass="inner">... 继续阅读 >
2020
12-17

vue 数据操作相关总结

vue中有很多有关数据的操作方法，比如父子组件数据的传递，子组件修改父组件数据，props,computed,watch,sync等，今天就来总结一下这些操作方法的使用computed是计算属性computed是计算属性：减少模板{{}}的复杂度。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性把复杂的运算逻辑写到computed的函数里面，再在模板里引用就使逻辑变得简单明了了使用方法：computed与data并列，将一系... 继续阅读 >
2020
12-17

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称,{data:组件数据,template:组件模板内容})全局组件注册应用组件创建：Vue.component('button-counter',{data:function(){return{count:0}},template:'<button@click="handle">点击了{{count}}次</button>',methods:{handle:function(){this.count++;}}})varvm=newVue({el... 继续阅读 >
2020
12-17

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称,{data:组件数据,template:组件模板内容})全局组件注册应用组件创建：Vue.component('button-counter',{data:function(){return{count:0}},template:'<button@click="handle">点击了{{count}}次</button>',methods:{handle:function(){this.count++;}}})varvm=newVue({el... 继续阅读 >
2020
12-16

vue图片裁剪插件vue-cropper使用方法详解

vue图片裁剪插件vue-cropper使用方法详解 本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，我这里采用了4:3的固定比例进行裁剪，裁剪后的效果但是裁剪后的图片路径是base64，超级长的路径，最终还是需要处理地址传给后端的，项目用oss处理图片，最... 继续阅读 >
2020
12-16

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解 1.如果只使用config配置的相关js接口可采用如下方式引入执行npmweixin-sdk-js--save局部引入在vue页面中importwxfrom'weixin-sdk-js';全局引入在vue的main.js页面中引入后编写到vue原型链上，然后全局调用importwxfrom"weixin-sdk-js";Vue.prototype.$wx=wx;2.如果要使用agentConfig配置的相关接口一定不要执行npm命令引入，如果执行了npm命令，请执行卸载指令npmuninstallweixin-sdk-js--save，然后在vu... 继续阅读 >
2020
12-16

Vue解决移动端弹窗滚动穿透问题

一、问题描述在移动端的H5页面中，我们经常会遇到“点击按钮-->弹窗-->选择选项”这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下拖动滚动条时，滚动动作会出现穿透，这时候底部的body也会一起滚动。问题总结：内容在滚动到容器的顶部或者底部时，再向上或向下强行滚动，则出现滚动穿透二、解决方案思考参考了网上一大堆的解决方法，大可分为三类方法。经过认真的思考和分析，个人的... 继续阅读 >
2020
12-15

8个非常实用的Vue自定义指令

本文在github做了收录github.com/Michael-lzg…demo源码地址github.com/Michael-lzg…在Vue，除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive(id,[definition])方式注册全局指令。然后在入口文件中进行Vue.use()调用。... 继续阅读 >
2020
12-15

vue的hash值原理也是table切换实例代码

vue的hash值原理也是table切换实例代码 我希望大家敲一遍<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>.pages>div{display:none;}</style></head><body><p><ahref="#/"rel="externalnofollow">aaa</a><ahref="#/about"rel="externalnofollow">bbb</a><ahref="#/user"rel="externalnofollow">cccc</a></p><divclass="pages"><divid="home">首页</div><divid="about">关于我的页面</div>... 继续阅读 >
2020
12-14

Vue如何跨组件传递Slot的实现

在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节点的Slot如传递给子组件呢?我们在开发过程中，希望可以这样实现重新定义叶子节点的结构：<data-tree><templatev-slot:node="data"><div>{{data.title}}-{{data.text}}</div></template></data-tree>那么如何在组件内传递Slot就是一个问题... 继续阅读 >
2020
12-14

VUE中鼠标滚轮使div左右滚动的方法详解

前言技术点：addEventListener/attachEvent(传递参数)功能描述：鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动一、单个实现1.定义变量data(){return{domObj:null}}2.编写方法绑定事件scrollFunction(){this.domObj=document.getElementById('ceshi')//通过id获取要设置的divif(this.domObj.attachEvent){//IEthis.domObj.attachEvent('onmousewheel',this.mouseScroll)}elseif(t... 继续阅读 >