Commit e7f412e8 authored by JingChao's avatar JingChao

clearable与placeholder

parent 7c1ac607
......@@ -9,10 +9,13 @@
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
<section :style="{'flex':proportion[1] }" class="date-content">
<input
v-model="value" :disabled="disabled" type="text" readonly
v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text"
readonly
@click="showDate">
<!--<slot name="icon"/>-->
<img v-if="showIcon" :src="selectIcon" class="icon" >
<i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
<img v-if="!showClean" :src="selectIcon" class="icon" >
</section>
</section>
</section>
......@@ -26,6 +29,14 @@ export default {
default: null,
type: String | Date,
},
placeholder: {
type: String,
default: null,
},
clearable: {
type: Boolean,
default: false,
},
format: {
default: 'YYYY-MM-DD',
type: String,
......@@ -89,8 +100,24 @@ export default {
selectIcon () {
return this.rightIcon ? this.rightIcon : this.Icon
},
dataPlaceholder () {
return this.placeholder ? this.placeholder : '请输入' + this.label
},
showClean () {
let vm = this
if (vm.clearable && vm.value) {
return true
} else {
return !vm.showIcon
}
},
},
methods: {
cleanValue () {
this.$emit('input', null)
this.$emit('clean', null)
},
showDate () {
let vm = this
if (!vm.disabled) {
......
......@@ -9,11 +9,13 @@
<section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
<section :style="{'flex':proportion[1] }" class="select-content">
<input
v-model="codeName" :disabled="disabled" type="text" readonly
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text"
readonly
@click="showSelect">
<input v-model="value" type="text" hidden>
<i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
<img v-if="showIcon" :src="selectIcon" class="icon" >
<img v-if="!showClean" :src="selectIcon" class="icon" >
</section>
</section>
</section>
......@@ -28,6 +30,14 @@ export default {
default: null,
type: Number | String,
},
placeholder: {
type: String,
default: null,
},
clearable: {
type: Boolean,
default: false,
},
dataArray: {
type: Array,
default: () => [],
......@@ -118,6 +128,14 @@ export default {
}
return name
},
showClean () {
let vm = this
if (vm.clearable && vm.value) {
return true
} else {
return !vm.showIcon
}
},
minHeight () {
if (this.$parent.itemHeight) {
return this.$parent.itemHeight + 'px'
......@@ -128,6 +146,9 @@ export default {
selectIcon () {
return this.rightIcon ? this.rightIcon : this.Icon
},
selectPlaceholder () {
return this.placeholder ? this.placeholder : '请选择' + this.label
},
},
methods: {
selectCall (v1, v2, v3) {
......@@ -140,6 +161,10 @@ export default {
this.$emit('onSelect', v1, v2)
}
},
cleanValue () {
this.$emit('input', null)
this.$emit('clean', null)
},
showSelect () {
let vm = this
if (!vm.disabled) {
......
......@@ -59,7 +59,7 @@
background-color: transparent;
&.active {
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.5);
}
.show-select-wrapper {
......@@ -69,7 +69,7 @@
transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
bottom: 0 !important;
position: absolute !important;
max-height: 50% !important;
max-height: 40% !important;
width: 100%;
left: 0;
top: auto;
......
......@@ -98,12 +98,13 @@
<input slot="content" type="text">
</item>
<SelectFiled
v-model="sex" :dataArray="sexList" :required="true" label="性别"
v-model="sex"
:dataArray="sexList" required clearable label="性别"
value-key="code_value"
value-name="code_value_name" @onSelect="select"/>
</list-item>
<DateFiled
v-model="nowDate" :required="true" label="时间"
v-model="nowDate" required label="时间" clearable
@onSelect="select"/>
<!-- <h-range
......@@ -151,10 +152,10 @@ export default {
rangeBarHeight: 1,
rangeHandleHeight: 20,
sex: 0,
sexList: [{'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'},{'code_value': 0, 'code_value_name': '女'}],
sex: null,
sexList: [{'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'}],
nowDate: '2020-12-25',
nowDate: null,
}
},
watch: {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment