首页 > 其他分享 >vue 自定义tabs 样式的组件

vue 自定义tabs 样式的组件

时间:2024-04-01 14:59:37浏览次数:22  
标签:vue const 自定义 tabs padding color background ref

大家应该都用过tabs 不同状态显示不同的列表 

这种东西其实可以自己封装的 其实是很简单的

做一个这样简单的筛选组件 

这样的跟tabs 的效果一样

上代码

<template>
  <div class="switch-container">
    <div class="box">
      <div
        class="box-item"
        v-for="(item, index) in list"
        :key="item.name"
        @click="handleSelected(index)"
        :class="{ active: selectId === index }"
      >
        {{ item.name }}
        <!-- :style="{ color: selectId === index ? '#ff5f16' : '#333'}" -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const selectId = ref(0);

const handleSelected = (e) => {
  selectId.value = e;
};
const list = ref([{ name: "推荐" }, { name: "距离" }]);
</script>
<style lang="scss">
.switch-container {
  .box {
    display: flex;
    align-items: center;
    background-color: #fff;
    // padding: 20px;
    padding: 5px;
    border-radius: 70px;
    font-size: 24px;
    .box-item {
      padding: 10px 25px;
      border-radius: 70px;
    }
  }
  .active {
    background-color: #ff5f16;
    color: #fff;
    transition: background-color 0.3s ease-in-out;
  }
}
</style>

算实自己封装的一个组件

逻辑就是 根据点击的下标和实际的下标相等的时候 给他一个动态类

标签:vue,const,自定义,tabs,padding,color,background,ref
From: https://blog.csdn.net/lele66688888/article/details/137232888

相关文章

  • MogDB/openGauss 自定义snmptrapd告警信息
    MogDB/openGauss自定义snmptrapd告警信息在实际使用中,默认的报警规则信息并不能很好的满足snmp服务端的需求,需要定制化报警信息,这里以添加ip为例,看似一个简单的将IP一行信息单独在报警展示出来,涉及到的配置文件修改还是挺多的。修改prometheus.yml文件首先需要修改......
  • vue3中任意嵌套组件传参,provide与inject
    一般父组件向子组件传值,可以通过props (defineProps).但是多级嵌套组件使用props过于麻烦,推荐可以透传的provide和inject provide提供数据   inject注入数据App.vue代码<scriptsetup>import{ref,provide}from'vue'importSonfrom"./son.vue";constgreet......
  • 【Vue3】readonly和shallowReadonly
    readonly()​接受一个对象(不论是响应式还是普通的)或是一个ref,返回一个原值的只读代理。类型functionreadonly<Textendsobject>(target:T):DeepReadonly<UnwrapNestedRefs<T>>只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的ref解包行为与r......
  • 【Vue3】toRaw和markRow
    toRaw作用用于获取一个响应式对象的原始对象,toRaw返回的对象不再是响应式的,不会触发视图更新。toRaw()可以返回由reactive()、readonly()、shallowReactive()或者shallowReadonly()创建的代理对应的原始对象。注意:这是一个可以用于临时读取而不引起代理访问/跟踪开......
  • Vue从后端取数据,实现动态路由
    1.App.vue将获取菜单的方法放在全局中,以便每次刷新页面时,能够加载出。this.$store.state.userInfo是登入后存放在Vuex的用户信息TODO:把数据放到本地存储,没有的时候再加载,这只是demo<template><divid="app"><router-view/></div></template><script>import{......
  • vue记事本渲染以及交互
    以下是记事本的源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>记事本</title>......
  • 自定义类型:【结构体】
    我们知道C语言中有许多的类型,比如char,short,int等等类型。像是这些C语言本身就支持的类型叫做内置类型,但是有一些复杂对象,只有这些类型是完全不够的。比如人,或者一本书。那么我们就可以自己定义一些类型来实现。一.结构体的基础知识1.结构体的创建与初始化结构是一些值的集合......
  • Vue自定义指令directive(主要是钩子函数及其参数)
    Vue自定义指令directive(主要是钩子函数及其参数):https://blog.csdn.net/weixin_46037781/article/details/119637729?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171194263116777224467854%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request......
  • vue-router
    [什么是vue-router]传统的路由是针对服务器不同文件,这样路由的变动就会导致新页面加载,导致页面刷新。vue-router实现了在vue组件基础上,不加载页面文件,而是更改部分页面组件的方式来展现不同路由时显示的内容。同时节约了客户端和服务端资源。[安装]npmivue-router@4......
  • vue表单点击按钮增加或者删除一行
    vue表单点击按钮增加或者删除一行不需要动态改变的就不用放在一个form-item中,可以单独写一个form-item。需要点击增加和删除的表单项目可以用v-for来循环渲染。<a-form:label-col="{span:8}":wrapper-col="{span:12}"> <a-form-itemlabel="服务器名称">......