简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk menggunakan elemen yang betul serta gaya kotak mesej?
P粉052724364
P粉052724364 2023-11-23 11:06:50
0
2
614

Beginilah rupa elemen ditambah kotak mesej pada halaman minimum yang saya bina:

Saya mahu ia kelihatan seperti dalam dokumentasi elemen-tambah.

Saya menggunakan Vue dengan vite dan ElementPlus. Saya menyalin tetapan daripada dokumentasi vite dan elemen ditambah. Saya bermain dengan banyak elemen lain dan semuanya diberikan dengan betul. Komponen App.vue minimum yang boleh menghasilkan semula masalah: 

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

Sayavite.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: ''
})

Halaman itu kecil:

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

Begitu juga dengan skrip: 

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

Yang terakhir adalah milik saya 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

membalas semua(2)
P粉018653751
P粉0186537512023-11-24 00:19:03 Tingkat 2

Tidak diperlukan jika anda menggunakan "unplugin-auto-import/vite" dan "unplugin-vue-components/vite":

Suka +0
Tambah Balasan
P粉833546953
P粉8335469532023-11-24 00:12:22 Tingkat 1

Saya akan katakan dokumentasi tidak menerangkannya dengan cukup baik https://element -plus.org/en-US/guide/quickstart.html

Apabila menggunakan ElMessage 或 ElMessageBox gaya mereka mungkin perlu diimport secara manual. Bahagian Mula Pantas/Import Atas Permintaan tidak menyatakan apa-apa tentang perkara ini, dan semua elemen lain berfungsi di luar kotak, jadi ia agak mengelirukan. 

<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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！