myPopup.vue

<template>
  <div class="components-input-demo-presuffix">
    <!---->
    <a-input v-if="showModal" @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" :type="icon" :title="title"/>
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <j-popup-onl-report
      ref="jPopupOnlReport"
      :url="url" 
      :title="title"
      :columns="columns"
      :multi="multi"
      :modalWidth="modalWidth"
      @ok="callBack"
    />

  </div>
</template>

<script>
  import JPopupOnlReport from './modal/JPopupOnlReport'

  export default {
    name: 'JPopup',
    components: {
      JPopupOnlReport
    },
    props: {
      showModal: {
        type: Boolean,
        required: false,
        default: true
      },
      title: {
        type: String,
        default: '',
        required: false
      },
      url: {
        type: String,
        default: '',
        required: false
      },
      columns: {
        type: Array,
        default: [],
        required: true
      },
      placeholder: {
        type: String,
        default: '请选择',
        required: false
      },
      modalWidth: {
        type: Number,
        default: 1200,
        required: false
      },
      value: {
        type: String,
        required: false
      },
      triggerChange: {
        type: Boolean,
        required: false,
        default: true
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      multi: {
        type: Boolean,
        required: false,
        default: false
      },
      spliter:{
        type: String,
        required: false,
        default: ','
      },
      icon: {
        type: String,
        default: 'cluster',
        required: false
      }
    },
    data() {
      return {
        showText: ''
      }
    },
    watch: {
      value: {
        immediate: true,
        handler: function(val) {
          if (!val) {
            this.showText = ''
          } else {
            this.showText = val.split(this.spliter).join(',')
          }
        }
      }
    },
    created() {
    },
    mounted() {
      
    },
    methods: {
      openModal() {
        if (this.disabled === false) {
          this.$refs.jPopupOnlReport.show()
        }
      },
      handleEmpty() {
        // 禁用时，不允许清空内容
        if (this.disabled) {
          return
        }
        this.showText = ''
        if (this.triggerChange) {
          this.$emit('callback', '')
        } else {
          this.$emit('input', '', '')
        }
      },
      callBack(rows) {
        if (this.triggerChange) {
          this.$emit('callback', rows)
        } else {
          this.$emit('input', str, rows)
        }
      }
    }
  }
</script>
<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }

  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }

  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>