简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何套用正確的元素加訊息框樣式？
P粉052724364
P粉052724364 2023-11-23 11:06:50
0
2
620

這是元素加訊息框在我建立的最小頁面上的外觀：

我希望它看起來像 element-plus 文件中的那樣。

我將Vue與vite和ElementPlus一起使用。我從 vite 和 element plus 文件複製了設定。我玩了很多其他元素，它們都渲染正確。可以重現問題的最小 App.vue 元件：

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

我的vite.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: ''
})

頁面很小：

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

腳本也是如此：

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

最後是我的 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

全部回覆(2)
P粉018653751
P粉0186537512023-11-24 00:19:03 2樓

如果您使用了“unplugin-auto-import/vite”和“unplugin-vue-components/vite”，則不需要：

點贊 +0
新增回覆
P粉833546953
P粉8335469532023-11-24 00:12:22 1樓

我想說文件解釋得不夠好 https://element -plus.org/en-US/guide/quickstart.html

#當使用 ElMessage 或 ElMessageBox 時，它們的樣式可能需要手動匯入。 快速啟動/按需導入部分沒有對此做任何說明，並且所有其他元素都可以開箱即用，因此有點令人困惑。 

<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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！