vant组件之van-popover气泡框结合list数组列表循环使用

 <van-col span="6" class="dzmyBulk_xmCol" @click="stopUrlHref">
                                            <p class="font14 color7BA">每吨利润(万)</p>
                                            <van-popover v-model="showPopoverFlag[index]" placement="bottom-start" trigger="click" theme="light">
                                                <p class="font14" style="padding: 0 12px;">{{item.tonProfit}}元</p>
                                                <template #reference>
                                                    <p class="font16 color555" style="margin: 0 0">{{item.tonProfit==='' || item.tonProfit===null ? '--' :item.tonProfit}}</p>
                                                </template>
                                            </van-popover>
                                           
                                        </van-col>

<script>
    var vm= new Vue({
        el: '#app',
        data:{
             showPopoverFlag:[],
        }
    })
</script>

<template>关联的是点击的文案，显示气泡内容是在template上p标签内容

stopUrlHref方法就是阻止父类点击事件的发生，防止跳转，也就是一下stopPropagation方法

//js 重叠处理
function stopPropagation(e) {
    e = e || window.event;
    if (e.stopPropagation) { //W3C阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE阻止冒泡方法
    }
}