Vue 实现简单弹窗

选中input 弹出选项框

显示弹窗

首先要在components中新建两个组件 要实现子组件向父组件传值

selest.vue 里面的内容

<template>
  <div>
    <h1>选择管理员</h1>
    <div class="sel" @click="show">{
   {
    str }}</div>
    <template v-if="bol">
      <alt @ok="getData($event)" @cancel="close"></alt>
    </template>
  </div>
</template>

<script>
import Alt from "./alt.vue";
export default {
   
  name: "Select",
  data() {
   
    return {
   
      bol: false,
      str: '',
    };
  },
  components: {
   
    Alt,
  },
  methods: {
   
    show() {
   
      this.bol = true;
    },
    // 获取数据方法
    getData(data) {
   
      // 关闭弹出层
      this.bol = false;
      console.log(data);
      this.str = data;
    },
    // 关闭弹窗
    close() {
   
      // 关闭弹出层
      this.bol = false;
    },
  },
};
</script>

<style scoped>
.sel {
   
  width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  margin: 0 auto;
}
</style>

alt.vue 里面的内容

<template>
  <div class="mark">
    <div class="alert">
      <!-- 内容 -->