Vue2.x
关注
分享
扫一扫
与vue2.x有关的博文
公孙元二
如果你看到这句话，幸运值+1
展开
-
vue封装请求 获取上传文件进度及设置超时时间
效果图：/utils/request.js// 上传文件export function uploadFile({url, data, timeout, callback}) { timeout ? service.defaults.timeout = timeout : '' return service.post(url, data, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress原创 2022-05-25 22:30:22 · 3332 阅读 · 0 评论 -
vue .sync修饰符 - 个人笔记
如果想在子组件中修改父组件的props属性，一般这么做：子组件：props:{ title:{ type: String }},methods:{ changeTitle(){ // 当子组件想应用父组件的时候 this.$emit('update:title', '新标题') }}父组件：<document :title="title" @update-title="title = $event"></document>如果用上.sync可原创 2022-05-22 23:28:11 · 228 阅读 · 0 评论 -
若可框架，关于dicts字典的用法
src\api\system\dict\data.js// 根据字典类型查询字典数据信息export function getDicts(dictType) { return request({ url: '/system/dict/data/type/' + dictType, method: 'get' })}main.jsimport { getDicts } from "@/api/system/dict/data";// 全局方法挂载Vue.prototy原创 2022-05-15 23:15:26 · 2567 阅读 · 0 评论 -
vue实现按钮权限控制
需求管理端设置页面浏览权限和按钮使用权限，如果用户没有某个按钮的权限，则隐藏该按钮。实现原理主要方式是在el-button按钮上设置标签数值，利用vue的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限列表进行匹配，如果匹配成功，证明用户拥有该按钮的使用权限，如果发现没有使用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。代码src/directive/permission/hasPermi.jsimport store from '@/store'原创 2022-05-15 23:00:00 · 8467 阅读 · 2 评论 -
vue 封装文件上传/下载请求方法
效果图：xxx.vue <el-descriptions class="margin-top" title="" :column="1" :size="serverPackageFormSize" border> <template slot="extra"> <el-upload ref="uploader" class="upload-demo"原创 2022-05-13 15:58:20 · 567 阅读 · 0 评论 -
vue vue-router路由参数可选，可传可不传
vue中的路由有时候需要参数，有时候不需要参数，可以如下图写法在path中，在可选参数后面加一个?就行了转载 2022-05-05 21:55:35 · 1213 阅读 · 0 评论 -
vue父组件列表删除子组件
在子组件中点击“删除按钮”，删除对应的子组件Parent.vue<template> <div> <children v-for="(item,index) in arr" :key="index" :index="index" @remove="remove"> </children> </div></template><scrip原创 2022-05-05 21:49:17 · 2552 阅读 · 1 评论 -
vue filters过滤器传2个或多个参数
传一个参数{{aa | filterAa}}filters:{ filterAa(aa){ // 这个aa就是过滤器传入的参数 }}传2个参数{{aa | filterAa(bb)}}filters:{ filterAa(aa,bb){ // 这额aa就是过滤器传入的第一个参数 // 这额bb就是过滤器传入的第二个参数 }}传3个参数{{aa | filterAa(bb,cc)}}filters:{ filterAa(aa原创 2022-05-05 10:44:44 · 4051 阅读 · 0 评论 -
vue 设置responseType:Blob之后，如何获取接口返回的json错误信息
最近做了一个文件预览和下载功能，于是设置了responseType: Blob的方式， 什么是Blob呢，MDN官方解释：Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据（https://developer.mozilla.org/zh-CN/docs/Web/API/Blob）具体请求如下：utils/request.js// 获取文件流export function getFileStream(url) { return serv原创 2022-04-28 11:36:36 · 4184 阅读 · 1 评论 -
pdf.js出现bug：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239“
从接口拿到的文件流：1.响应头：2.请求头：原因：接收到文件流后，格式不对导致pdf.js无法流量。解决方案：收到文件流后，使用响应的数据创建一个 blob，然后使用该 blob 创建一个 url。 const blob = new Blob([data], {type: 'application/pdf'})// data为文件流数据 let url = window.URL.createObjectURL(blob)我的代码案例：src/utils/request.jsi原创 2022-04-26 13:57:38 · 4502 阅读 · 0 评论 -
office、pdf、图片的文件类型有哪些
const fileFormat = ['image/jpeg','image/png','application/msword','application/vnd.ms-excel','application/pdf','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','ap原创 2022-04-19 09:17:19 · 697 阅读 · 0 评论 -
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
版本冲突导致解决方法1、npm uninstall node-sass2、npm i -D sass3、npm run dev转载 2022-04-11 15:37:32 · 1298 阅读 · 0 评论 -
cnpm的安装教程
新电脑或者重装系统的电脑下载nodejs后，电脑只能执行npm命令，无法执行cnpm命令，此时就需要按照一下cnpm：打开cmd执行如下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org输入cnpm -v ，查看是否安装正常：...原创 2022-04-11 15:17:32 · 14049 阅读 · 0 评论 -
vue封装文件上传函数,返回onUpdateProgress(promise和callback组合)
需求：编写一个文件上传函数，使得能够返回文件的上传进度经过查询发现axios中有onUpdateProgress监听文件上传。实践如下：src/utils/upload.jsimport axios from 'axios'import { getToken } from '@/utils/auth'export function upload_test(url, data, callback) { return new Promise((resolve, reject) => {原创 2022-04-08 15:17:05 · 1149 阅读 · 0 评论 -
js setInterval+setTimeout定时器轮询+终止轮询
常见的轮询方式： window.timer = setInterval(()=>{ this.promiseFun() },1000)大家一般都会使用setInterval，但要注意单纯使用它可能导致页面卡死。原因是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，卡死。但是setTimeout是自带清除定时器的所以可以叠加使用。window.timer = setInterval(() => { setTimeout(this.promiseFun原创 2022-04-06 21:44:08 · 3386 阅读 · 0 评论 -
vue封装文件上传方法
public/config.jsvar prod_config = {};prod_config.BASE_URL = 'https://www.student.com/user' //开发环境prod_config.publicPath = '/' // 对应vue.config.js的publicPathprod_config.routerBase = '' // 对应路由的basepublic/index.html <body> <noscrip原创 2022-04-01 15:37:00 · 691 阅读 · 0 评论 -
vue2 实现项目打包加时间戳防止浏览器缓存
在vue.config.js文件中配置以下代码即可const TimeStamp = new Date().getTime();module.exports = { devServer: { // 指定项目启动时的默认端口号 port: 8081 }, configureWebpack: { devtool: 'source-map', output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】 filename: `js/[name原创 2022-03-30 22:56:09 · 3928 阅读 · 4 评论 -
vue el-table 超过个数禁止勾选
<el-table :data="tableData" :cell-style="tableCellStyle" height="350px" highlight-current-row border v-loading="loading" @select="tableSelectChangeLeft" :row-key="ro...原创 2022-03-18 16:09:36 · 2919 阅读 · 0 评论 -
vue项目安装使用sass
// 安装node-sassnpm i node-sass -D// 安装sass-loadernpm i sass-loader -D原创 2022-03-08 15:31:56 · 414 阅读 · 0 评论 -
vue 去除el-table表头的全选框
<style lang="scss" scoped>//去掉表头多选框::v-deep .el-table__header-wrapper .el-checkbox { display: none;}原创 2022-03-03 21:46:00 · 2949 阅读 · 3 评论 -
el-table的type=“selection“多选框居中显示
效果： <div class="center-table"> <el-table :data="tableDataAll" max-height="250" ref="alltable" border :cell-style="tableCellStyle_transfer" @selection-change="handleSelectionChange" @row-click="openDe原创 2022-03-02 22:00:25 · 1544 阅读 · 0 评论 -
el-table点击表格行实现表格单选勾选
<div class="history-table"> <el-table :data="tableData_history" highlight-current-row :cell-style="tableCellStyle" height="60vh" max-height="480" border @row-click="clickChange_history" ><el-table-column class-name="a原创 2022-03-02 21:35:07 · 1928 阅读 · 0 评论 -
vue报错Expected Object, got PointerEven
props你传错值了，不信你打印一下看看。原创 2022-03-02 18:50:40 · 2132 阅读 · 0 评论 -
Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
说明在子组件内部修改了父组件传过来的Props值。原创 2022-02-25 22:38:06 · 460 阅读 · 0 评论 -
vue 实现防止重复点击事件
<div @click="handleClick"></div>data(){ return{ state:false }},methods:{ handleClick(){ if(this.state){ return false; } this.state = true; //具体的代码 ... // 记得要确保，不管失败还是成功都能初始化，否则按钮可能无法再次点击 this.state = false; }}...原创 2022-02-21 21:46:00 · 1599 阅读 · 0 评论 -
vue 渲染template里{{}}冒号后面的空格
<span>姓名</span><span> {{": "}} </span><span>{{item.name}}</span>原创 2022-02-21 21:13:51 · 808 阅读 · 0 评论 -
Vue el-date-picker 组件时间格式化方式
<el-date-picker size="small" v-model="editData.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>原创 2022-02-19 20:07:51 · 4089 阅读 · 0 评论 -
vue 封装自定义的表单校验规则 适用于el-form
/src/utils/validate.js// 银行卡号校验export let bankNumberValid = (rule, value, callback) => { if (value) { if (!Number.isInteger(+value)) { callback(new Error('银行卡号必须全为数字')) } else if (value.trim().length < 16 || value.trim().length >原创 2022-02-18 18:55:05 · 881 阅读 · 0 评论 -
vue封装一个自己的按钮组件，按钮组件用jsx编写
声明（使用）src/components/Rbutton.vue<script>export default{ name: "Rbutton", props:{ type:{ type: String, default:'primary', validate(val){ return ['primary','success','danger','text'],includes(val) } },原创 2022-02-13 22:54:41 · 730 阅读 · 0 评论 -
el-table-column日期时间格式化
方式一：<el-table-column prop="endTime" label="结束时间" width="90" :formatter="formatDate"></el-table-column>methods: { //方法区 formatDate(row, column) { // 获取单元格数据原创 2022-02-11 16:13:45 · 12169 阅读 · 1 评论 -
利用this.$refs给el-input等控件赋值
如果是el-input可以这样写:<el-input ref="input1" v-model="queryForm.taskName" clearable></el-input>利用refs赋值this.$refs.input1.value ="22"如果是自己封装的组件 <el-form-item label="时间范围"> <time-range ref="timeRange" :left-width="150" :right-width=原创 2022-02-04 15:32:18 · 6740 阅读 · 0 评论 -
vue js 时间格式转换
用需求分析：前台页面有时需要展示YYYY-MM-DD格式，但后台却返回给我们YYYY-MM-DD hh:mm:ss、或者是一串字符一、通用的时间转换方法如下：//格式化处理 dateFormat(time) { let date = new Date(time); let year = date.getFullYear(); // 在日期格式中，月份是从0开始的，因此要加0，使用三元表转载 2022-01-28 22:02:15 · 1645 阅读 · 0 评论 -
vue-cli项目中通过require引入静态图片路径的解释
需求： index.vue 怎样能把 assets 里面的图片拿出来加载使用。在 img 标签中直接写上路径<img src="../assets/logo.png" alt="" />使用变量接收静态图片路径（必须使用 require）<img :src="imgSrc" alt="" />data() { return { // Vue中js部分引入静态图片，必须使用require引入，否则无法正常显示 imgSrc:require(转载 2022-01-26 10:40:14 · 2577 阅读 · 0 评论 -
vue项目使用腾讯地图 自定义标注marker图标没效果(不显示)
毫无疑问是你的路径问题，因为你把<script>引入到index.html所以相对路径变成根目录下了。不信把png放到跟目录下，然后就可以引用显示，但是不推荐把png放到项目跟目录下。一般png是放在assets文件夹里面。如果想引用assets文件夹下的图标，应该这么写(也就是使用require)： data() { return { markerUrl: require("@/assets/images/marker.png"),调用： this.m原创 2022-01-26 10:19:14 · 4483 阅读 · 1 评论 -
vue中dom模板为什么要使用kebab-case命名法(短横线命名)
最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。1.字符串模板字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。Vue.component('MyComponentA', { template: '<div MyId="123">转载 2022-01-25 22:58:03 · 1456 阅读 · 0 评论 -
Vue.prototype、Vue.component和Vue.use的区别
Vue.prototype通过在vue原型上定义它们使其在每个 Vue 的实例中可用$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突常用于方法与变量import pinyin from 'js-pinyin';Vue.prototype.$pinyin = pinyin;vue.component注册全局组件第一个参数是调用组件时写的组件名第二个参数是引入组件时写的标签名称常用于注册自定义组件import J原创 2022-01-12 22:52:00 · 343 阅读 · 0 评论 -
vue 在 html文件 DOM (即非字符串的模板) 中使用组件
Vue中获取DOM元素<div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <script> var vm = new Vue({ el:'#app', data: {原创 2022-01-12 17:54:04 · 583 阅读 · 0 评论 -
Vue中 Vue.use() 原理及使用
相信很多人在用 Vue 使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？因为 axios 没有 install。1. 举例理解在新建的项目中创建两个文件：plugins.js use.js:// plugins.jsconst Plugin1 = { install(a,b){ console.log('Plugin转载 2022-01-12 17:24:27 · 1120 阅读 · 0 评论 -
el-table tree-props eading ‘indexOf‘) at VueComponent.resetField
请nextTick以后再重置表单this.$nextTick(() => { this.$refs['tableData'].clearValidate() })原创 2022-01-12 15:06:04 · 317 阅读 · 0 评论 -
vue 两个el-select联动 清空后无法点击选择后一个el-select
需求：两个el-select联动，当第一个change的时候，清空第二个的值以及清空第二个的下拉框的数据源，但是清空之后发现，第二个el-select再也无法选择下拉数据，选择没有效果解决方案1：先判断再清空 async select1Change(id){ if (id) { this.formData.select2? this.formData.select2= '' : '' // 清空下拉框2的值 this.select2Data= []原创 2022-01-07 17:31:50 · 2279 阅读 · 0 评论