cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menggunakan elemen yang betul serta gaya kotak mesej?

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粉052724364P粉052724364489 hari yang lalu784

membalas semua(2)saya akan balas

  • P粉018653751

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

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

    balas
    0
  • P粉833546953

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

    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>

    balas
    0
  • Batalbalas