1、使用useslots获取传入的插槽信息

  import {useSlots,computed} from "vue"

  let uSlots = useSlots()

2、判断useslots里面的内容

 import type {VNode,Component} from "vue"
  import {useSlots,computed} from "vue"

    import type {VNode,Component} from "vue"
    //插槽信息
    let uSlots = useSlots()

    const isVertical =computed(()=>{
       
        if(uSlots && uSlots.default){
              //从默认插槽中获取内容
            const VNode:VNode[] = uSlots.default()
            return  VNode.some((vNode)=>{
                const tag = (vNode.type as Component).name
                console.log(tag,"vNode")
                return tag === "ElHeader"||tag === "ElFooter"
                // console.log(vNode.type,"vNode")
            })
        }else{
            return false
        }

    })

3、要设置各个组件的别名,以便在获取插槽信息时能够判断传入了那些组件或标签

<script setup lang="ts" >

  function defineOptions(tag0:{name:string}){
        throw new Error('Function not implemented.');
    }


  defineOptions({
        name:"ElFooter"
    })
</script>

4、defineOption是一个插件,需要安装

npm install unplugin-vue-define-options

5、配置vite.config.ts文件,注册defineOption

import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [
    DefineOptions()
  ],
)}

6、在tsconfig.json中配置type以便在vue文件中识别

"compilerOptions": {
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
}

 

Logo

前往低代码交流专区

更多推荐