9月学习笔记-前端知识碎片

最新推荐文章于 2022-05-17 16:06:53 发布

hen1183392934

最新推荐文章于 2022-05-17 16:06:53 发布

阅读量309

点赞数

分类专栏：知识碎片

本文链接：https://blog.csdn.net/hen1183392934/article/details/100698619

版权

这篇工作笔记记录了9月学习的前端知识点，包括Echarts中cursor指向无效的解决方法，轮播图宽高自适应的实现，深拷贝与浅拷贝的原理及实现，shift方法，函数节流与防抖的概念，粘性布局的使用，强制不换行的CSS技巧，截取字符串的策略，computed计算属性的理解，loadsh库的cloneDeep方法，以及水球图的配置。

摘要由CSDN通过智能技术生成

工作笔记-知识碎片-2019-9

1.Echarts的cursor指向无效

原因：echarts使用canvas画图，使用行内样式设定canvas的cursor:pointer;
解决：使用样式覆盖这个行内样式比如：.echarts canvas{cursor:pointer !important;}

2.轮播图片宽高自适应问题

效果图：
在这里插入图片描述
宽度为自适应屏幕宽度，有最小宽度，高度不管是设为固定px或百分比都会导致图片变形或被裁剪，所以应动态设定图片高度。
html:

	<div class="ty-carousel">
		<el-carousel ref='ctest' :height="imgHeight+'px'" :interval='5000'>
			<el-carousel-item v-for="(item,index) in carouselData" :key="index">
				<img  ref="image" :src="item.src" alt="">
			</el-carousel-item>
		</el-carousel>
	</div>

style:

	.ty-carousel{ margin-bottom: 16px; }
	.ty-carousel .el-carousel__item img {
	    width: 100%;
	    height: auto;
	}

	.ty-carousel .el-carousel__indicators{left: auto; right:0;  }

js:(基于vue框架)

import axios from "axios";
export default{
	data(){
		return{
			imgHeight: "",
			carouselData:[
				{
					src:'/static/static_web/images/ty/Carousel-1.png',
				},{
					src:'/static/static_web/images/ty/Carousel-2.png',
				},{
					src:'/static/static_web/images/ty/Carousel-3.png',
				},{
					src:'/static/static_web/images/ty/Carousel-4.png',
				},
			]
		}
	},
	methods: {
		imgLoad() {
		      this.$nextTick(function() {