要件: 要素のテーブル コンポーネントで画像プレビュー機能を使用する場合、ユーザー インタラクションを最適化するために、マウスを画像の上に置くとマスク レイヤーまたはマスキング レイヤー効果が提供されます。
1. イメージ画像を参照して倍率属性を設定し、アイコンアイコンをプリセットします
//给最大的盒子设置 class
<div class="img-box">
//导入 element 的 image组件
<div>
<el-image :preview-teleported="true" style="width: 75px; height: 75px" class="images"
:hide-on-click-modal=true src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:preview-src-list="['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']"
:initial-index="1" fit="cover" >
</el-image>
</div>
// 使用 element 中查看 icon ，可自定义图片
<el-icon class="icon-box" >
<View />
</el-icon>
</div>現在の効果:
2. ボックスのホバーマスクレイヤーとマスキングレイヤーを実装します。
.img-box {
display: flex;
justify-content: center;
align-items: center;
//父级设置 相对定位，让 icon设置绝对定位时能够以该父级为准。
position: relative;
// icon 设置 绝对定位 让其固定在你想要的合适位置。 样式可调整，自己定位即可。
.icon-box {
display: none;
position: absolute;
top: 35%;
}
}
// 设置鼠标悬浮时的效果
.img-box:hover {
// 给图片设置样式
.images{
background: #000;
img {
// 图片设置 透明度，让背景黑色呈现出来。
opacity: 0.6;
}
//这个可忽略，为了
.el-image-viewer__canvas > img {
opacity: 1;
}
}
// 给 icon 设置样式，.el-icon 是组件自带的类名。
.el-icon {
display: inline-block;
color: #fff;
}
}レンダリング：
3. アイコンが画像をブロックする場合のクリックプレビューイベントの問題を解決しました。
要素内の画像の画像プレビュー ズーム イベントは追加の変数を介して実装されていないため、マスク レイヤーとマスキング レイヤーを作成するときに問題が発生します。マスキング レイヤーに追加のアイコンを追加するにはどうすればよいですか? その場合、このアイコンは元の画像をブロックしますプレビューズームイベント。
実際、手間を気にしないのであれば、要素内のダイアログ ボックスを使用して、画像表示と連動して画像を拡大する効果を実現することができ、このオクルージョン イベントの問題は発生しません。
ここでは、要素の組み込み増幅イベントを使用して、アイコンのオクルージョンの問題を解決できます。アイコンの CSS 設定を提供することで、一文で解決できます。
//在你的 icon 盒子遮挡 image放大事件的元素上，添加该 css 属性。
pointer-events:nonepointer-events 属性は、要素がマウス イベントまたはタッチ イベントにどのように応答するかを制御するために使用されます。none に設定すると、要素はマウス イベントまたはタッチ イベントに応答しませんが、コンテンツ領域内の他の要素はマウス イベントまたはタッチ イベントに応答できます。イベント貫通効果を達成します。
やっと！やっと！テーブル内の要素に画像を使用する場合は、body 要素の上にズーム プレビュー要素を挿入します
画像コンポーネントに:preview-teleported="true" を設定します。そうしないと、次のような奇跡的な効果が得られます。
