文章/答案/技术大牛

发布

社区首页 >问答首页 >如何应用适当的元素+消息框样式？

问如何应用适当的元素+消息框样式？
EN

Stack Overflow用户

提问于 2022-08-11 21:20:20

回答 1查看 550关注 0票数 3

这是元素+消息框在我构建的最小页面上的外观：

我还以为它在元素+文档上会长得像。

我使用Vue和vite和ElementPlus。我从vite和element +文档中复制了设置。我玩了很多其他的元素，他们都渲染正确。可以重现问题的最小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"
  }
}

css

vue.js

vite

element-plus

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-12 08:18:58

我认为文档不能很好地解释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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73326994

复制

相似问题

问如何应用适当的元素+消息框样式？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何应用适当的元素+消息框样式？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何应用适当的元素+消息框样式？
EN