Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

Sometimes in a project we have to take a prototype from the UI and turn it into a concrete page that uses components that are not readily available. At this point, you need to implement these specific components yourself.

These are components that you can use, that are generic to you, that you can reuse.

Open a new pit here and record all the components you’ve implemented so far, starting with the simplest custom Tab switch

Go straight to code

Results the following

<template>
    <div class="pop-tab">
      <div :class="{'tab':true, 'checked': item.checked}"
        v-for="(item) in choseList" :key="item.code"
        @click="choseType(item)">
        {{item.label}}
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      / / list TAB
      choseList: [{code: 'SO2'.label: 'SO2'.checked: true },
        { code: 'NO2'.label: 'NO2'.checked: false },
        { code: 'PM10'.label: 'PM10'.checked: false },
        { code: 'CO'.label: 'CO'.checked: false },
        { code: 'O38'.label: 'O3-8'.checked: false },
        { code: 'PM25'.label: 'PM2.5'.checked: false},].// The selected item by default
      curChosed: 'SO2'}; },methods: {
    choseType(item) {
      this.choseList.forEach((element) = > {
        element.checked = false;
      });
      item.checked = true;
      this.curChosed = item.code; ,}}};</script>

<style scoped>* {margin: 0px;
  padding: 0;
}
.tab{
  display: inline-block;
  width:60px;
  height:40px;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}

.checked{
  background-color: #458bf3;
  border-radius: 7px;
}
</style>
Copy the code

expand

In general, Tab is used in combination with the content, a Tab option, corresponding to the content of a field. So, the above code can be added

<template>
    <div class="pop-content">
        <div class="pop-tab-content">
              <div v-if="curChosed === 'SO2'">Specific Content 1</div>
              <div v-if="curChosed === 'NO2'">Content 2</div>
              <div v-if="curChosed === 'PM10'">Content 3</div>.</div>

    <div class="pop-tab">
      <div :class="{'tab':true, 'checked': item.checked}"
        v-for="(item) in choseList" :key="item.code"
        @click="choseType(item)">
        {{item.label}}
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      choseList: [{code: 'SO2'.label: 'SO2'.checked: true },
        { code: 'NO2'.label: 'NO2'.checked: false },
        { code: 'PM10'.label: 'PM10'.checked: false },
        { code: 'CO'.label: 'CO'.checked: false },
        { code: 'O38'.label: 'O3-8'.checked: false },
        { code: 'PM25'.label: 'PM2.5'.checked: false},].curChosed: 'SO2'}; },methods: {
    choseType(item) {
      this.choseList.forEach((element) = > {
        element.checked = false;
      });
      item.checked = true;
      this.curChosed = item.code; ,}}};</script>

<style scoped>* {margin: 0px;
  padding: 0;
}
.tab{
  display: inline-block;
  width:60px;
  height:40px;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}

.checked{
  background-color: #458bf3;
  border-radius: 7px;
}
</style>
Copy the code