简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Comment appliquer le bon élément et le style de boîte de message ?

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粉052724364P粉052724364346 Il y a quelques jours670

répondre à tous(2)je répondrai

  • P粉018653751

    P粉0186537512023-11-24 00:19:03

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

    répondre
    0
  • P粉833546953

    P粉8335469532023-11-24 00:12:22

    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>

    répondre
    0
  • Annulerrépondre