1. <script setup lang="ts">にカスタム命令を部分登録する
具体的な手順:
1. 変数名を定義し、v で始まるルールに従って定義し、v の後の変数名の最初の文字を大文字にします。例: vImg
2. Vue3 と vue2 では、命令のカスタマイズ方法が異なります. 命令の定義オブジェクトに対するフック関数が多数あります. 通常は、実装されているフック関数を直接使用します.
他のフック関数とそのパラメーターの使用については、vue3 カスタム手順の公式ドキュメントを直接参照できます。
3. el は DOM 要素の属性を取得でき、バインディングの value 属性は渡された属性値を取得できます
4. 画像が間違ってロードされた場合は、el.onerrorを呼び出し、取得した値を el の src に割り当てて、画像が間違っている場合の占有を完了します。
実装コード:
<script setup lang="ts">
// 部分的なカスタム イメージ プレースホルダー
const vImg = { Mounted: (el: any, binding: { value: string }) => { console.log(el, 1111111) el.onerror = ( ) => { el.src = binding.value } } </script>
html 構造:
<img
style="width: 80px; height: 80px"
v-img="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:src="userList.avatar"
alt =""
/>
2. main.tsにカスタム命令をグローバルに登録する
具体的な手順:
1. 直接使用: app.directive('ディレクティブ名',{}）
2. 部分登録と同様、実装されているフック関数に業務コードを記述する
実装コード:
// グローバル カスタム エラー プレースホルダー イメージ
app.directive('errorImg', { mounted(el, binding) { console.log(el, 1111) console.log(binding, 222) el.onerror = () => { el. src = binding.value } } })
html で使用:
<img
style="width: 80px; height: 80px"
v-errorImg="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:src="userList.avatar"
alt =""
/>