vue
文章平均质量分 55
Joshua02
这个作者很懒,什么都没留下…
展开
-
用vue styleguidist 写组件文档
使用vue styleguidist编写组件文档原创 2022-06-23 11:32:53 · 975 阅读 · 0 评论 -
vue 使用wangEditor
1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue2、封装组件 MyEditor.vue, (这里是通过props content 将展示内容传入)<template> <div> <div style="border: 1px solid #ccc; margin-top: 10px"> <!-- 工具栏 -->原创 2022-05-19 16:09:59 · 13193 阅读 · 2 评论 -
vue自定义指令, 之dialog可拖拽指令封装
自定义指令这里以dialog可拖拽指令举例1、先在src中创建文件夹 directives,其中建两个文件,一个index.js,一个自定义指令文件// index.js 自定义指令 import draggable from '@/directives/draggable'; // 可拖拽指令 export default app => { app.directive('draggable', draggable)}// draggable.jsconst dra原创 2022-05-19 10:44:23 · 892 阅读 · 0 评论 -
vue select 下拉加载更多(懒加载)
为避免后端一次给过多数据,导致页面卡顿,select选项可以进行分页,然后下拉加载更多.项目中使用的elementUI, 先自定义指令,在main.js中添加:v-scroll-loadMore="loadmore"Vue.directive('scroll-loadMore', { bind(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-d原创 2022-02-17 11:17:05 · 2904 阅读 · 0 评论 -
前端开发性能优化 gzip压缩
vue-cli项目打包,js和css都会被webpack打包,但是不经过压缩的包,可能有好几兆,首页下载速度极慢,影响体验,可以考虑gzip压缩。(亲测,一个chunk.js 977k ,压缩到了 155k)接下来看要如何进行gzip压缩配置gzip压缩方式1.静态压缩由于项目是通过vue-cli搭建的,所以就直接通过webpack来配置了。如果没有默认安装compress-webpack-plugin插件,请先安装。npmi-Dcompress-webpack-plugin...原创 2022-01-14 11:40:02 · 371 阅读 · 0 评论 -
element table checkbox 显示与隐藏
table表头中,全选复选框的隐藏,可以使用:header-cell-class-name,例如:<el-table border ref="multipleTable" :header-cell-class-name="headerCellClass"> <el-table-column type="index" label="序号" width="60" align="center"></el-table-column> <el-.原创 2021-01-20 17:33:37 · 4435 阅读 · 1 评论 -
vue 从后台获取文件流 导出excel
<template> <div class="container" ref="loadElement"> </div></template>import axios from 'axios'export default { post(url, param, title) { axios.post(url...原创 2019-04-09 10:21:01 · 7608 阅读 · 2 评论 -
element DateTimePicker 结束时间不能小于开始时间(开始时间不能小于当前时间)
html<el-form-item label="开始时间" prop="startTime"> <el-date-picker v-model="form.startTime" type="datetime" class="inputw" :picker-options="pickerOptionsStart"原创 2019-03-04 17:07:13 · 12266 阅读 · 3 评论 -
iview select选中的值 与option不符
这是<Option v-for="option(item,index) in items" :key="index"中的key的问题导致的,(也可能是没有写:key="index",注意,必须写)key根据键值对定位元素,如果index索引只代表一个元素就不会出现重复,否则就出异常(例如:选中与显示的值不符)。解决办法key="index"替换成 key="只代表唯一含义的属性...原创 2019-02-20 09:32:52 · 1798 阅读 · 0 评论 -
vue项目 生成二维码,pdfjs生成PDF并下载
一 首先安装依赖npm install qrcodejs2 --savenpm install jspdf --save qrcode用于生成二维码,jspdf用于生成pdf 以及pdf的下载 二 项目中使用先引入import QRCode from 'qrcodejs2';import JsPDF from 'jspdf';页面代码(一个空div,用来放置ca...原创 2019-01-17 13:03:12 · 3625 阅读 · 3 评论 -
vue中判断数组长度length报错
{{pawnList.length>0 ? pawnList.name : ''}}报错:Error in render: "TypeError: Cannot read property 'length' of undefined" 解决办法:{{pawnList!== undefined && pawnList!== null && p...原创 2018-11-22 10:19:13 · 42213 阅读 · 3 评论 -
Laravel框架中缩小webpack打包vue js的体积
转载,原文: Laravel框架中缩小Vue应用的体积 https://www.codercto.com/a/12720.htmllaravel中 webpack打包生成的app.js居然有3M,生成的production版也有1.4M,放到服务器上,首页打开要十几秒(1M带宽)。于是探究起如何缩小应用体积。定位导致应用体积大的原因这里使用 webpack-bundle-analyze...转载 2018-10-10 14:11:08 · 1647 阅读 · 0 评论 -
vue 图片裁剪上传组件
vue-image-crop-uploadgithub:https://github.com/dai-siki/vue-image-crop-upload里面中文文档,使用示例写的很清楚,不在赘述原创 2018-09-12 10:33:31 · 1422 阅读 · 0 评论