vue 3 全局指令点击外部

Question

我想要的是当我点击 textarea 时我希望行值为 10，如果您在我想要第 6 行之外单击我该怎么做我是 vue js 3 的新手。我不知道该怎么做。我不知道如何处理指令。

<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>

vue 3 全局指令点击外部

vue 3 global directive click-outside

javascript

vue.js

vuejs3