<template>
  <div class="order-product">
    <el-input placeholder="商品" v-model="value" size="mini" class="product-with-select" clearable>
      <el-button slot="append" icon="el-icon-more" @click="showProduct"></el-button>
    </el-input>
    <productDialog ref="product" @confirm="confirm" />
  </div>
  
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class OrderProduct extends Vue {
  value=''

  showProduct(){
    (this.$refs.product as any).setShow(true)
  }
  confirm(data:Array<any>){
    
  }
}
</script>
<style lang="scss" scoped>
.order-product{
  width: 100%;
}
</style>
<style lang="scss">
.product-with-select{
  margin-bottom: 4px;
  .el-input-group__append{
    background-color: #fff !important;
    width: 40px !important;
    .el-icon-more{
      font-size: 20px;
    }
  }  
}
</style>