0.0.7 • Published 1 year ago

vue3-slot-events v0.0.7

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

SlotEvents

一个vue3上给slot添加事件的容器组件,代码基于element-plus的only-child

安装

npm install vue3-slot-events
# or
yarn add vue3-slot-events

引入

// 全局引入
import {createApp} from 'vue'
import App from './App.vue'
import SlotEvents from 'vue3-slot-events'

const app = createApp(App)
app.use(SlotEvents)
app.mount('#app')


// 局部引入
import {SlotEvents} from 'vue3-slot-events'

使用

SlotTest.vue

<template>
  <div>这是插槽事件测试组件</div>
  <slot-events @click="handleClick">
    <slot name="referer"/>
  </slot-events>
</template>

<script setup>
const handleClick = () => {
  console.log('click')
}
</script>

<style scoped>

</style>

Main.vue

<template>
  <slot-test>
    <template #referer>
      点击试试看看
    </template>
  </slot-test>
</template>

<script setup>
import SlotTest from "./SlotTest.vue";
</script>

渲染结果(未增加额外元素渲染,纯文本和svg除外,这两类会包裹一个span标签)

 <div id="app" data-v-app="">
   <div>这是测试组件</div>
   <span> 点击试试看看 </span>
</div>

点击对应元素,控制台会打印 “click”

此容器组件,还支持组件自定义事件,完美解决slot无法绑定事件的问题

0.0.7

1 year ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago