QZ9420的博客

vue3项目笔记

vue3项目搭建

404

el-table表格可拖拽实现

文件上传后缀名与文件类型对照表。

批量上传文件

JSON.parse(JSON.stringify())循环引用会报错， 不能拷贝函数 function deepClone1(target) { const result = JSON.parse(JSON.stringify(target)) return result} const obj = { a: 1, b: ['e', 'f', 'g'], c: {h: 20}, d: function() {} } // 循环引用 ob

在beforeUpload时调用 commonReSize(file, format) { return new Promise((resolve, reject) => { const that = this const img = new Image() img.src = URL.createObjectURL(file) img.onload = function() { let w = im

<ks-upload :action="uploadAction" :headers="uploadHeader" name="imageFile" accept="jpg/jpeg" list-type="picture-card" :before-upload="beforeUpload5"> <div slot="tip" class="upload-text">图片格式为jpg/jpeg，大小不能超过3M.

首先： 被绑定的值与规则要放在同一个对象里边（不能直接写在data里） <ks-form ref="tableForm" :model="tableForm" :rules="tableForm.rules"> <ks-table :data="tableForm.skuData" border style="width: 100%"> <ks-table-column v-if="showVerSionItem" prop="ve.

includes 方法includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false const a = ['a12', 'a23', 'a33', 'a34'] const b = ['a12', 'a23', 'a34'] let c = a.filter(item =>{ return !b.includes(item) }) console.log(c);indexOf 方法直接打点调用,括号

第一步：在package.json文件中，有个属性：version，每次打包时，改变一下内容第二步：在main.js文件中，加入如下代码：const VUE_APP_VERSION = require('../package.json').versionconst vers = window.localStorage.getItem("appVersion");if(VUE_APP_VERSION != vers){ localStorage.clear() window.localStor

<template> <div> <ks-dialog ref="categoryDialog" :title="dialogTitle" class="dialog-style" :visible.sync="jdCategoryVisible" :modal-append-to-body="false" :c

<template> <div> <ks-dialog ref="categoryDialog" title="不建议使用词排查入口" class="dialog-style" :visible.sync="dialogVisible" :modal-append-to-body="false" :close-o

beforeUpload(file) { this.loading = Loading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.5)' }) const isPNG = file.type === 'image/png' const isLt2M = file.size / 1...

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。使用场景：如图控制台输出：...

vue2响应式原理 <script> let person = { name: '张三', age: 18 } // 模拟vue2中实现响应式 let p = {} Object.defineProperty(p, 'name', { configurable: true, // 允许执行删除操作 get() {

方法一在vue.config.js添加如下配置：devServer: { proxy: "http://localhost:5000"}说明：1、优点：配置简单，请求资源时直接发给前端（8080）即可2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理3、工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么请求会转发给服务器（优先匹配前端资源）方法二：在vue.config.js添加如下配置：module.exports = { devServer: { p

vuex结构图：vuex的引入使用：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0, num: 0 }, actions: { increment (context) { context.commit('increment') } }, mutations: {

例如：调用方法，传入n值即可 dealSealNumber(n) { const b = parseInt(n).toString() const len = b.length if (len <= 3) return b const r = len % 3 return r > 0 ? b.slice(0, r) + ',' + b.slice(r, le

el-carouse组件是自带鼠标事件，要修改则需要清除原有事件，即鼠标的移入事件@mouseenter.native="delHandleMouseEnter"。<el-carousel ref="carousel" trigger="click" arrow="always" height="1060px" @change="changehandle" @mouseenter.native="delHandleMouseEnter">方法： delHandleMou

点击后：第一步：第二步：表格的icon（加减号）第三步：参考：https://segmentfault.com/q/1010000020750476/a-1020000038898194

data:methods:参考：

参考：https://www.zhangshengrong.com/p/zD1yDDg0Xr/

官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充单个输入框的组件代码：<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>情景1: 设置选择今天以及今天之后的日期data (){ return {

表格的表现形式如下：具体步骤如下：1.创建table，绑定data，绑定列名prop，绑定监听事件sort-change<el-table :data="tableData" border style="width: 100%" v-loading="loading" @sort-change="changeTableSort"> <el-table-column label="编号" width="80"> <template slot-sco

例如： <img :src="userLogoImgUrl" :onerror="defaultImg" alt=""/>出现如下错误：defaultImg: 'this.src="' + require('../../assets/image/governMenu/default_head_photo.png') + '"',

<template> <div> <el-card shadow="always" style="width: 100%"> <div class="title"> <span>{{item.placeName}} {{ item.deviceName }}</span> <span v-if="item.ionline == 0" style="color: red"&..

getChartData() { let myDate = new Date(); let year = myDate.getFullYear(); let month = myDate.getMonth(); month = month < 10 ? "0" + month : month; let years = year + "-" + month; let params = { years: "2021-04", communityId: "13713351006983

11

数据格式：介绍：数据是一个数组，数组里边有对象，需要转换成4个数组，一个是社区名字，另外三个分别对应每个小区的干垃圾、湿垃圾、可回收垃圾的投递次数，数据是分开给的 getList() { this.$http .request("deviceStausZbChart", {}) .then((data) => { console.log(data.data.data); let allData = data

//下载图片 download() { let imgData = 'base64---------';//这里放需要下载的base64 this.downloadFile('测试.png', imgData); }, //下载 downloadFile(fileName, content) { let aLink = document.createElement('a'); let blob .

<template> <el-dialog title="菜单权限" :visible.sync="isShow" width="500px" :before-close="handleClose" :destroy-on-close="true" > <div> <el-tree :data="setTree" show-checkbox node-key="id" :props="default

<template> <div> <el-dialog title="详细信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" > <div v-for="item in formList"> <table border="1px solid #0

<template> <div> <el-dialog title="请导入IC卡号" :visible.sync="dialogFormVisible"> <el-form> <el-form-item label="小区名称:"> <el-select filterable clearable placeho

使用步骤：①store里的index.js就代表仓库②在根组件中引入并注册③子组件引入注册使用④在子组件对象中使用方法方法里的数据为：thi.$store.commit(" state，payload")⑤在仓库的mutations中定义方法⑥mutaions我们的函数中默认第一个参数就是state，第二个参数是payloadmapState自动映射计算属性：computed:{ // 计算属性一般是只读的，所以说，一般我们会把仓库中的状态映射成组件中的计算属性

使用步骤：①在script标签中引入vue.js和vuex.js②实例化一个对象，就是通过new的方式去创建一个对象③store需要挂载到根组件上④一旦你在vue的实例中注入了store，则在所有的子组件及 vue的实例中，你都可以通过：this.$store.state.数据名 去获取数据⑤修改：在组件内部通过this.$commit方法触发事件，执行mutations当中的对应的方法。调用这个mutations它是间接被调用的，在组件内部：this.$store.commit(“m

链接: https://pan.baidu.com/s/1oOcoUIIATeU1Emvv_OJavA 提取码: 3ahb 复制这段内容后打开百度网盘手机App，操作更方便哦

computed和watch的作用和区别1.computed计算属性可以把在dom元素中计算的变到VM中计算，加快速度2.侦听器watch 比computed灵活；可以做函数节流，Ajax异步数据获取，操作DOM；依赖固定的数据类型3.总结 computed计算新属性，惰性求值，watch侦听一个原本就存在的数据，发生变化就执行函数computed适合一个数据被多个数据影响，由多个数据计算得来watch使用多个数据影响一个数据watch不能双向绑定...