-
Mui 的Table 在使用的时候,即使给TableCell设置了width属性,表格也会根据每列的内容自动调整宽度。
如果想要自定义列宽,可以设置Table元素tableLayout: 'fixed’。这样就可以通过给TableCell设置width调整列宽, 没有设置width的列会均分其余宽度。 -
实现拖拽文件到指定区域的第三方库:
import { FileUploader } from 'react-drag-drop-files';
const handleFileDrag = (file) => {
// 对拖拽放入的文件进行处理
};
<FileUploader
handleChange={handleFileDrag}
children={
<>这里是自定义的区域样式</>
}
/>
- 从图片URL得到图片的base64数据
function toDataUrl(url:string, callback:(base64:any) => void) {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
const reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
使用:
toDataUrl(fileUrl, function(myBase64) {
// myBase64即为得到的base64数据,可以直接设置为img的src值。
});
- Date 对象在setMonth的时候有时候会比期待的结果多一个月,如下
const date = new Date();
date.setFullYear(startDate.getFullYear());
date.setMonth(startDate.getMonth());
date.setDate(startDate.getDate());
结果 startDate是2023-6-1,date则是2023-7-1。有个简单的规避办法就是调换一下设置顺序,先setDate再setMonth即可得到正常结果。
-
父控件和子控件同时设置了点击事件,点击子控件时,仍然会进入父控件的点击事件里。解决办法就是子控件的点击事件开头加上event.stopPropagation();
-
父布局里有多个子元素,想让元素按space-between的方式多行排列,代码如下:
display:'flex',
flex: '1 0 300px',
flexWrap: 'wrap',
justifyContent: 'space-between',
但是最后一行如果不够铺满,就会显示在两边。如果想要最后一行靠左边排列,可以最后再添加一行数量的子元素,高度设置为0。这些高度为0的子元素不会显示出来,但是会占据位置,使最后一排真实子元素靠左排列。
- 设置滚动条隐藏
'&::-webkit-scrollbar': {
display: 'none'
},
- 给一行文字设置渐变色
width: "fit-content",
background: "linear-gradient(90deg, #ff0000, #0000ff)",
"-webkit-background-clip": "text",
"-webkit-text-fill-color": "transparent",
效果:
- 复制文字功能(在Safari浏览器的弹出框上不生效)
const copyContent = (content: string) => {
const aux = document.createElement('input')
aux.setAttribute('value', content)
document.body.appendChild(aux)
aux.select()
aux.focus()
document.execCommand('copy')
document.body.removeChild(aux)
}
- 如果父布局和子布局都设置了点击事件,子布局点击时,不想让父布局的点击事件执行,则可以再子布局的点击事件里加上
event.stopPropagation();
- 限制文字只显示一行,且超出的部分显示省略号
overflow: hidden; // 设置文字不会超过容器范围
text-overflow: ellipsis;// 设置文本超出的部分会变成省略号
white-space: nowrap; // 文字不会换行.
- 限制文字最多显示3行,最后显一行显示不完就显示省略号
lineHeight: '30px',
maxHeight: "90px",
height: "100px",
display: "-webkit-box",
overflow: "hidden",
boxOrient: 'vertical',
WebkitBoxOrient: "vertical",
lineClamp: 3,
WebkitLineClamp: 3,
- 父布局里有两个子布局,想让子布局水平排列且水平垂直都居中,则父布局设置:
display: flex;
align-items: center;
justify-content: center
- 父布局宽度固定的情况下,按如下设置可以使子元素水平居中:
.parent {
text-align:center"
}
.child {
margin:0 auto;
width: 300px;
height: 300px;
}
- 父布局宽度不固定的情况下,子元素如下设置可以水平居中:
.child {
width: fit-content;
width: -moz-fit-content;
width: -webket-fit-content;
margin: auto;
}
- 父布局如下设置,可以使子元素们垂直居中:
.parent {
//设置高固定
width: 300px;
height: 30px;
display: flex;
align-items: center;
}
- 父布局高度固定的情况下,子元素如下设置可以垂直居中:
.child {
vertical-align: middle
}
- input标签设置如下事件,可以限制只能输入数字:
oninput = "value=value.replace(/[^\d]/g,'')"
- css四种定位方式
- 默认定位方式为static。
- 只有设置了postion:relative,即定位方式为相对定位(元素相对于自身偏移),然后设置的left,right属性才生效。不会使元素脱离文档流。
- 绝对定位postion:absolute:相对于离自己最近的,开启了定位方式的父元素进行定位(设置left,top等属性,进行偏移)。如果每层父元素都没开启定位,则相对于浏览器窗口进行定位。绝对定位会使元素脱离文档流。
- 固定定位postion:fixed:相对于浏览器窗口进行定位。其他和绝对定位一样。
设置定位后,如果元素重叠了,可以设置z-index来改变元素优先级。
- 父级div里有多个子div,想让子div水平排列并且各自居中,可以对父级div如下设置:
.parent {
display: flex;
justify-content: space-around;
}
-
Vue里,只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性,比如:
vm.b = ‘hi’
那么对 b 的改动将不会触发任何视图的更新。
要触发更新,可以用this.$set(vm, ‘b’, ‘hi’)或者Vue.set(vm, ‘b’, ‘hi’)。 -
只有等页面加载完成好之后你才能调用this.$refs。如果你使用v-if 、v-for渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到this.$refs 的,会报undefined错误。
解决办法:
1、如果你在mounted里获取this.$refs,因为dom还未完全加载,所以你是拿不到的, update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理),此时,就可以使用this.$refs了。
2、如果写在method中,那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用,这样就可以了。
3、或者加个定时器延时加载this.$refs(这个方法还没有试)
-
Vue子组件的数据如果写在data区域,然后父组件中更新了数据,子组件是收不到更新的,可以写在 computed区域就可以了。
比如下面父组件中更新了praised和likeCount,子组件中需要做以下更改才能收到:
-
子组件做了改变,想触发父组件的处理,可以这样:
子组件:
this.$emit('cancelPraise')
父组件:
@cancelPraise="onCancelPraise(var)"
methods: {
onCancelPraise(var) {
xxxx处理
}
}