点击屏幕任意处v-overlay即关闭，而非指定按钮触发的问题

问题说明 #

• v-overlay 异常关闭：预期仅点击遮罩上的按钮时关闭overlay，但实际点击屏幕任意位置都会触发关闭。
• 移除data中overlay属性后无法显示遮罩：尝试用Composition API的ref定义overlay，但删掉Options API的data里的overlay后，遮罩无法正常显示。

用户提供的代码片段 #

模板部分

<template>
 <v-card>
    <v-row>
      <v-overlay opacity="0.88" :absolute="true" :model-value="overlay" contained>
        <v-btn color="warning" @click="disenable(false)">No Automation</v-btn>
      </v-overlay>
    </v-row>

    <v-toolbar flat dense color="indigo" style="height: 80px;">
      <v-toolbar-title style="padding-top: 40px;">
        Active Strategies
      </v-toolbar-title>
    </v-toolbar>
    <v-divider class="mx-4"></v-divider>
    <v-table fixed-header height="auto">
      <thead>
        <tr>
          <th class="text-left">Assetpair</th>
          <th class="text-left">Strategy</th>
          <th class="text-left">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in strategies" v-bind:key="row.ticker">
          <td>{{ row.assetpair }}</td>
          <td>{{ row.strategy }}</td>
          <td>
            <div class="text-left">
              <v-chip class="ma-2" color="red" dark @click="stopStrategy(127)">
                <v-icon left>mdi-server-plus</v-icon>Stop  Strategy
              </v-chip>
            </div>
          </td>
        </tr>
      </tbody>
    </v-table>
  </v-card>
</template>

脚本部分

import axios from 'axios'
import { ref } from 'vue'

const strategies = ref([{}, {}])
const overlay = ref(true)
const setOverlay = v => (overlay.value = v)

export default {
  data: function() {
    return {
      overlay: true,
      strategies: []
    };
  },
}

解决方案 #

1. 修复点击任意位置关闭overlay的问题 #

v-overlay默认点击遮罩层会自动关闭，原因是persistent属性默认值为false。给v-overlay添加persistent属性，就能阻止点击遮罩关闭，仅通过按钮触发关闭：

<v-overlay opacity="0.88" :absolute="true" :model-value="overlay" contained persistent>
  <v-btn color="warning" @click="disenable(false)">No Automation</v-btn>
</v-overlay>

同时确保disenable方法正确修改overlay的值：

// 如果用Options API，在methods里定义
methods: {
  disenable(value) {
    this.overlay = value;
  }
}

2. 修复移除data中overlay后无法显示的问题 #

你同时混用了Options API的data和Composition API的ref，导致变量冲突。如果想改用Composition API，需要在setup函数中返回变量和方法，让模板能访问到：

import axios from 'axios'
import { ref } from 'vue'

export default {
  setup() {
    const strategies = ref([{}, {}])
    const overlay = ref(true)
    
    // 对应模板中的点击事件
    const disenable = (value) => {
      overlay.value = value
    }

    const stopStrategy = (id) => {
      // 这里补充stopStrategy的业务逻辑
      console.log('停止策略:', id)
    }

    // 必须返回变量和方法，模板才能访问
    return {
      strategies,
      overlay,
      disenable,
      stopStrategy
    }
  }
}

修改后就可以删掉data中的overlay和strategies，模板会自动绑定setup返回的响应式变量，遮罩就能正常显示了。

完整修正后的代码示例 #

<template>
  <v-card>
    <v-row>
      <!-- 添加persistent阻止点击遮罩关闭 -->
      <v-overlay opacity="0.88" :absolute="true" :model-value="overlay" contained persistent>
        <v-btn color="warning" @click="disenable(false)">No Automation</v-btn>
      </v-overlay>
    </v-row>

    <v-toolbar flat dense color="indigo" style="height: 80px;">
      <v-toolbar-title style="padding-top: 40px;">
        Active Strategies
      </v-toolbar-title>
    </v-toolbar>
    <v-divider class="mx-4"></v-divider>
    <v-table fixed-header height="auto">
      <thead>
        <tr>
          <th class="text-left">Assetpair</th>
          <th class="text-left">Strategy</th>
          <th class="text-left">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in strategies" v-bind:key="row.ticker">
          <td>{{ row.assetpair }}</td>
          <td>{{ row.strategy }}</td>
          <td>
            <div class="text-left">
              <v-chip class="ma-2" color="red" dark @click="stopStrategy(127)">
                <v-icon left>mdi-server-plus</v-icon>Stop  Strategy
              </v-chip>
            </div>
          </td>
        </tr>
      </tbody>
    </v-table>
  </v-card>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  setup() {
    const strategies = ref([{}, {}])
    const overlay = ref(true)
    
    const disenable = (value) => {
      overlay.value = value
    }

    const stopStrategy = (id) => {
      console.log('停止策略ID:', id)
    }

    return {
      strategies,
      overlay,
      disenable,
      stopStrategy
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者artistAhmed