vue 封装 dialog对话框【制作选择产品】

父组件

<template>
	<selectProduct @castProduct="getProductFn" @emptyPro="emptyConFn"></selectProduct>
</template>
<script>
    import selectProduct from './selectProduct';
    export default{
        components:{selecctProduct},
        data(){
           return{
                product:"",
           }
        },
        methods:{
           getProductFn(val){
         	this.product = val.productName;
           },
           emptyConFn(){
                this.product = '';
           }
        }
    }
</script>

子组件

<template>
  <div class="selectProductEl">

    <el-input
      :placeholder="title?title:'选择产品'"
      v-model="inputModel"
      @focus="focusInput"
      size="small"
      clearable>
    </el-input>

    <el-dialog title="选择产品"
               width="730px"
               :visible.sync="isOpenDialog"
               :before-close="cancelDialogFn"
               :modal-append-to-body="false"
               append-to-body
               :close-on-click-modal="false">

      <div>
        <ul class="productListUl">
          <li v-for="(item,index) in productList" :key="item.id" @click="productInformation(item)" style="text-align: center;width: 140px">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.productImg"
              @error="imageError(index)"></el-image>
            <div>{{item.productName}}</div>
            <p>{{item.productCode}}</p>
          </li>
        </ul>
      </div>

      <div slot="footer" class="dialog-footer">
<!--        <el-button @click="affirmDialogFn" type="primary">确认</el-button>-->
        <el-button @click="cancelDialogFn">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import getProduct from '../services/getProduct.js';

  export default {
    name: "selectProduct",
    props:['title'],
    data(){
      return {
          /*input-model*/
        inputModel:"",
          /*产品列表*/
        productList:[],
          /*控制打开dialog*/
        isOpenDialog:false,
         titleS:""
      }
    },
    watch:{
      inputModel:function(newData){
          if(newData == ''){
              this.$emit('emptyPro');
          }
      }
    },
    methods:{
      /* input获取焦点 */
      focusInput(){
        this.isOpenDialog = true;
        getProduct.getProduct(this).then((data)=>{
          this.productList = data;
        });
      },
      /* 点击产品项-获取信息-抛给父组件-关闭 */
      productInformation(selectProduct){
        this.$emit('castProduct',selectProduct);
        this.inputModel = selectProduct.productName;
        this.isOpenDialog = false;
      },
      /* 关闭Dialog方法 */
      cancelDialogFn(){
        this.isOpenDialog = false;
      },
      /* 图片加载失败时触发 */
      imageError(index){
        this.productList[index].productImg = 'http://sop20190318.oss-cn-beijing.aliyuncs.com/wxcs/img/chooseProductLogo/10.png'
      }
    }
  }
</script>

<style scoped>
  ul,ol{
    list-style: none;
  }
  .productListUl li{
    display: inline-block;
    margin: 10px 10px;
    padding: 5px;
    background-color: #8fd6ff;
    border: 1px solid #74adce;
    border-radius: 5px;
    cursor: pointer;
  }
  .productListUl li:hover{
    background-color: #bae5ff;
    border: 1px solid #74adce;
  }
</style>

子组件调用的js文件

class GetProduct{
  async getProduct(vue) {
    let url = vue.url + "/productInfo/selectByCompanyIdAndPolicy";
    let listNow = [];
    await vue.$axios.post(url).then(resp => {
      if (resp.data.length > 0) {
        resp.data.forEach(function (v, i) {
          listNow[i] = {
            id: v.id || '',   /*产品id*/
            productCode: v.productCode || '', /*产品型号*/
            productName: v.productName || ''  /*产品名字*/
          }
        })
      }
    });
    return listNow;
  }
}

let getProduct = new GetProduct();
export default getProduct;