vue3全局指令点击外部

Question

我想要的是当我点击文本区域时，我希望行值为10，如果您在I want行6之外单击我怎么能做到这一点我是vuejs3的新手。我不知道该怎么做。我不知道如何处理指令。

<template>
<div>
<textarea :rows="row"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
row: 6
}
}
}
</script>

Answer 1

尝试如下片段：

const clickOutside = {
beforeMount: (el, binding) => {
el.clickOutsideEvent = event => {
if (!(el == event.target || el.contains(event.target))) {
binding.value();
}
};
document.addEventListener("click", el.clickOutsideEvent);
},
unmounted: el => {
document.removeEventListener("click", el.clickOutsideEvent);
},
};
const app = Vue.createApp({
data() {
return {
row: 6,
};
},
methods: {
setRow() {
this.row = 10
},
removeRow() {
this.row = 6
}
}
})
app.directive("clickOut", clickOutside).mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
<textarea @click="setRow" :rows="row" v-click-out="removeRow"></textarea>
</div>