Commit 7c41ecb3d6ed1c37c4eef0d5a003bffc274fb9a0
1 parent
56358029
fixed #1099
Showing
2 changed files
with
36 additions
and
96 deletions
Show diff stats
examples/routers/modal.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Button type="primary" @click="modal1 = true">显示对话框</Button> | ||
| 4 | - <Modal | ||
| 5 | - v-model="modal1" | ||
| 6 | - width="70" | ||
| 7 | - title="普通的Modal对话框标题" | ||
| 8 | - @on-ok="ok" | ||
| 9 | - :transfer="true" | ||
| 10 | - @on-cancel="cancel"> | 3 | + <i-button @click="modal=true">show modal</i-button> |
| 4 | + <Modal v-model="modal" @on-ok="resetForm" @on-cancel="resetForm" title="表单"> | ||
| 11 | <div> | 5 | <div> |
| 12 | - <Form :model="formItem" :label-width="80"> | ||
| 13 | - <Form-item label="输入框"> | ||
| 14 | - <Input v-model="formItem.input" placeholder="请输入"></Input> | ||
| 15 | - </Form-item> | ||
| 16 | - <Form-item label="选择器"> | ||
| 17 | - <Select v-model="formItem.select" placeholder="请选择"> | ||
| 18 | - <Option value="beijing">北京市</Option> | ||
| 19 | - <Option value="shanghai">上海市</Option> | ||
| 20 | - <Option value="shenzhen">深圳市</Option> | ||
| 21 | - </Select> | ||
| 22 | - </Form-item> | ||
| 23 | - <Form-item label="日期控件"> | ||
| 24 | - <Row> | ||
| 25 | - <Col span="11"> | ||
| 26 | - <Date-picker type="date" placeholder="选择日期" v-model="formItem.date"></Date-picker> | ||
| 27 | - </Col> | ||
| 28 | - <Col span="2" style="text-align: center">-</Col> | ||
| 29 | - <Col span="11"> | ||
| 30 | - <Time-picker type="time" placeholder="选择时间" v-model="formItem.time"></Time-picker> | ||
| 31 | - </Col> | ||
| 32 | - </Row> | ||
| 33 | - </Form-item> | ||
| 34 | - <Form-item label="单选框"> | ||
| 35 | - <Radio-group v-model="formItem.radio"> | ||
| 36 | - <Radio label="male">男</Radio> | ||
| 37 | - <Radio label="female">女</Radio> | ||
| 38 | - </Radio-group> | ||
| 39 | - </Form-item> | ||
| 40 | - <Form-item label="多选框"> | ||
| 41 | - <Checkbox-group v-model="formItem.checkbox"> | ||
| 42 | - <Checkbox label="吃饭"></Checkbox> | ||
| 43 | - <Checkbox label="睡觉"></Checkbox> | ||
| 44 | - <Checkbox label="跑步"></Checkbox> | ||
| 45 | - <Checkbox label="看电影"></Checkbox> | ||
| 46 | - </Checkbox-group> | ||
| 47 | - </Form-item> | ||
| 48 | - <Form-item label="开关"> | ||
| 49 | - <Switch v-model="formItem.switch" size="large"> | ||
| 50 | - <span slot="open">开启</span> | ||
| 51 | - <span slot="close">关闭</span> | ||
| 52 | - </Switch> | ||
| 53 | - </Form-item> | ||
| 54 | - <Form-item label="滑块"> | ||
| 55 | - <Slider v-model="formItem.slider" range></Slider> | ||
| 56 | - </Form-item> | ||
| 57 | - <Form-item label="文本域"> | ||
| 58 | - <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | ||
| 59 | - </Form-item> | ||
| 60 | - <Form-item> | ||
| 61 | - <Button type="primary">提交</Button> | ||
| 62 | - <Button type="ghost" style="margin-left: 8px">取消</Button> | ||
| 63 | - </Form-item> | ||
| 64 | - </Form> | 6 | + <i-select ref="formSelect" filterable remote clearable :remote-method="remoteMethod" :loading="loading"> |
| 7 | + <i-option v-for="option in options" :value="option.value" :key="option.value">{{option.label}}</i-option> | ||
| 8 | + </i-select> | ||
| 65 | </div> | 9 | </div> |
| 66 | </Modal> | 10 | </Modal> |
| 67 | </div> | 11 | </div> |
| @@ -70,25 +14,19 @@ | @@ -70,25 +14,19 @@ | ||
| 70 | export default { | 14 | export default { |
| 71 | data () { | 15 | data () { |
| 72 | return { | 16 | return { |
| 73 | - formItem: { | ||
| 74 | - input: '', | ||
| 75 | - select: '', | ||
| 76 | - radio: 'male', | ||
| 77 | - checkbox: [], | ||
| 78 | - switch: true, | ||
| 79 | - date: '', | ||
| 80 | - time: '', | ||
| 81 | - slider: [20, 50], | ||
| 82 | - textarea: '' | ||
| 83 | - }, | ||
| 84 | - modal1: false, | ||
| 85 | - model13: '', | ||
| 86 | - loading1: false, | ||
| 87 | - options1: [], | ||
| 88 | - model14: [], | ||
| 89 | - loading2: false, | ||
| 90 | - options2: [], | ||
| 91 | - list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'] | 17 | + modal: false, |
| 18 | + loading: false, | ||
| 19 | + options: [], | ||
| 20 | + cityList: [ | ||
| 21 | + { | ||
| 22 | + value: "beijing", | ||
| 23 | + label: "北京市" | ||
| 24 | + }, | ||
| 25 | + { | ||
| 26 | + value: "shanghai", | ||
| 27 | + label: "上海市" | ||
| 28 | + } | ||
| 29 | + ] | ||
| 92 | } | 30 | } |
| 93 | }, | 31 | }, |
| 94 | methods: { | 32 | methods: { |
| @@ -98,22 +36,19 @@ | @@ -98,22 +36,19 @@ | ||
| 98 | cancel () { | 36 | cancel () { |
| 99 | this.$Message.info('点击了取消'); | 37 | this.$Message.info('点击了取消'); |
| 100 | }, | 38 | }, |
| 101 | - remoteMethod1 (query) { | ||
| 102 | - if (query !== '') { | ||
| 103 | - this.loading1 = true; | ||
| 104 | - setTimeout(() => { | ||
| 105 | - this.loading1 = false; | ||
| 106 | - const list = this.list.map(item => { | ||
| 107 | - return { | ||
| 108 | - value: item, | ||
| 109 | - label: item | ||
| 110 | - }; | ||
| 111 | - }); | ||
| 112 | - this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); | ||
| 113 | - }, 200); | ||
| 114 | - } else { | ||
| 115 | - this.options1 = []; | ||
| 116 | - } | 39 | + remoteMethod(query) { |
| 40 | + this.loading = true; | ||
| 41 | + setTimeout(() => { | ||
| 42 | + this.loading = false; | ||
| 43 | + this.options = this.cityList; | ||
| 44 | + }, 200); | ||
| 45 | + }, | ||
| 46 | + resetForm() { | ||
| 47 | + //加个计时器，就能解决这个定位问题了 | ||
| 48 | + // setTimeout(()=> { | ||
| 49 | + this.$refs["formSelect"].clearSingleSelect(); | ||
| 50 | + this.options = []; | ||
| 51 | + // }, 300) | ||
| 117 | } | 52 | } |
| 118 | } | 53 | } |
| 119 | } | 54 | } |
src/styles/components/select-dropdown.less
| @@ -14,4 +14,9 @@ | @@ -14,4 +14,9 @@ | ||
| 14 | box-shadow: @shadow-base; | 14 | box-shadow: @shadow-base; |
| 15 | position: absolute; | 15 | position: absolute; |
| 16 | z-index: @zindex-select; | 16 | z-index: @zindex-select; |
| 17 | +} | ||
| 18 | +.@{modal-prefix-cls} { | ||
| 19 | + .@{select-dropdown-prefix-cls} { | ||
| 20 | + position: absolute !important; | ||
| 21 | + } | ||
| 17 | } | 22 | } |
| 18 | \ No newline at end of file | 23 | \ No newline at end of file |