RabbitMQ介绍与python操作RabbitMQ

Vant安装过程点击进入查看

app.vue中的代码如下：

<template>
  <div ref="box" class="box" v-html="imageText"></div>
</template>
<script setup>
import {
      
       showImagePreview } from 'vant';
import {
      
      onMounted, ref} from "vue";
// 给一段文本字符串的html
const imageText = ref(`<div class="box">
    <img style="width: 100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt="">
    <img style="width: 100%" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" alt="">
  </div>`)

// 方式一 querySelector方式
onMounted(()=>{
      
      
  const box = document.querySelector('.box');
  console.log('box', box)
  // const image_list = box.value.querySelectorAll('img')
  const image_list = box.querySelectorAll('img')
  const images = []
  image_list.forEach((item,index)=>{
      
      
    images.push(item.src)
    item.onclick = ()=>{
      
      
      showImagePreview({
      
      
        images,
        startPosition: index
      })
    }
  })
})

// 方式二 ref方式
// const box = ref(null)
// onMounted(()=>{
      
      
//   const image_list = box.value.querySelectorAll('img')
//   const images = []
//   image_list.forEach((item,index)=>{
      
      
//     images.push(item.src)
//     item.onclick = ()=>{
      
      
//       showImagePreview({
      
      
//         images,
//         startPosition: index
//       })
//     }
//   })
// })
</script>

<style scoped lang="less">

</style>

效果如下：

未点击时：

点击完后