如何使用 vue 定位标签属性中的空白 link？

Question

  在 link 之前或之内建立 space，在标签内使用 link 时，任何类型的 link 都不能正常工作attribute - 它只检查复选框。使用鼠标滚轮有效。如何通过简单的左键单击定位到新标签页？

<v-checkbox
   v-model="checkbox"
   :rules="[v => !!v || 'Its required!']"
   label=""
   required
   >
   <template v-slot:label>
      <a href="/#/URL" target="_blank" @click.stop.prevent="dialog = true"> URL_A </a> &nbsp;
      <v-btn href="/#/URL" target="_blank" > URL_B </v-btn>
      &nbsp;
      <navigation-link url="/#/URL" target="_blank">
         URL_C
      </navigation-link>
   </template>
</v-checkbox>

Answer 1

这行不通。当您将 <label> 元素与复选框 <input> 相关联时（这是 Vuetify 在幕后所做的），单击标签应该会切换复选框的值。它也不能是 link ，因为那样的话点击动作会不明确。如果有人单击 link，它应该打开 link 还是切换复选框？在这种情况下，似乎切换复选框会获胜。

如果您需要 link 文本放在复选框旁边，它必须是自己的独立元素。您可以使用 CSS 让两个元素对齐：

<v-row>
  <v-col cols="12">
    <v-checkbox
      v-model="checkbox1"
      color="primary"
      :rules="[v => !!v || 'Its required!']"
      required
    >
      <template #label>
        <a href="https://example.com" target="_blank">This link cannot be clicked</a>
      </template>
    </v-checkbox>
  </v-col>
  <v-col cols="12">
    <v-checkbox
      v-model="checkbox1"
      class="pa-0 ma-0"
      color="primary"
      :rules="[v => !!v || 'Its required!']"
      required
      style="float: left;"
    ></v-checkbox>
    <a href="https://example.com" target="_blank">This link CAN be clicked</a>
  </v-col>
</v-row>

There's a working demo in this codeply.

Answer 2

它是通过使用模态完成的：

      <v-container v-if="showModal" class="modal-mask white--text">
        <transition name="modal">
          <v-container >
            <v-container class="modal-wrapper">
              <v-container class="modal-dialog">
                <v-container class="modal-content">
                  <v-container class="modal-header">
                    <h4 class="modal-title">Title</h4>
                  </v-container>
                  <v-container class="modal-body">
                    Lorem ipsum
                  </v-container>
                  <v-container two-line>
                  <v-btn color="primary" class="close" @click="showModal=false">
                    <span>Close</span>
                  </v-btn>
                  </v-container>
                </v-container>
              </v-container>
            </v-container>
          </v-container>
        </transition>
      </v-container>

      <script>        
        export default {
          data: () => {
            return {
              showModal: false
            }
          }
        }
      </script>

      <style>
        .modal-mask {
          position: fixed;
          z-index: 9998;
          top: 0%;
          left: -10px;
          height: 100%;
          max-width: none;
          background-color: rgba(0, 0, 0, .8);
          display: table;
          transition: opacity .3s ease;
        }

        .modal-wrapper {
          display: table-cell;
          vertical-align: top;
        }

        .modal-dialog{
          overflow-y: initial !important
        }
        .modal-body{
          height: 500px;
          overflow-y: auto;
        }
      </style>

Answer 3

只需在 link 上使用 @click.stop:

<v-checkbox v-model="checkbox">
   <template v-slot:label>
      <a href="/#/URL" target="_blank" @click.stop> URL_A </a>
   </template>
</v-checkbox>

如何使用 vue 定位标签属性中的空白 link？

How to target a blank link within the label attr with vue?

vue.js

label

vuetify.js

v-slot