vue常用功能收集

vue如何实现输入条件后点击enter进行查询

在Vue中，您可以通过监听键盘事件来实现在输入条件后点击Enter进行查询的功能。以下是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="searchQuery" @keyup.enter="performSearch" />
    <button @click="performSearch">搜索</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    performSearch() {
      // 执行查询操作
      console.log('Searching for:', this.searchQuery);
      // 这里可以调用API或其他逻辑来执行查询
    }
  }
};
</script>

在这个例子中，v-model用于绑定输入框的值到searchQuery数据属性。@keyup.enter是一个Vue的按键修饰符，用于监听键盘的Enter键释放事件。当用户在输入框按下Enter键时，performSearch方法会被触发。同时，为了方便用户，也提供了一个按钮来直接触发performSearch方法。

vue项目启动修改后报错

原因分析：因vue重新加载的时候空间分配不足，导致加载报错，解决措施，启动的时候添加下面命令：

$env:NODE_OPTIONS="--max-old-space-size=8192"

vue禁止iframe里面的右键启动

组件：

<el-dialog
   title="图纸查看"
   :visible.sync="dialogFormVisible3"
   destroy-on-close
   width="75%"
   height="100%"
   @open="handleOpenedDialog"
 >

   <iframe ref="pdfIframe" :src="pdfSrc" frameborder="0" style="width: 100%; height: 600px"></iframe>
   <div class="overlay" @contextmenu.prevent></div> <!-- 覆盖层 -->
 </el-dialog>

js：

handleOpenedDialog() {
      this.$nextTick(() => {
        let pdfIframe = this.$refs.pdfIframe;
        if (pdfIframe) {
          pdfIframe.contentWindow.document.oncontextmenu = (
              event
            ) => {
              event.preventDefault();
              return false;
            };
        }
      });