エレメントプラスのちょっとした問題点まとめ

1 つ目は、Notification 通知コンポーネントです。このコンポーネントは当初、公式 Web サイトで事例に応じて導入および使用されていましたが、期待した結果が表示されませんでした。公式 Web サイトの例は次のとおりです。

<script lang="ts" setup>
import { ElNotification } from 'element-plus'
const open1 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}
</script>

導入後もページの構造は変わっていませんでしたが、前回の記事を思い出して問題点を発見しました、コンポーネント間の関係が正しく導入されていないはずです、公式サイトでインストール手順を確認してみました再び手がかりを見つけました。完全インポート

npm i unplugin-element-plus -D

まずこのコマンドを実行してプラグインをインストールします。v3+ts を使用している場合は、これらを vite.config.ts ファイルに挿入します。

import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

その後、公式ウェブサイトのケースに従ってインポートします。

2 つ目はカルーセル回転ランタンコンポーネントです。

これには、切り替えるための 2 つの左右の矢印が付いていますが、カスタムアイコンアイコンを使用したい場合があります。どうすれば使用できますか?

公式ウェブサイトでは、prev と next という 2 つのメソッドが定義されています。1 つは前のメソッドを切り替えることであり、もう 1 つは次のメソッドを切り替えることです。この 2 つのメソッドを使用し、左矢印、右矢印 next にクリックイベント prev を追加します。次に独自の定義スイッチを開始します

サンプルコードは次のとおりです

import {ref} from "vue"
const banner=ref()

function prev(){
    banner.value.prev()
}

function next(){
    banner.value.next()
}

このようにして、トグルアイコンをカスタマイズできます

余談: スクロールバーの影響をなくすにはどうすればよいでしょうか?

設定できます

マージン右: calc(100% - 100vw);

100vw はスクロールバーの幅を含むブラウザの幅、100% はスクロールバーの幅を除く使用可能な幅、ページにスクロールバーがない場合は margin-right: 0、スクロールバーがある場合は margin-right: 0 です。はスクロールバー、margin-right: -17px、コンテンツは右に 17px 拡張されます (スクロールバーの幅)

ただし、元のスタイルはこのように変更される可能性があります。root を使用できます。具体的な実装は次のとおりです。


:root {
  overflow-y: auto;
  overflow-x: hidden;
}
 
:root body {
  position: absolute;
}
 
body {
  width: 100vw;
  overflow: hidden;

エレメントプラスのちょっとした問題点まとめ

おすすめ