<template> <div class="components-input-demo-presuffix"> <!----> <a-input @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: { 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>