当前位置:首页 » 《关于电脑》 » 正文

前端的日常开发小技巧总结(一)

11 人参与  2024年10月17日 10:01  分类 : 《关于电脑》  评论

点击全文阅读


日常开发中的小收获

前言

本专栏,主要记录在日常开发当中,学习和收获到的一些小诀窍,通过日常的总结与汇总,日积月累~让自己的专业能力能够得以提升,同时也能使自己和看到这些的人,少走一些弯路

-------------只要日积月累,微小的努力终将汇聚成巨大的进步----------------


一、使用elementUI,绘制直角梯形

在前端开发中,UI大佬为了让页面更好看、更具有观赏性,总会设计一些异形按钮,区别于正常的按钮形状,对于用户很友好,但对于开发者而言,却需要花费更多的精力去实现它
这次在实际开发中,就遇到了类似的情形,为了页面更具观赏性,设计师将正常的Tab切换按钮,设计成了直角梯形与平行四边形
如图所示:
设在这里插入图片描述
正常开发过程中,为了实现上图效果,一般就是使用CSS3样式,然后手写Tab切换效果
但这次,只需要elementUI 的按钮组件+一些属性的修改就可完成

实现思路
HTML部分:使用 ElementUI 的 el-button 组件。
CSS部分:利用 clip-path 来实现直角梯形的形状。
我们将使用 clip-path 来裁剪按钮,使其成为直角梯形。

梯形代码如下:

  <div class="trapezoid-button-container">    <el-button class="trapezoid-button">      直角梯形按钮    </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">    <el-button class="parallelogram-button">      <span class="button-text">按钮2</span>    </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 绘制直角梯形和平行四边形的需求

------------------------苦心人,天不负,卧薪尝胆,三千越甲可吞吴
有志者,事竟成,破釜沉舟,百二秦关终属楚-----------------------


点击全文阅读


本文链接:http://zhangshiyu.com/post/172952.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1