Question

我是Vue.js的新手。只是尝试创建简单的自定义标签。我正在尝试向广告位添加过渡，但是不知道如何正确执行。

页面代码：

<div class="main-wrapper">
  <circle-tabs>

    <circle-tab title="Number 1">
      <h3>Header 1</h3>
      <p>
        Some text 1
      </p>
    </circle-tab>

    <circle-tab title="Price">
      <h3>Header 2</h3>
      <p>
        Some text 2
      </p>
    </circle-tab>

    <circle-tab title="Let's start">
      <h3>Header 3</h3>
      <p>
        Some text 3
      </p>
    </circle-tab>

  </circle-tabs>
</div>

圈子标签代码：

<template>
  <div class="circle-tabs">

    <div class="content-tabs">
      <slot></slot>
    </div>
    <!--  -->
    <div class="control-tabs">
      <div class="control-container"
           v-for="(item, index) in tabs"
           :key="index"
           :style="getStyle(index)"
           :class="getClass(index)"
           @click="selectTab(index)"
      >
      </div>
    </div>

  </div>
</template>

name: 'circle-tabs',
    data() {
      return {
        tabs: [],
        images: [
          require('./../../../assets/images/tabs/tab_one.png'),
          require('./../../../assets/images/tabs/tab_two.png'),
          require('./../../../assets/images/tabs/tab_three.png')
        ],
        activeTab: null
      }
    },
    methods: {
      getStyle(index) {
        return {
          background: `url(${this.images[index]}) center center no-repeat`,
          backgroundSize: 'cover'
        }
      },
      getClass(index) {
        return this.activeTab === index ? 'selected' : '';
      },
      selectTab(index) {
        let currentTab = this.tabs[this.activeTab];
        let nextTab = this.tabs[index];

        if (currentTab === nextTab) {
          return;
        }

        if (currentTab) {
          currentTab.active = false;
        }

        nextTab.active = true;
        this.activeTab = index;
      }
    },
    created() {
      this.tabs = this.$children;
    },
    mounted() {
      this.selectTab(0);
    }

圈子标签代码：

<template>
  <div class="content" v-show="active">
      <slot></slot>
  </div>
</template>

name: 'circle-tab',
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        active: false
      }
    },

1）那么，我该如何为圆形标签之间的切换设置动画？太好了，这是一个愚蠢的问题，但是我刚开始使用Vue，所以请帮我：）

2）子问题：我正在使用require（）获取图像并将其发送到元素/组件。效果如何？

Vue.js。如何向插槽添加过渡？

0 个答案: