前端的日常开发小技巧总结（一）
文刀先生的Blog 2024-10-10 13:33:03 阅读 54
日常开发中的小收获
前言
本专栏，主要记录在日常开发当中，学习和收获到的一些小诀窍，通过日常的总结与汇总，日积月累~让自己的专业能力能够得以提升，同时也能使自己和看到这些的人，少走一些弯路
-------------只要日积月累，微小的努力终将汇聚成巨大的进步----------------
一、使用elementUI，绘制直角梯形
在前端开发中，UI大佬为了让页面更好看、更具有观赏性，总会设计一些异形按钮，区别于正常的按钮形状，对于用户很友好，但对于开发者而言，却需要花费更多的精力去实现它
这次在实际开发中，就遇到了类似的情形，为了页面更具观赏性，设计师将正常的Tab切换按钮，设计成了直角梯形与平行四边形
如图所示：
正常开发过程中，为了实现上图效果，一般就是使用CSS3样式，然后手写Tab切换效果
但这次，只需要elementUI 的按钮组件+一些属性的修改就可完成
实现思路
HTML部分：使用 ElementUI 的 el-button 组件。
CSS部分：利用 clip-path 来实现直角梯形的形状。
我们将使用 clip-path 来裁剪按钮，使其成为直角梯形。
梯形代码如下：
<code> <div class="trapezoid-button-container">code>
<el-button class="trapezoid-button">code>
直角梯形按钮
</el-button>
</div>
<style scoped>
.trapezoid-button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.trapezoid-button {
width: 100px;
height: 50px;
line-height: 50px;
background-color: #409EFF;
color: white;
text-align: center;
font-size: 16px;
border: none;
clip-path: polygon(0 100%, 100% 100%, 70% 0, 0 0);
cursor: pointer;
}
.trapezoid-button:hover {
background-color: #66b1ff;
}
</style>
关键点说明
clip-path: 我们使用了 clip-path 来裁剪元素，使其呈现为直角梯形的形状。polygon(0 100%, 100% 100%, 70% 0, 0 0) 定义了这个梯形的四个顶点，分别是：
(0, 100%)：左下角
(100%, 100%)：右下角
(70%, 0)：右上角（上边长为 70% 即 70px）
(0, 0)：左上角
按钮样式：我们设置了按钮的宽度为 100px，高度为 50px，这与梯形的底边和高度相匹配。
hover 效果：当按钮被悬停时，背景颜色会变为更亮的蓝色。
二、使用elementUI，绘制平行四边形
如上图所示，梯形按钮绘制完毕，接下来绘制平行四边形
代码如下（示例）：
<template>
<div class="parallelogram-button-container">code>
<el-button class="parallelogram-button">code>
<span class="button-text">按钮2</span>code>
</el-button>
</div>
</template>
<script>
export default {
name: "ParallelogramButton",
};
</script>
<style scoped>
.parallelogram-button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.parallelogram-button {
display: inline-block;
width: 100px;
height: 40px;
background-color: #409EFF;
color: white;
text-align: center;
line-height: 40px;
border: none;
cursor: pointer;
transform: skew(-20deg); /* 倾斜生成平行四边形 */
}
.parallelogram-button:hover {
background-color: #66b1ff;
}
</style>
关键点说明
transform: skew(-20deg)：使用 CSS 的 transform 属性中的 skew 函数将按钮倾斜。skew(-20deg) 表示将按钮沿着 X 轴倾斜 20 度，从而形成平行四边形的效果。可以根据需求调整倾斜角度。
宽度与高度：按钮的宽度为 100px，高度为 40px，这是通过 width 和 height 来控制的。
居中对齐：使用了 line-height: 40px 使得按钮内部的文字居中。
另外注意一点，因为是整体倾斜，所以按钮中的文字也会跟着倾斜，这与原型图的设计并不相符，为了解决这一问题，可以给文字单独设置新的倾斜角度，使其能够回正
/* 抵消按钮的倾斜，使文字保持水平 */
.button-text {
display: inline-block;
transform: skew(20deg); /* 抵消按钮倾斜 */
}
总结
就这样，简简单单的几行代码，就实现了在vue2中，使用elementUI 绘制直角梯形和平行四边形的需求
------------------------苦心人，天不负，卧薪尝胆，三千越甲可吞吴
有志者，事竟成，破釜沉舟，百二秦关终属楚-----------------------
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。