1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <template>
- <div class="zoom-image">
- <img :src="url" @click="imagePreview(url)" />
- <div id="tbody"></div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {};
- },
- props: ["url"],
- methods: {
- imagePreview(src) {
- console.log(src)
- let body = document.querySelector("#tbody");
- let mask = document.createElement("div");
- let img = document.createElement("img");
- img.src = src + "&width=1000";
- mask.classList.add("mask");
- this.setStyle(mask, img);
- this.setEventListener(body, mask);
- img.onload = function() {
- mask.appendChild(img);
- body.appendChild(mask);
- };
- },
- setStyle(mask, img) {
- mask.style.position = "fixed";
- mask.style.top = 0;
- mask.style.left = 0;
- mask.style.right = 0;
- mask.style.bottom = 0;
- mask.style.background = "rgba(0,0,0,0.8)";
- mask.style.zIndex = "99";
- img.style.position = "absolute";
- img.style.top = "50%";
- img.style.left = "50%";
- img.style.width = "100%";
- img.style.transform = "translate(-50%, -50%)";
- },
- setEventListener(body, mask) {
- mask.addEventListener("click", function() {
- body.removeChild(mask);
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .zoom-image {
- width: 102px;
- height: 102px;
- padding: 5px;
- border-radius: 4px;
- border: 1px solid rgba(195, 199, 203, 1);
- display: inline-block;
- img {
- width: 100%;
- height: 100%;
- border-radius: 1px;
- }
- }
- </style>
|