src/components/selectPanel.vue

   1 <template>
   2   <div class="border-white">
   3     <div v-if="isShow" class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
   4       <!-- modal -->
   5       <div class="bg-white rounded shadow-lg w-6/12">
   6         <!-- modal header -->
   7         <div class="border-b px-4 py-2 flex justify-between items-center">
   8           <h2 class="font-semibold text-lg">{{title}}</h2>
   9           <button class="text-black" @click="show">&cross;</button>
  10         </div>
  11         <!-- modal body -->
  12         <div class="p-1">
  13           <ul class="select_box overflow-auto max-h-96">
  14               <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
  15           </ul>
  16         </div>
  17         <div class="flex justify-end items-center w-100 border-t p-3">
  18           <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
  19         </div>
  20       </div>
  21     </div>
  22   </div>
  23 </template>
  24
  25 <script>
  26
  27 export default {
  28   name: 'selectPanel',
  29   components: {
  30   },
  31   props: {
  32     dataList: Array,
  33     title: String,
  34   },
  35   computed: {
  36     lists() {
  37       if(!this.dataList){
  38         return []
  39       }
  40       return this.dataList
  41     }
  42   },
  43   methods: {
  44     show() {
  45       this.showToggle()
  46     },
  47     showToggle(){
  48       this.isShow = !this.isShow
  49     },
  50     onSelected(_head){
  51       this.showToggle()
  52       this.$emit("onSelected", _head)
  53     }
  54   },
  55
  56   data() {
  57     return {
  58       isShow: false,
  59     }
  60   },
  61 }
  62 </script>
  63
  64 <!-- Add "scoped" attribute to limit CSS to this component only -->
  65 <style scoped>
  66 .select_box {
  67     border: 1px solid #c5c5c5;
  68 }
  69 .select_box li {
  70     cursor: default;
  71     box-sizing: border-box;
  72     padding: 2px 10px;
  73 }
  74 </style>