- 博客(16)
- 收藏
- 关注
RSS订阅原创 react报错 Attempted import error ... does not contain a default export
然而我在processApprovePage这个目录下面有两个文件：approview.tsx（来写页面) 和 approview.js（用来写styled-components的CSS样式），一定是代码编译的时候默认去导入 approview.js这个文件了，最后我在导入的地方把文件的后缀名补上就OK了！我检查了n遍都没有找出我的代码哪里有问题，最后突然想到在import ApproveView的地方写的是。这个问题困扰了我一天，太坑了太坑了。
2023-03-15 09:20:32
4733
原创 上传图片限制类型和宽高
// 上传文件之前的钩子 beforeAvatarUpload(file){ if (file.type != 'image/jpeg' && file.type != 'image/png') { //限制上传文件类型只能为图片 this.$message.error('上传图片只能是 JPG 或 PNG 格式!'); return ...
2021-07-16 09:57:09
4217
原创 ES8对象扩展方法
//声明一个对象：const modelForm = { handover:'aa', watcher:'bb', leader:'cc', turnover:[], },1.获取对象所有的键： console.log(Object.keys( modelForm )
2021-04-29 10:56:48
3662
原创 elementui之el-tabs，自定义tab，可增加、移除tab页
效果图如下，主要实现tab页的新增、删除功能，点击删除按钮时若删除对象为最后一个tab页则取消之。根据官网的文档，可以使用组件中的事件来实现这一功能，但是增加的按钮位置不是我们想要的，删除时也无法保留最后一个tab页，这些需要我们自己改写一下。代码实现： <el-tabs v-model="editableTabsValue" type="card" @tab-click="clickTab" @tab-remove="removeTab" :before-leave="beforeLea
2021-04-28 10:57:13
17204
6
原创 vue中使用transition-group实现轮播图
主要实现以下效果：1.图片自动轮播2.鼠标悬停停止自动轮播，鼠标移走开始自动轮播3.点击按钮可以切换到某一张或者上一张、下一张。//html部分//按钮 <div class="side-bar-wrap"> <div class="but-wrap"> <el-button class="arrow arrow-up" @click="goUp()"
2021-04-28 09:49:39
1776
原创 JavaScript ES6之Set和Map类型
Set的用法1.使用.add方法可以向Set中添加数据 let newSet = new Set() newSet.add(1) console.log(newSet)浏览器输出结果：newSet.add(2) console.log(newSet)浏览器输出结果：2. 不能向Set中添加重复的数据3. 可以通过.delete方法删除Set中的数据，如果删除成功会返回true，否则返回false4. Set类型可以数组类型相互转换
2021-01-14 15:15:31
168
原创 elementui中el-table实现翻页、全选
问题描述在最近的一个项目中，我需要实现表格的翻页，并且还要实现全选、多选功能众所周知，el-checkbox默认样式不好改，所以在这里我没有用elementui中的多选框，用的是<input type="checkbox">，这样样式是好修改了，但是实现全选就得靠手写了解决思路第一步很简单，在<el-table>中加入多选框<el-table-column width="75"> //表头的全选框 <template slot="header" sl
2020-12-18 15:26:11
2898
原创 vue中 div高度随另一个div的高度变化
最近做了好几个项目，终于把手里的事情干完了，趁着这几天比较空整理一下最近遇到的一些问题以及解决方案。问题描述：in-wrap的高度不固定，会随着内容的多少改变，而out-wrap的高度则需要跟随in-wrap的变化而变化，代码如下：<div class="out-wrap" id="out-border6"></div><div class="in-wrap"> <div class="text-wrap"> <div class="co
2020-12-18 10:27:44
3509
原创 Vue的闪烁问题
Vue要经过一系列的操作，先加载模板才渲染数据，解决方案:可以让页面加载完数据后再显示<div v-clock> {{message}}</div> <style> [v-clock]{ display: none; } </style>...
2020-12-07 09:39:06
163
原创 vue中js修改对象中的属性或修改数组对象中的属性时视图不更新
问题描述：js修改对象中的数组时视图不更新解决方案：使用this.$set方法：this.tableData[i] = { ... //先去修改数组的值，再用this.$set去更新视图 }this.$set(this.tableData,i,this.tableData[i]) //this.$set(数组,数组下标,新值)...
2020-12-04 16:13:15
1096
原创 动态添加ref，并通过ref设置css
1、动态添加ref： <li v-for="(item, index) in dataList" :ref="`program${index}`" @click="checkLog(index)"></li>2、通过ref设置li的背景颜色checkLog(index){ for(let i = 0; i < this.dataList.length; i++){ this.$refs[`progr
2020-09-10 10:48:11
2990
原创 CSS动画每日一学——@keyframes
@keyframes通过该属性可以改变动画的样式。在@keyframes规则中指定css样式时，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到元素。举例：/* 动画代码 */@keyframes example { from {background-color: red;} to {background-color: yellow;}}/* 要将动画应用到的元素 */div { width: 100px; height: 100px; back
2020-09-01 14:55:19
209
原创 @selection-change如何自定义传参
el-table事件绑定@selection-change如何自定义传参？在selection-change方法中默认不传参数，此时会把选中的值带过去。在选中表中某一行时，我不仅希望可以取到这一行的值，还想要取到这个表的名字。可以通过自定义传参实现：@selection-change="dataChange($event, item.tableName)其中，$event是选中的这一行的值， item.tableName是要传递的表名使用取到的数据： dataChange(val,tableNa
2020-08-24 16:41:10
10369
原创 element-ui日历样式修改
先看效果图：1、日期的修改以及日期下面小圆点的添加：elementui支持使用slot对日期中的参数进行修改。通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。<div class="left-wrap"> <div class="calendar-wrap"> <el-calendar
2020-08-12 16:28:59
14804
11
原创 在vue中使用turn.js
turn.js是一款实现翻页效果的插件首先需要安装并引入jQuery，安装完成后引入turn.js如果使用npm安装引用turn.js会报错因此需要下载turn.js 到本地，在官网上下载源码，把lib文件拷到assets中，我在页面中使用了import turn from "../assets/lib/turn"，结果会报turn定义但未使用的错，不知道为什么，把这句话注释掉就能运行成功了，好像不用引入就能直接用？<template> <div class="body
2020-08-05 09:53:57
7735
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人