Блог

Главная - Вопросы по программированию - Vuetify старый стиль

Vuetify старый стиль

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я довольно новичок в Vue / Vuetify, я пробовал использовать v-text-field тег vuetify с outline помощью prop.

Почему метка похожа на изображение?

Также шрифт, похоже, не является шрифтом Vuetify.

Мой index.html :

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>test</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>

<body>
    <noscript>
      <strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

введите описание изображения здесь

Ответ №1:

Оберните свой App.vue <v-app> . Помимо прочего, он помещает приложение в v-application класс, который многие стили используют как часть своего селектора. Из документов:

v-app Компонент НЕОБХОДИМ для всех приложений. Это точка монтирования для многих компонентов и функций Vuetify и гарантирует, что она распространяет вариант приложения по умолчанию (темный / светлый) на дочерние компоненты, а также обеспечивает надлежащую кроссбраузерную поддержку определенных событий нажатия в браузерах, таких как Safari. v-app должен отображаться в вашем приложении только ОДИН РАЗ.