Files
laws-sinotruk-client/src/components/selection/StandardSelection.vue
T

79 lines
1.8 KiB
Vue

<template>
<div class="selection-wrapper">
<div class="box-title-text">
<a-input class="box-input" :value="value" :title="value" @input="indexClick($event)"
:disabled="isDisabled" readonly
:placeholder="placeholder"/>
<a-button v-if="!isDisabled" type="primary" class="button-box" @click="standardClick">
{{this.$t('standardSelect.standardSelection')}}
</a-button>
</div>
<standard-selection-modal ref="standardSelectionModal" v-bind="$attrs" :value="value" @change="modalInput" @nameChange="modalNameChange" @listChange="modalListChange"></standard-selection-modal>
</div>
</template>
<script>
import StandardSelectionModal from './StandardSelectionModal'
export default {
name: 'StandardSelection',
components: { StandardSelectionModal },
props: {
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
isDisabled: {
type: Boolean,
default: false
}
},
methods: {
// 点击选择标准按钮
standardClick () {
this.$refs.standardSelectionModal.open()
},
// 输入框输入监听
indexClick (event) {
this.$emit('change', event.target.value)
},
modalInput (value) {
this.$emit('change', value)
},
modalNameChange (value) {
this.$emit('nameChange', value)
},
modalListChange (value) {
this.$emit('listChange', value)
}
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.selection-wrapper {
height: 40px;
line-height: 40px;
}
.box-title-text {
height: 100%;
display: flex;
align-items: center;
.box-input {
width: 100%;
}
.button-box {
margin-left: 10px;
}
}
</style>