前端学习笔记_value=value.replace-CSDN博客

本文链接：https://blog.csdn.net/fenggering/article/details/103418489

实现拖拽文件到指定区域的第三方库：

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处理
    }
}