这个属于iview组件的问题,被RadioGroup包裹的多个Radio选项,默认每个Radio选项的click事件均是单击事件,所以像日期选择器这种需要点击多次来
选择开始或者结束时间的功能组件放在Radio选项里就会有冲突。
解决方案: Radio选项框里放置一个空的div,将DatePicker放在Radio外层实现相关布局和功能。
<FormItem label="有效期: " prop="interests"> <RadioGroup v-model="formOther.interests" @on-change="interestsRadioChange" size="large"> <Row class="radioRow datepickerRadio"> <Radio label="1" :disabled="isDetail"> <span></span> </Radio> <span> <DatePicker class="search-value" v-model="formOther.dateTime" :disabled="isDetail || formOther.interests !== '1'" :editable='false' type="daterange" placement="bottom-start" format="yyyy-MM-dd HH:mm:ss" @on-change="dateTimeChange" placeholder="开始日期 至 结束日期"></DatePicker> </span> </Row> <Row class="radioRow"> <Radio label="0" :disabled="isDetail"> <span class="radioText">领券当日起</span> <Input placeholder="请输入" class="inputStyle" :disabled="isDetail || formOther.interests !== '0'" @on-blur="validInput('currentDay')" v-filterinput="{reg:regExp.num}" v-model="formOther.currentDay"> </Input> <span class="radioText">天内可用</span> </Radio> </Row> <Row> <Radio label="2" :disabled="isDetail"> <span class="radioText">领券次日起</span> <Input placeholder="请输入" class="inputStyle" :disabled="isDetail || formOther.interests !== '2'" @on-blur="validInput('nextDay')" v-filterinput="{reg:regExp.num}" v-model="formOther.nextDay"> </Input> <span class="radioText">天内可用</span> </Radio> </Row> </RadioGroup> </FormItem>