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 + " show(target)   is begin");
          if (!this.currentVisible) {
            this.visible=true;
          }else {
            this.visible=false;
          }
          this.$refs.reference=this.optionsData.target;
          this.currentVisible=!this.currentVisible;

        },
        show(target){
          console.log(this.modelName + " show(target)   is begin");
          if (!this.currentVisible) {
            this.visible=true;
          }else {
            this.visible=false;
          }
          this.$refs.reference=target;
          this.currentVisible=!this.currentVisible;
        }

      }

    }

</script>

<style lang="less" >
  .Fs-main{
    width: 200px;
    position: relative;
    Dropdown{
      left:0;
      width: 100%;
    }
  }


</style>

　　

 

测试：

<template>
  <Form ref="crud-two-update-form"   class="fselect-test-root"      :label-width="100" >
    <!--<div class="fselect-test-content" @click="onClick">-->
 

    <div class="fselect-test-content" ref="contract_no_select">

        <FormItem label="合同编号" class="span2col"  ref="" >
             <FSelect ref="contract_no_select"  :options="fselectOptions" ></FSelect>
        </FormItem>
    </div>
  </Form>
</template>

<script>
  import FSelect from "@/views/dc-general/fselect.vue"

  export default {
    name: "fselect-test",
    components: {//引入vue组件文件后，还须要在这里定义，才能正常使用
      FSelect
    },
    data() {//组件实例的属性定义区，也可定义方法
      return {
        modelName: "fselect-test",//模块名称，重点供日志输出 定位用
        row:{
          myfield1:""
        },
        fselectOptions:{
          placement:"bottom",
          target:this.$refs["contract_no_select"],
          aa:"helloaa",
          bb:"bb2"
        }

      }
    },
    methods: {
      onClick() {
        console.log(this.modelName + " onClick begin ");
        this.$refs.contract_no_select.show(event.target);
      }
    }
  }
</script>

<style  >
  .fselect-test-root{
    width:100%;
    height:100vh;
    /*background: #2b85e4;*/
  }
</style>