Как настроить таргетинг на пустую ссылку внутри ярлыка attr с помощью vue? - PullRequest
Новая
       34

Как настроить таргетинг на пустую ссылку внутри ярлыка attr с помощью vue?

0 голосов
/ 27 апреля 2020

Ни   не устанавливает sh пробел непосредственно перед или внутри ссылки, ни какая-либо ссылка работает нормально при использовании ссылок в атрибуте метки - он только устанавливает флажок. Использование колесика мыши работает. Как настроить таргетинг на новую вкладку простым щелчком левой кнопкой мыши? 

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

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Это делается с помощью модальных: 

      <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>
0 голосов
/ 27 апреля 2020

Это не будет работать. Когда вы связываете элемент <label> с флажком <input> (что и делает Vuetify за кулисами), нажатие на метку должно переключать значение флажка. Это также не может быть ссылка, потому что тогда действие клика будет неоднозначным. Если кто-то нажимает на ссылку, должен ли он открыть ссылку или установить флажок? Похоже, что переключение флажка выигрывает в этом случае.

Если вам нужен текст ссылки на go рядом с вашим флажком, это должен быть отдельный элемент. Вы можете использовать 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>

В этом коде есть рабочая демонстрация .

...