iview---自定义下拉框

这是演示自定义下拉框，仅仅是打开想要实现自定义下拉框的网友思路。重要事说三遍：仅仅是演示，仅仅是演示，仅仅是演示。

 

fselect.vue

<template>

    <div class="Fs-main" >
        <Dropdown  trigger="custom"  :visible="visible"  :placement="optionsData.placement"   style="left:0px;width: 100%"  >
          <Input v-model="row.contract_no" type="text"    icon="md-arrow-dropdown"   @on-click="onDropdown"/>
            <Icon type="ios-search" slot="prefix"  />
          </Input>
          <DropdownMenu slot="list"  >
            <DropdownItem>驴打滚 {
    {options.bb}}</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem disabled>豆汁儿</DropdownItem>
            <DropdownItem>冰糖葫芦</DropdownItem>
            <DropdownItem divided>北京烤鸭</DropdownItem>
          </DropdownMenu>
        </Dropdown>
    </div>


</template>

<script>
    export default {

      name: "f-select",
      props:["options"],
      created(){
        this.optionsData=this.options;
      },

      data(){
          return{
            modelName:"f-select",
            optionsData:{},
            visible:false,
            dropdownClass:"Dropdown",
            row:{
              contract_no:""
            }

          }
      },

      methods:{
        onClick(){
          this.classStyle="Fs-root-show"
        },
        onDropdown(){
          console.log(this.modelName &