Native JS encapsulation vue Tab switching effect

This article example shares the specific code of native JS encapsulation vue Tab switching for your reference. The specific content is as follows

First look at the effect picture

Technology used

vue,js,css3

Vue components can be used directly

<template>
  <div class="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
        Book Friends</li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
        Book list</li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      headerActive: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    //Initialize the send this.$emit("change", this.headerActive);
  },
  methods: {
    headerChange(index) {
      this.headerActive = index;
      this.$emit("change", index);
    },
  },
};
</script>

<style lang="less" scoped>
.bookcircle-header {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 286px;
    font-size: 14px;
    height: 29px;
    color: #1489fe;
    border: 1px solid #1489fe;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; // Solve border overflow and include border inside the box li {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .active {
      color: white;
    }
    &::before {
      content: "";
      width: 143px;
      height: 100%;
      background-color: #1489fe;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 13px 0px 0px 13px;
      z-index: 1;
      transition: all 0.3s;
    }
    &.firend::before {
      transform: translateX(0);
      border-radius: 13px 0px 0px 13px;
    }
    &.booklist::before {
      transform: translateX(100%);
      border-radius: 0px 13px 13px 0px;
    }
  }
}
</style>

Implementation principle:

Use ul, li and flexible box. First, set the width and height of the parent element. Then use the flexible box to expand the child element li horizontally. Set flex: 1 for the child element li to make the child element share the width of the parent element.

Then set a pseudo-element for the parent element to cover the first li element in an absolutely positioned manner, and use the z-index attribute to control the hierarchical display relationship between the pseudo-element and the child element.

Then set the transition attribute on the pseudo element and use the transform: translateX(); attribute to move the element horizontally.

Note:

1. Although the click event of the switch is on the child element and the active style is added to the child element, the switching effect of the tab is not achieved through the child element, but through the pseudo-element of the parent element.
2. You must set a dynamic class for the parent element based on the index of the child element, so that the pseudo-element of the parent element can perform the switching animation based on the selected child element
3. This component uses Taobao amfe-flexible and postcss adaptation. Please pay attention to the adaptation issues when using it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of JavaScript axios installation and packaging case
In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle
Vue.js manages the encapsulation of background table components
Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects
Native js encapsulation seamless carousel function
js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations
js implements some functions of the input component in Element and encapsulates it into a component (example code)
JavaScript implements prototype encapsulation carousel
Encapsulation method of JavaScript slow motion animation function
JavaScript canvas encapsulation dynamic clock
About Jackson's JSON tool class encapsulation JsonUtils usage
Example code for JavaScript encapsulation of a singly linked list
Common front-end JavaScript method encapsulation

<<: How to configure mysql on ubuntu server and implement remote connection

>>: VMware Workstation is not compatible with Device/Credential Guard