Vue3 setup语法糖中使用el-tabs切换component

 0 0条评论

之前写过一篇Vue3使用el-tabs切换不同component

当初使用的是传统的组合式API的写法,在使用了setup语法糖之后,组件就不需要再向下面那样声明了。

components: {
    Base,
    ApiKey,
    Pwd
    },

那就导致了,不能使用组件的name来切换component了,那么就让我们改造一下。

vue代码如下,el-tabs不再使用v-model双向绑定了,model-value仅仅是用来指定默认的选项卡的样式(仅仅是样式哦,功能并未实现),需要监听tab-change事件,来改变组件的内容了。

<el-tabs model-value="Base" type="border-card" @tab-change="handleTab">
    <el-tab-pane name="Base" label="基本信息">
    </el-tab-pane>
    <el-tab-pane name="ApiKey" label="重置ApiKey"></el-tab-pane>
    <el-tab-pane name="Pwd" label="重置密码"></el-tab-pane>
    <!-- 固定高度使三个选项卡高度一致 -->
    <div style="height:240px;">
        <component v-bind:is="currentCom" @close="handleSubClose"             :ID="userID"></component>
    </div>
    </el-tabs>

ts代码如下,先import相关组件,currentCom.value = markRaw(Base)是设置默认的组件。

handleTab方法用来切换组件,这里不用使用到name,所以要通过vue内置的markRaw方法,具体说明可以查看官方网站,说实在话我也不是特别明白。

以下是有些是ts的语法,如果是js写的,去掉相关内容即可。

<script lang="ts" setup>

// 分别导入三个组件
import Base from './Base.vue'
import ApiKey from './ApiKey.vue'
import Pwd from './Pwd.vue'

const emits = defineEmits(['refush'])
const userID = ref('')
const isShow = ref(false)
const currentCom = ref()

const show = (ID: string) => {
    currentCom.value = markRaw(Base)
}

defineExpose({ // 不抛出父组件收不到此方法
    show
})

const handleTab = (name: string) => {    const lookup: {        // 为了ts不报错,声明一个索引签名
        [name: string]: any
    } =
    { Base, ApiKey, Pwd }

    currentCom.value = markRaw(lookup[name])
}

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客