vue-material: MdDialogPrompt не отображается должным образом - PullRequest
Новая
       21

vue-material: MdDialogPrompt не отображается должным образом

0 голосов
/ 24 апреля 2019

Вот что я вижу:

enter image description here

Это проблема CSS?

У меня CSS импортируется так: 

import 'vue-material/dist/vue-material.min.css'

В моем файле src/main.js/.

Не уверен, почему это не отображается должным образом.

Вот мой код компонента (src/components/NicknamePrompt.vue): 

<template>
    <div>
        <md-dialog-prompt
            v-model="nickname"
            :md-active.sync="active"
            md-title="Enter a nickname"
            md-input-maxlength="30"
            md-input-placeholder="Nickname..."
            md-confirm-text="Done"
        />
        <md-button
            class="md-primary md-raised"
            @click="active = true"
        >
            Set Nickname
        </md-button>
        <span v-if="nickname">Nickname: {{ nickname }}</span>
    </div>
</template>

<script>
export default {
    name: 'NicknamePrompt',
    data: () => ({
        active: false,
        nickname: null
    })
}
</script>

<style scoped>
</style>

А вот мой src/main.js файл: 

import Vue from 'vue'
import VueMaterial from 'vue-material'
import VueSocketIO from 'vue-socket.io'

import App from './App.vue'
import store from './store'
import router from './router'

import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

const connectionUrl = 'http://lizardgizzards.com:' + process.env.VUE_APP_PORT

Vue.use(new VueSocketIO({
    debug: true,
    connection: connectionUrl,
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
    options: { }
}))

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
...