0

在标签属性中使用链接时，无论 是在链接之前或链接中立即建立空格，还是任何类型的链接都不能正常工作 - 它只选中该框。使用鼠标滚轮有效。如何通过简单的左键单击来定位新标签？

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

3 回答 3

0

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

如果您需要将链接文本放在复选框旁边，则它必须是其自己的单独元素。您可以使用 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>

此 codeply 中有一个工作演示。

于 2020-04-27T17:00:55.167 回答
0

只需@click.stop在链接上使用：

<v-checkbox v-model="checkbox">
   <template v-slot:label>
      <a href="/#/URL" target="_blank" @click.stop> URL_A </a>
   </template>
</v-checkbox>
于 2020-10-08T18:30:41.047 回答
-1

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

      <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>
于 2020-04-28T22:11:32.360 回答