前端 - 简忆博客

Vue组件如何赋值给父组件

在vue项目开发中，我们遇到重复的代码，就可以封装成组件，这就设计到组件之间的获取值和赋值问题，我们可以通过以下方式传递值给父组件页面。1、子组件赋值：使用this.$emit()this.$emit('tran','HelloWord')2、父组件页面绑定方法获取值3、父组件获取到值之后赋值 exportdefault{ data(){ return{ addForm:{ ad_img:'', }, } }, components:{ UploadPhotos }, methods:{ getUser(e){ this.addForm.ad_img=e } } }

vue-quill-editor安装多图上传插件

13小时前

15 0

vue-quill-editor的是使用、安装这里不多说，需要的话可以使用参考这篇文章vue-quill-editor默认只能使用单图上传，很不方便，这里教大家如何安装多图上传插件quill-image-drop-module，就可多张拖拽上传1、安装npminstallquill-image-drop-module2、页面引入import{ImageDrop}from'quill-image-drop-module'; Quill.register('modules/imageDrop',ImageDrop);在editorOption的modules里配置：imageDrop:true,

关于vue echarts二次渲染不渲染问题的解决方法

4天前

115 0

vue中用了echarts数据统计图，发现动态赋值不显示，对于不渲染问题，我们只需在methods方法下重新渲染即可解决该问题前端代码： js代码： import*asechartsfrom'echarts'; methods:{ asyncgetSys(){ const{data:res}=awaitthis.$http.get('system') if(res.code!=200){ this.$message.error(res.msg) } this.countVip=res.data.countVip console.log(this.countVip.num) //绘制图表 varmyChart=echarts.init(document.getElementById('main')); myChart.setOption({ title:{ text:'日期' }, tooltip:{}, xAxis:{ data:this.countVip.date, axisLabel:{ interval:0, rotate:30 }, }, yAxis:{}, series:[{ name:'人数', type:'bar', data:this.countVip.num }] },true); } }

vue ElementUI使用时间日期、时间选择器的使用方法

4天前

41 0

效果展示：vue ElementUI提供了三种时间日期1、TimePicker 时间选择器：用于选择或输入日期2、DatePicker 日期选择器：用于选择或输入日期3、DateTimePicker：日期时间选择器，在同一个选择器里选择日期和时间本文主要用到DateTimePicker 日期时间选择器

解决vue-animate-number后端返回数据不渲染问题

5天前

91 0

最近开发中用到了vue-animate-number组件，发现数据不能通过接口返回的值自动渲染。代码如下看似没什么问题，后面才发现没加上:key="countArt"的原因，加上之后就能正确渲染了

Vue+elementUI如何使用文件Upload 上传文件

6天前

110 0

vue+elementUI实现上传案例实现对图片进行移除、上传、修改、点击图片对图片进行预览1、html代码部分点击上传保存取消确定 2、JavaScript代码部分 exportdefault{ data(){ return{ setupForm:{ logo:'', }, //上传图片地址 uploadURL:domain+'upload', //图片上传请求头 headerObj:{token:window.localStorage.getItem('token')}, fileList1:[], //上传附带额外参数 otherData:{ path:'setup' }, previewDialogVisible:false, PreviewPath:'', } }, created(){ }, methods:{ asyncsaveSetup(){ const{data:res}=awaitthis.$http.post('config/saveSys',this.setupForm) if(res.code!=200){ returnthis.$message.error(res.msg) } this.$message.success(res.msg) }, //处理移除图片的操作 handleRemove1(file){ this.setupForm.logo='' }, //监听处理图片上传成功 handleSuccess2(response){ this.setupForm.logo=response.data.path }, //处理编辑移除图片的操作 handleEditRemove2(file){ this.setupForm.logo='' }, //监听处理编辑图片上传成功 handleEditSuccess2(response){ this.setupForm.logo=response.data.path //console.log(this.addForm) }, //处理图片预览效果 handlePreview(file){ this.previewDialogVisible=true this.PreviewPath=file.url console.log(file.url); }, } } 更多上传参数介绍详看组件文档：https://element.eleme.cn/#/zh-CN/component/upload

Vue ElementUI 表格实现loading加载动画效果

8天前

109 0

我们在使用表格的时候，有时由于后端接口或者是网络慢等问题，会出现请求接口数据慢问题，这时我们就可以给表格加个loading加载动画，接口请求成功之后再关闭loading动画效果。ElementUI表格动画主要用到v-loading="loading"1、首先在表格中加入属性：v-loading="loading" 2、在data定义默认值，加载成功之后关闭动画 exportdefault{ data(){ return{ loading:true, } } //请求成功之后关闭加载动画 methods:{ asyncgetUserList(){ const{data:res}=awaitthis.$http.get('/admin/index',{params:this.queryInfo}) if(res.code!=200){ returnthis.$message.error('获取用户列表失败') } this.loading=false //console.log(res.data.current_page) this.UserList=res.data.data this.total=res.data.total this.queryInfo.pagenum=res.data.current_page }, created(){ this.getUserList() }, methods:{ asyncgetUserList(){ const{data:res}=awaitthis.$http.get('/admin/index',{params:this.queryInfo}) if(res.code!=200){ returnthis.$message.error('获取用户列表失败') } this.loading=false this.UserList=res.data.data }, }

vue ElementUI Cascader 级联选择器使用方法

8天前

139 0

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。1、前端代码：参数说明：1、expand-trigger="hover"定义展开子级菜单的触发方式，click和hover2、:options="parentCateList"数据集3、:props="cascaderProps" 数据格式指定4、v-model="selectedKeys"选中的值，数组5、@change="parentCateChanged"点击后的值，结果为数组6、clearable清除按钮7、change-on-select启用该功能后，可让父子节点取消关联，选择任意一级选项。2、js代码 exportdefault{ data(){ return{ //控制添加权限对话框的显示和隐藏 addDialogVisible:false, //添加权限的表单数据 addForm:{ pid:'', }, //控制修改权限对话框的显示和隐藏 editDialogVisible:false, //查询到权限信息对象 editForm:[], parentCateList:[], cascaderProps:{ value:'id', label:'name', children:'children', }, //选中的父集分类的id数组 selectedKeys:[], } }, created(){ //获取所有菜单 this.getParentCateList() }, methods:{ //监听添加对话框关闭时间 addDialogClosed(){ this.$refs.addFormRef.resetFields() this.selectedKeys=[]; this.addForm.pid=0 }, //监听编辑权限对话框关闭时间 editDialogClosed(){ this.$refs.editFormRef.resetFields() this.selectedKeys=[]; this.editForm.pid=0 }, //获取父级分类列表 asyncgetParentCateList(){ const{data:res}=awaitthis.$http.get('permission/permissionMenu') //console.log(res); if(res.code!=200){ returnthis.$message.error(res.msg) }else{ this.parentCateList=res.data } }, //选择发生变化触发这个函数 parentCateChanged(){ //console.log(this.selectedKeys); if(this.selectedKeys.length>0){ //父级分类的id this.addForm.pid=this.selectedKeys[ this.selectedKeys.length-1 ] //父级分类edit的id this.editForm.pid=this.selectedKeys[ this.selectedKeys.length-1 ] }else{ this.addForm.pid=0 } }, } } 3、css代码 .el-cascader{ width:100%; } 4、层级数据集格式如下：5、结果展示

vue-table-with-tree-grid参数大全、参数配置

9天前

83 0

vue-table-with-tree-grid参数大全、参数配置，供大家参考使用1、安装：npm:npmivue-table-with-tree-grid-Syarn:yarnaddvue-table-with-tree-grid2、引入Vue.use(ZkTable)OrimportVuefrom'vue' importZkTablefrom'vue-table-with-tree-grid' Vue.component(ZkTable.name,ZkTable)3、API参数：属性说明类型参数默认值data表格各行的数据Array-[]empty-text表格数据为空时显示的文字String-'暂无数据'columns表格各列的配置（具体见下文：Columns Configs）Array-[]show-header是否显示表头Boolean-trueshow-index是否显示数据索引Boolean-falseindex-text数据索引名称String-'序号'show-summary是否显示表尾合计行Boolean-falsesum-text表尾合计行首列名称String-'合计'summary-method表尾合计行计算方法Functiondata, column, columnIndex-max-height最大高度[String, Number]-'auto'stripe是否显示间隔斑马纹Boolean-falseborder是否显示纵向边框Boolean-falseshow-row-hover鼠标悬停时，是否高亮当前行Boolean-truetree-type是否为树形表格Boolean-falsechildren-prop树形表格中遍历的属性名称String-'children'is-fold树形表格中父级是否默认折叠Boolean-trueexpand-type是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)Boolean-falseselection-type是否为多选类型表格Boolean-falserow-key行数据的 Key，用来优化 Table 的渲染Functionrow, rowIndexrowIndexrow-class-name额外的表格行的类名String, Functionrow, rowIndex-cell-class-name额外的表格行的类名String, Functionrow, rowIndex, column, columnIndex-row-style额外的表格行的样式Object, Functionrow, rowIndex-cell-style额外的表格单元格的样式Object, Functionrow, rowIndex, column, columnIndex-4、 column配置属性说明类型默认值label列标题名称String''prop对应列内容的属性名String''align对应列内容的对齐方式，可选值有 'center', 'right'String'left'headerAlign对应列标题的对齐方式，可选值有 'center', 'right'String'left'width列宽度[String, Number]'auto'minWidth列最小宽度[String, Number]'80px'type列类型，可选值有 'template'(自定义列模板)String''template列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称String''5、Table事件事件名说明参数cell-click单击某一单元格row, rowIndex, column, columnIndex, $eventcell-dblclick双击某一单元格row, rowIndex, column, columnIndex, $eventcell-contextmenu在某一单元格上点击鼠标右键row, rowIndex, column, columnIndex, $eventcell-mouseenter鼠标滑入某一单元格row, rowIndex, column, columnIndex, $eventcell-mouseleave鼠标滑出某一单元格row, rowIndex, column, columnIndex, $eventrow-click单击某一行row, rowIndex, $eventrow-dblclick双击某一行row, rowIndex, $eventrow-contextmenu在某一行上点击鼠标右键row, rowIndex, $eventrow-mouseenter鼠标滑入某一行row, rowIndex, $eventrow-mouseleave鼠标滑出某一行row, rowIndex, $eventcheckbox-click鼠标单击checkboxrow, rowIndex, $eventtree-icon-click鼠标单击树形iconrow, rowIndex, $eventexpand-cell-click鼠标单击展开单元格row, rowIndex, $event6、Table方法方法名说明参数getCheckedProp当表格为多选类型表格时，用于获取当前所选项的属性，返回一个数组；属性默认为'index'。prop

在vue中引入echarts方法，echarts5版本的引用方法

11天前

145 0

1、ECharts 5 新特性数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。除了动态排序图，Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。2、vue中引入echarts5方法2.1安装echarts5插件npminstallecharts-S 或者使用淘宝的镜像 npminstall-gcnpm--registry=https://registry.npm.taobao.org cnpminstallecharts-S2.2、引入已安装插件 import*asechartsfrom'echarts'; exportdefault{ //此时页面上的元素已被渲染完毕 mounted(){ //基于准备好的dom，初始化echarts实例 varmyChart=echarts.init(document.getElementById('main')); //绘制图表 myChart.setOption({ title:{ text:'ECharts入门示例' }, tooltip:{}, xAxis:{ data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[5,20,36,10,10,20] }] }); } } 3、效果展示

vue-animate-number数字滚动插件的使用

11天前

145 0

vue中加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件，介绍给大家1、安装vue-animate-number插件npminstallvue-animate-number2、引入插件，在main.js中引入importVueAnimateNumberfrom'vue-animate-number' Vue.use(VueAnimateNumber)3、使用方法4、案例文章日记

在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets

14天前

118 0

在vscode中添加.vue文件自动补全插件：1、安装插件：HTML Snippets，搜索我们要安装的插件2、安装成功之后，配置插件：右击右下角的设置按钮-setting3、搜索配置：files.associations，并新增配置4、添加*.vue和html，如下图这样vue文件就能自动补全代码了。

vscode安装微信小程序开发工具插件

18天前

138 0

点击左边安装插件，搜索微信没，然后点击安装微信小程序开发工具提供模拟器、预览、打包上传、代码补全、语法高亮、项目模版等功能，部分功能开发中。命令MiniProgram: Simulator - 启动模拟器MiniProgram: Create - 创建新的小程序MiniProgram: Preview - 预览小程序MiniProgram: Upload - 打包并上传小程序，完成后在微信小程序后台发布MiniProgram: Build NPM - 构建 NPMMiniProgram: Config - 项目配置功能代码补全与语法高亮支持小程序 API 的代码补全支持 WXML 中组件的代码补全支持 WXML WXSS WXS 的语法高亮支持快速创建 Page 及 Component预览和上传小程序支持设置小程序上传目录支持扫码预览小程序支持小程序打包并上传到微信后台项目设置支持查看和修改项目配置支持构建 npm支持查看开发文档主题提供 Dark 和 Light 两种主题组件支持支持点击自定义组件跳转到对应文件支持点击绑定的函数名跳转到对应函数定义小程序项目模板

Thinkphp6实现Excel导入功能

22天前

95 0

tp6实现Excel导入很简单，实现步骤如下：1、使用composer安装PHPExcelcomposerrequirephpoffice/phpexcel2、执行composer更新composerupdate3、代码实现

解决Bootstrap dropdown-menu一级不能不能点击

2021-06-12

223 0

用了dropdown-menu组件，存在一个问题，如果你的菜单带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能那该如何解决呢？解决方法如下，加入下面的一段js代码即可$(document).on("click",".dropdown-toggle",function(){ if($(window).width() >767){ if($(this).attr('href'))window.location=$(this).attr('href'); } });

Layui颜色选择器的使用，如何使用layui的颜色选择器

2021-06-11

183 0

效果展示：在使用layui框架的时候，我们有时候需要设置文本颜色，比如标题等，我们会设置一个字段来存储标题颜色，这回就可以使用到Layui自带的颜色选择器了，使用方法如下：html代码部分：颜色 js代码部分： layui.use(['form','layer','colorpicker'],function(){ varform=layui.form, layer=layui.layer, colorpicker=layui.colorpicker, $=layui.$; //颜色 colorpicker.render({ elem:'#test-form' ,color:'#626061' ,done:function(color){ $('#test-form-input').val(color); } }); });

uniapp判断平台场景

2021-05-16

261 0

开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。在开发项目过程中，有时想判断平台如何判断呢？平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。//#ifdefH5 alert("只有h5平台才有alert方法") //#endif如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。运行期判断运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。switch(uni.getSystemInfoSync().platform){ case'android': console.log('运行Android上') break; case'ios': console.log('运行iOS上') break; default: console.log('运行在开发者工具上') break; }

uniapp预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:

2021-05-15

294 0

20:49:47.904 开始差量编译...20:49:48.601 预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:20:49:48.611 https://ext.dcloud.net.cn/plugin?name=compile-node-sass at components\yy-video-player\yy-video-player.nvue:120:49:48.613 文件查找失败：'@./util/yy-video-player.nvue' at main.js:5引入一个视频播放插件，报上面的错误。导致出现上述现象的原因是未安装相关编译器。解决方法：1、打开HBuilderX，点击工具选项，然后点击插件安装2、切换到安装新的插件，前往插件市场安装3、找到“scss/sass编译”插件，进入下载界面，有“使用HBuilderX导入插件”和“下载插件zip”两种方式，请注意后面的注意事项。这里以下载压缩包为例子，安装步骤如下按照上面下载步骤及安装步骤，把文件解压并放到HBuilderX\plugins目录下，重启之后，即可看到已安装好该插件。

Layui 如何使用tab选项卡

2021-05-14

282 0

layui选项卡通过 element模块的监听tab事件来进行切换操作，元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。例子：网站设置商品管理订单管理内容1 内容2 内容3 js代码：引入elementlayui.use('element',function(){ varelement=layui.element; //一些事件触发 element.on('tab(demo)',function(data){ console.log(data); }); });

h5基于cropper实现上传图片裁剪功能

2021-05-09

267 0

基于cropper实现上传图片裁剪功能，保存原始图片尺寸分辨率，具体代码如下： 66 替换封面确定取消 functioncancel_model3(){ $('#mask3').css("display",'none'); $('#model3').css("display",'none'); } $("#clipImg").on("click",function(){ varcas=$("#photo").cropper('getCroppedCanvas'); varbase64url=cas.toDataURL('image/jpeg'); console.log(base64url);//生成base64图片的格式 }); functionsubmitMessage(){ $('#mask').css("display",'none') $('#model').css("display",'none') } functionreplaceBackground(){ $('#mask2').css("display",'block'); $('#model2').css("display",'block'); } document.querySelector('#file').addEventListener('change',function(e){ varfile=this.files[0]; if(file.type.indexOf("image")==0){ varreader=newFileReader(); reader.readAsDataURL(file); reader.onload=function(e){ //图片base64化 varnewUrl=this.result; //console.log(newUrl) $("#cover_img").attr("src",newUrl); $('#mask3').css("display",'block'); $('#model3').css("display",'block'); varoptions={ aspectRatio:350/350, dragMode:'move', viewMode:1, cropBoxResizable:false, preview:'.img-preview', } $("#photo") .cropper('destroy')//销毁旧的裁剪区域 .attr('src',newUrl)//重新设置图片路径 .cropper(options)//重新初始化裁剪区域 }; } },false); 效果展示：附件下载：https://qiniu.tpxhm.top/code/h5CanvasCropper.zip

h5画布canvas实现图片在线裁剪功能及案例

2021-05-09

251 0

有时用户上传的图片尺寸和我们要求的尺寸不一样。这时就需要给上传图片加个裁剪功能。具体我们可以通过画布来实现：上传图片裁剪 html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; } .toBar{ width:100%; padding:15px; -webkit-box-sizing:border-box; box-sizing:border-box; position:absolute; left:0; top:0; z-index:1; } .toBarlabelinput{ display:none; } .toBarlabel,.toBarbutton{ display:inline-block; width:100px; text-align:center; padding:10px0; font-size:12px; color:#fff; background:#8080ca; border-radius:6px; cursor:pointer; } .toBarbutton{ border:none; float:right; } .img_content,canvas{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } canvas{ border:1pxsolid#333; } 选择图片使用 window.addEventListener("load",function(){ var$input=document.querySelector("input"); var$img=document.querySelector("img"); var$canvas=document.querySelector("canvas"); //选择图片 $input.addEventListener("change",function(){ $img.src=getFileUrl(this); },false); varmyCrop; require(["jquery",'hammer','tomPlugin',"tomLib",'hammer.fake','hammer.showtouch'],function($,hammer,plugin,T){ document.addEventListener("touchmove",function(e){ e.preventDefault(); }); varopts={ cropWidth:$canvas.width, cropHeight:$canvas.height }, previewStyle={ x:0, y:0, scale:1, rotate:0, ratio:1 }, transform=T.prefixStyle("transform"), myCrop=T.cropImage({ bindFile:$("input"), enableRatio:false,//是否启用高清,高清得到的图片会比较大 canvas:$canvas,//放一个canvas对象 cropWidth:opts.cropWidth,//剪切大小 cropHeight:opts.cropHeight, bindPreview:$("img"),//绑定一个预览的img标签 useHammer:true,//是否使用hammer手势，否的话将不支持缩放 oninit:function(){ }, onLoad:function(data){ //用户每次选择图片后执行回调 resetUserOpts(); previewStyle.ratio=data.ratio; $("img").attr("src",data.originSrc).css({ width:data.width, height:data.height }).css(transform,'scale('+1/previewStyle.ratio+')'); myCrop.setCropStyle(previewStyle) } }); functionresetUserOpts(){ $("canvas").hammer('reset'); previewStyle={ scale:1, x:0, y:0, rotate:0 }; $("img").attr("src",''); }; $("canvas").hammer({ gestureCb:function(o){ //每次缩放拖拽的回调 $.extend(previewStyle,o); console.log("用户修改图片",previewStyle) $("img").css(transform,"translate3d("+previewStyle.x+'px,'+previewStyle.y+"px,0)rotate("+previewStyle.rotate+"deg)scale("+(previewStyle.scale/previewStyle.ratio)+")") } }); $("button").on("click",function(){ myCrop.setCropStyle(previewStyle) varsrc=myCrop.getCropFile({}); console.log(src) //window.location.href=src; }); }); },false); 附件：相关demo及js文件下载：https://qiniu.tpxhm.top/code/h5CanvasImg.zip最终效果展示：

uniapp通过设置navigationStyle隐藏头部导航

2021-05-05

295 0

navigationStyle导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏{ "pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/index/index", "style":{ "navigationBarTitleText":"", "backgroundColor":"#4CD964" } } ], "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8", "navigationStyle":"custom" } }