Compare commits
5 Commits
94f433de6e
...
7b1ee4fa97
Author | SHA1 | Date | |
---|---|---|---|
7b1ee4fa97 | |||
9d7124bbda | |||
bfc87a4b52 | |||
d681cec9a6 | |||
e75edc5b15 |
39
resources/js/Shared/ActiveComponent.js
Normal file
39
resources/js/Shared/ActiveComponent.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { h, ref } from 'vue'
|
||||||
|
|
||||||
|
const ActiveComponent = function(props, { attrs, slots }) {
|
||||||
|
const key = props.pkey
|
||||||
|
const isActive = ref(false)
|
||||||
|
|
||||||
|
function onMouseover() {
|
||||||
|
console.log('activated ' + key)
|
||||||
|
isActive.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseleave() {
|
||||||
|
console.log('disabled ' + key)
|
||||||
|
isActive.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
return h(props.as, {
|
||||||
|
...attrs,
|
||||||
|
class: 'hello',
|
||||||
|
onMouseover,
|
||||||
|
onMouseleave,
|
||||||
|
}, [
|
||||||
|
slots,
|
||||||
|
slots.default({ isActive }),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
ActiveComponent.props = {
|
||||||
|
as: {
|
||||||
|
type: String,
|
||||||
|
default: 'div',
|
||||||
|
},
|
||||||
|
pkey: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ActiveComponent
|
Loading…
x
Reference in New Issue
Block a user