前提是已经引入了vue.js， element-ui.js，element-ui.css

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

以下代码是根据element改的，在循环里控制弹框v-if选择显示隐藏就行，dialogVisible = true放到了方法里面

举个栗子：：：
<body>
  <div id="show" class="show">
//循环出dialog事件
    <template v-for="(pet,index) in 5">//遇到的问题：这个后面跟不了key
    //展示点击
      <el-button type="text" @click="popover(index)">
        <div class="img-tiem">
          <img class="img" :src="pet.img" alt="">
          <div class="msg-box">
            <div>2021.11.25</div>
            <div class="msg">dfafa</div>
          </div>
        </div>
      </el-button>
    //弹出框
      <el-dialog style="font-size: 28px;font-weight: bold;color: #000000;" :visible.sync="dialogVisible" width="40%" :show-close="false" v-if="cur == index">
        <img :src="pet.img" alt="">
        <div  style="margin-top: 2rem;">2021.11.25</div>
        <div style="margin-top: 2rem;">dfafa</div>
      </el-dialog>
    </template>
  </div>
</body>

<script>
    export default {
    data() {
      return {
         dialogVisible: false,
         cur: 0,
         
      };
    },
    methods: {
      popover(index) {
          this.cur = index
          this.dialogVisible = true
        }
    }
  }

</script>

# 前端 # ui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue