PlainTabs 普通的标签页 ​

<template>
  <el-plain-tabs v-model="currentTab" :options="tabs">
    <transition mode="out-in" name="el-fade-in-linear">
      <template v-if="currentTab === 'tab1'">
        <div>我是内容A</div>
      </template>
      <template v-else-if="currentTab === 'tab2'">
        <div>我是内容B</div>
      </template>
      <template v-else>
        <div>我是内容C</div>
      </template>
    </transition>
  </el-plain-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentTab = ref('tab1')

const tabs = ref([
  {
    label: '企业素材',
    value: 'tab1',
  },
  {
    label: '个人素材',
    value: 'tab2',
  },
  {
    label: '免费素材',
    value: 'tab3',
  },
])
</script>

<template>
  <el-plain-tabs v-model="currentTab" :options="tabs" type="card">
    <transition mode="out-in" name="el-fade-in-linear">
      <component :is="currentComp" />
    </transition>
  </el-plain-tabs>
</template>

<script lang="ts" setup>
import { computed, h, ref } from 'vue'

const CompA = () => h('div', {}, '我是组件A')
const CompB = () => h('div', {}, '我是组件B')
const CompC = () => h('div', {}, '我是组件C')

const currentTab = ref('tab1')

const tabs = ref([
  {
    label: '商品/营销素材',
    value: 'tab1',
  },
  {
    label: '快捷回复素材',
    value: 'tab2',
  },
  {
    label: '测试啊',
    value: 'tab3',
  },
])

const currentComp = computed(() =>
  currentTab.value === 'tab1'
    ? CompA
    : currentTab.value === 'tab2'
    ? CompB
    : CompC
)
</script>

<template>
  <el-plain-tabs v-model="currentTab" :options="tabs" type="card">
    <transition mode="out-in" name="el-fade-in-linear">
      <keep-alive>
        <component :is="currentComp" />
      </keep-alive>
    </transition>
  </el-plain-tabs>
</template>

<script lang="ts" setup>
import { computed, defineComponent, h, ref } from 'vue'
import { ElInput } from 'element-plus'

const CompA = defineComponent({
  setup() {
    const input = ref('hi')
    return () =>
      h(ElInput, {
        modelValue: input.value,
        'onUpdate:modelValue': function (val) {
          input.value = val
        },
      })
  },
})
const CompB = defineComponent({
  setup() {
    const input = ref('Summer')
    return () =>
      h(ElInput, {
        type: 'textarea',
        modelValue: input.value,
        'onUpdate:modelValue': function (val) {
          input.value = val
        },
      })
  },
})
const CompC = () => h('div', {}, '我是组件C')

const currentTab = ref('tab2')

const tabs = ref([
  {
    label: '标签页1',
    value: 'tab1',
  },
  {
    label: '标签页2',
    value: 'tab2',
  },
  {
    label: '标签页3',
    value: 'tab3',
  },
])

const currentComp = computed(() =>
  currentTab.value === 'tab1'
    ? CompA
    : currentTab.value === 'tab2'
    ? CompB
    : CompC
)
</script>

<template>
  <el-plain-tabs v-model="currentTab" :options="tabs" type="card">
    <template #default="{ transitionName }">
      <transition mode="out-in" :name="transitionName">
        <component :is="currentComp" class="plain-tabs-container" />
      </transition>
    </template>
  </el-plain-tabs>
</template>

<script lang="ts" setup>
import { computed, h, ref } from 'vue'

const CompA = () => h('div', '我是组件A')
const CompB = () => h('div', '我是组件B')
const CompC = () => h('div', '我是组件C')

const currentTab = ref('tab1')

const tabs = ref([
  {
    label: '商品/营销素材',
    value: 'tab1',
  },
  {
    label: '快捷回复素材',
    value: 'tab2',
  },
  {
    label: '测试啊',
    value: 'tab3',
  },
])

const currentComp = computed(() =>
  currentTab.value === 'tab1'
    ? CompA
    : currentTab.value === 'tab2'
    ? CompB
    : CompC
)
</script>

<style lang="scss">
.plain-tabs-container {
  width: 100%;
  height: 200px;
  overflow: auto;
  padding: 16px 12px;
  border: 1px solid var(--el-border-color-light);
}
</style>