listbox.vue 1.76 KB

<style>
.listbox_ul,.listbox_ul ul
{padding-left:10px;line-height: 1.5em;display: block;clear: both;}
.listbox_ul li{cursor: pointer;list-style: none;}
.listbox_ul li span{display: block;}
.listbox_ul li.active > span {color:blue;}
.listbox_ul li.focus > span {background:#ccc;}

</style>
<template>
<ul class="listbox_ul" v-show="show" :class="class">
  <!-- <li>
    <span>库房</span>
    <ul>
      <li>
        <span>皮肤科</span>
        <ul>
          <li>
            <span>外药类</span>
          </li>
        </ul>
      </li>
      <li>
        <span>消化内科</span>
      </li> 
      <li>
        <span>肾病科</span>
      </li> 
      <li>
        <span>供应室</span>
      </li>   
    </ul>
  </li> -->
  <listboxs v-for="item in list" :listobj.sync="item" 
  :openclass="openclass"   :focus="focus" :focusclass="focusclass" 
  :indexid="$index+'_'">
    
  </listboxs>
</ul>
</template>
<script>
var list=[
  {name:'库房',children:[
    {name:'皮肤科',children:[
      {name:'外药类'}
    ]},
    {name:'消化内科'},
    {name:'肾病科'},
    {name:'供应室'}
  ]},
  {name:'库房2',children:[
    {name:'皮肤科2'},
    {name:'皮肤科3'},
    {name:'皮肤科4'},
    {name:'皮肤科5'}
  ]}
];

module.exports={  
  props:{
    list:{
      type:Array,default:function(){
        return list;
      }
    },openclass:{
      type:String,default:'openclass'
    },show:{
      type:Boolean,default:true
    },class:{
      type:Array,default:[]
    },focus:{
      type:String,default:''
    },focusclass:{
      type:String,default:'focusclass'
    }
  },methods:{
  },events:{
    'listboxcall':function(item){

      this.$emit('call',item);
    },'setfocus':function(val){
      this.focus=val;
    }
  },ready:function(){

  }
}
</script>