CSS按钮样式(点击后带指向小三角)

最新推荐文章于 2024-07-19 17:13:16 发布

淡淡蛋痛

最新推荐文章于 2024-07-19 17:13:16 发布

阅读量886

点赞数

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_50553098/article/details/132162659

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中实现自定义按钮设计，包括按钮的样式切换、点击事件处理和利用`:before`和`:after`伪类创建三角形效果。作者分享了使用SCSS编写样式和JavaScript处理按钮状态的方法。

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

最近在写一个app，用到很多这种按键类型，分享一波。

一：成果展示

二：解析

1.先写三个按钮

2.再写点击方法

3.根据按钮index更改样式

按钮点击前样式:f-color

按钮点击后样式:f-active-color

该按钮样式核心在于点击后选中的f-active-color样式(对该部分代码自己修改数值测试，很快便能上手)

&::after就是在该按钮选中后再渲染一个content(类似::before)，只需要把该content变成三角形，再调整位置到按钮下方，就可以呈现文章开头图片中的效果。

三：代码

Tips:

1.该样式基于::after伪类，所以一定要加上lang=“scss”。

2.使用其他编译器要修改view。

<template>
	<view >
		<view style="display: flex;justify-content: space-between;margin: 20px 10px;" >
			<view style="height: 50px; width: 50px;" 
				:class="topBarIndex===index?'f-active-color':'f-color'" 
				@click="text(index)" 
				v-for="(item,index) in btn" 
				:key="index">
				
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				btn:[
					{id:1,name:1},
					{id:2,name:2},
					{id:3,name:3},
				],
				topBarIndex:0
			}
		},
		methods:{
			text(index){
				this.topBarIndex=index
			},
			
		},
	}
</script>
<style lang="scss">
	.f-active-color{
	  color: white;
	  position: relative;
	  background-color: #447DF0;
	  border-radius: 5PX;
	  &::after{
	   position: absolute;
	   content: "";
	   width: 0;
	   height: 0;
	   bottom: 0;
	   top: 50px;
	   left: 35%;
	   border: 0.5rem solid;
	   border-color: #447DF0 white white white;
	  }
	  
	 }
	 .f-color{
	  color:black;
	  border-radius: 5px;
	  box-shadow:0 0 0.3rem 0.3rem #f3f3f3,
	  0 0 0.1rem 0.1rem #f3f3f3,
	  0 0 0.3rem 0.3rem #f3f3f3,
	  0 0 0.1rem 0.1rem #f3f3f3,
	
	 }

</style>