“v-overlay在我点击屏幕的任何地方时被禁用。”

huangapple go评论63阅读模式
英文:

v-overlay gets disabled when I click anywhere on the screen

问题

I have an app.vue that comprises of multiple components. One of the components has an overlay on it with a button that should disable the overlay and make the contents visible once clicked. However instead of the button the overlay gets disabled once I click anywhere on the screen.

如果我从数据部分删除我的overlay属性,就不会显示任何覆盖层:

import axios from 'axios'
// import StrategyProvider from "../lib/strategy.js";
import { ref } from 'vue'

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

export default {
  // props: ["strategies"],
  data: function() {
    return {
      overlay: true,
      strategies: []
    };
  },
英文:

I have an app.vue that comprises of multiple components. One of the components has an overlay on it with a button that should disable the overlay and make the contents visible once clicked. However instead of the button the overlay gets disable once I click anywhere on the screen.

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

If I remove my overlay prop from the data section no overlay gets displayed:

import axios from 'axios'
// import StrategyProvider from "../lib/strategy.js";
import { ref } from 'vue'

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

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

答案1

得分: 1

它关闭是因为你点击了背景。请查看 :persistent 属性:
> 点击元素外部或按下 esc 键不会使其停用。

这里有一个 [playground](https://play.vuetifyjs.com/#eNqlVUtu2zAQvQqhTRIgkoImi8BwjPgC7aLLOAtaom3GFEmQI8WGobv3UZL1sVMgRXeamTe/N8PR2ylaWptUpYhm0ZxEYRUnsVhpxuZVzK1tPhsh4y7vpEZ25rMXG4WphFP8OOgYM5Znko4vq+gheX5eRWPbjK+9USUJWMmVYmqt4sLkQsF2DjsxZ0YTl1rkY6UVzktPQtMEqrj3iMOV3Oo4g1U49lF6kptjJ45jj3pqulqTRjZlHEJ8cqel3q4i9popme2h8oJ+tQXebrjy4m5aJ+L9NGxZkik4SaPnaRNxDBmTCGvX7sA0dC3VI+7JGLXmjm0wLZYL7UVfo9S53BqU6OmoArc7Ibc7mrHnB3tYRdORdXFikqRE72F5nqNNWO2MPV26MbbMSFaC/SaHXdlK4acdTIJO+ugs4y3KZSVzDOQ8peIQPyFdQHemMZr4GnVu5EHk8U7w4Ni2F+YLkqf9UYBM50lDuB7U5yZxoFiJDSHM0mOylks3T2n3TZ+OkOM/uAQqjfZXHlCMKw32aS9zWpt82JKuOTybTbMF2BgmNSbajyiCbY3lmO1FeI8AJIQVDst/VWu+OJ1YQKDglgVW16hhSuYE2WU6/h041UCH+X7JySWwvT47aYcl4fEPNHReeYczELGcu/2X7zIcFzzLL+I2kSVuCQupF0UuYy8c3GKrSgylNWKuxp63fXLehs0O5V13mKLFSyYuybme9GSwzbMJW38+xCHZ+RIHob3RcBtuN0SfOWmJgYWyrUsW1jhiGJbYsJptnCnYDc7+TXtX0KYHvF8X9hKAt2+n+p6d6ve7AdPdpw7QcjsE6FmHvWIvC3bb4ZOKq1IELeDztK0PlUX3UVtaXHCbfHij8SM6hYg4ZY0BqztjjSboUHKQcdaIrJ+laZZruOFXISuXaEGptkX6CljqSk2yEHFuitfH5DF5wjg8jdWJ8EW8xvpi6giyiu5HacL/4RupOmST4bHN0KlihT9cSHEVOu22zAmNExae4Pc6unAbd3VhuuosZK9XugbfSuq9v6A68w3Nb+ci/6vlJliI9B4S1vdRUycyNw7R+x+rUpcZ

英文:

It closes because you are clicking on the background. Have a look at the :persistent prop:
>Clicking outside of the element or pressing esc key will not deactivate it.

Here is a playground

huangapple
  • 本文由 发表于 2023年6月9日 06:09:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76436006.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定