简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment appliquer le bon élément et le style de boîte de message ?
P粉052724364
P粉052724364 2023-11-23 11:06:50
0
2
621

Voici à quoi ressemble l'élément plus la boîte de message sur une page minimale que j'ai construite :

Je veux qu'il ressemble à celui de la documentation element-plus.

J'utilise Vue avec vite et ElementPlus. J'ai copié les paramètres de vite et element plus la documentation. J'ai joué avec beaucoup d'autres éléments et ils ont tous été rendus correctement. Composant App.vue minimal pouvant reproduire le problème : 

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>

Monvite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  base: ''
})

La page est petite :

<!DOCTYPE html>
<title>Vite + Vue</title>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>

Il en va de même pour le script : 

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Le dernier est à moi package.json :

{
  "name": "v2",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^20.0.2",
    "element-plus": "^2.2.12",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.2",
    "unplugin-auto-import": "^0.11.1",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.6"
  }
}


P粉052724364
P粉052724364

répondre à tous(2)
P粉018653751
P粉0186537512023-11-24 00:19:03 2 plancher

Non requis si vous avez utilisé "unplugin-auto-import/vite" et "unplugin-vue-components/vite" :

Comme +0
Ajouter une réponse
P粉833546953
P粉8335469532023-11-24 00:12:22 1 plancher

Je dirais que la documentation ne l'explique pas assez bien https://element -plus.org/en-US/guide/quickstart.html

Lors de l'utilisation de ElMessage 或 ElMessageBox leurs styles peuvent devoir être importés manuellement. La section Démarrage rapide/Importation à la demande ne dit rien à ce sujet, et tous les autres éléments fonctionnent immédiatement, donc c'est un peu déroutant. 

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import 'element-plus/es/components/message/style/css'; // this is only needed if the page also used ElMessage
import 'element-plus/es/components/message-box/style/css';

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！