Modal update width prop
This commit is contained in:
梁灏
parent
04fb29abf4
commit
f03c4e6409
2 changed files with 92 additions and 54 deletions
|
|
@ -1,18 +1,67 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
{{ val }}
|
|
||||||
<Button @click="confirm">标准</Button>
|
|
||||||
<Button @click="custom">自定义按钮文字</Button>
|
|
||||||
<Button @click="async">异步关闭</Button>
|
|
||||||
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
||||||
<Modal
|
<Modal
|
||||||
v-model="modal1"
|
v-model="modal1"
|
||||||
|
width="70"
|
||||||
title="普通的Modal对话框标题"
|
title="普通的Modal对话框标题"
|
||||||
@on-ok="ok"
|
@on-ok="ok"
|
||||||
@on-cancel="cancel">
|
@on-cancel="cancel">
|
||||||
<p>对话框内容</p>
|
<div>
|
||||||
<p>对话框内容</p>
|
<Form :model="formItem" :label-width="80">
|
||||||
<p>对话框内容</p>
|
<Form-item label="输入框">
|
||||||
|
<Input v-model="formItem.input" placeholder="请输入"></Input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="选择器">
|
||||||
|
<Select v-model="formItem.select" placeholder="请选择">
|
||||||
|
<Option value="beijing">北京市</Option>
|
||||||
|
<Option value="shanghai">上海市</Option>
|
||||||
|
<Option value="shenzhen">深圳市</Option>
|
||||||
|
</Select>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="日期控件">
|
||||||
|
<Row>
|
||||||
|
<Col span="11">
|
||||||
|
<Date-picker type="date" placeholder="选择日期" v-model="formItem.date"></Date-picker>
|
||||||
|
</Col>
|
||||||
|
<Col span="2" style="text-align: center">-</Col>
|
||||||
|
<Col span="11">
|
||||||
|
<Time-picker type="time" placeholder="选择时间" v-model="formItem.time"></Time-picker>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="单选框">
|
||||||
|
<Radio-group v-model="formItem.radio">
|
||||||
|
<Radio label="male">男</Radio>
|
||||||
|
<Radio label="female">女</Radio>
|
||||||
|
</Radio-group>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="多选框">
|
||||||
|
<Checkbox-group v-model="formItem.checkbox">
|
||||||
|
<Checkbox label="吃饭"></Checkbox>
|
||||||
|
<Checkbox label="睡觉"></Checkbox>
|
||||||
|
<Checkbox label="跑步"></Checkbox>
|
||||||
|
<Checkbox label="看电影"></Checkbox>
|
||||||
|
</Checkbox-group>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="开关">
|
||||||
|
<Switch v-model="formItem.switch" size="large">
|
||||||
|
<span slot="open">开启</span>
|
||||||
|
<span slot="close">关闭</span>
|
||||||
|
</Switch>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="滑块">
|
||||||
|
<Slider v-model="formItem.slider" range></Slider>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="文本域">
|
||||||
|
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item>
|
||||||
|
<Button type="primary">提交</Button>
|
||||||
|
<Button type="ghost" style="margin-left: 8px">取消</Button>
|
||||||
|
</Form-item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -20,8 +69,25 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
formItem: {
|
||||||
|
input: '',
|
||||||
|
select: '',
|
||||||
|
radio: 'male',
|
||||||
|
checkbox: [],
|
||||||
|
switch: true,
|
||||||
|
date: '',
|
||||||
|
time: '',
|
||||||
|
slider: [20, 50],
|
||||||
|
textarea: ''
|
||||||
|
},
|
||||||
modal1: false,
|
modal1: false,
|
||||||
val: ''
|
model13: '',
|
||||||
|
loading1: false,
|
||||||
|
options1: [],
|
||||||
|
model14: [],
|
||||||
|
loading2: false,
|
||||||
|
options2: [],
|
||||||
|
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']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -31,51 +97,22 @@
|
||||||
cancel () {
|
cancel () {
|
||||||
this.$Message.info('点击了取消');
|
this.$Message.info('点击了取消');
|
||||||
},
|
},
|
||||||
confirm () {
|
remoteMethod1 (query) {
|
||||||
this.$Modal.confirm({
|
if (query !== '') {
|
||||||
title: '确认对话框标题',
|
this.loading1 = true;
|
||||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
setTimeout(() => {
|
||||||
render: (h) => {
|
this.loading1 = false;
|
||||||
return h('Input', {
|
const list = this.list.map(item => {
|
||||||
props: {
|
return {
|
||||||
value: this.val,
|
value: item,
|
||||||
autofocus: true
|
label: item
|
||||||
},
|
};
|
||||||
on: {
|
});
|
||||||
input: (val) => {
|
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
|
||||||
this.val = val;
|
}, 200);
|
||||||
}
|
} else {
|
||||||
}
|
this.options1 = [];
|
||||||
}, '一个按钮')
|
}
|
||||||
},
|
|
||||||
onOk: () => {
|
|
||||||
this.$Message.info('点击了确定');
|
|
||||||
},
|
|
||||||
onCancel: () => {
|
|
||||||
this.$Message.info('点击了取消');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
custom () {
|
|
||||||
this.$Modal.confirm({
|
|
||||||
title: '确认对话框标题',
|
|
||||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
|
||||||
okText: 'OK',
|
|
||||||
cancelText: 'Cancel'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async () {
|
|
||||||
this.$Modal.confirm({
|
|
||||||
title: '确认对话框标题',
|
|
||||||
content: '<p>对话框将在 2秒 后关闭</p>',
|
|
||||||
loading: true,
|
|
||||||
onOk: () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$Modal.remove();
|
|
||||||
this.$Message.info('异步关闭了对话框');
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -121,8 +121,9 @@
|
||||||
mainStyles () {
|
mainStyles () {
|
||||||
let style = {};
|
let style = {};
|
||||||
|
|
||||||
|
const width = parseInt(this.width);
|
||||||
const styleWidth = {
|
const styleWidth = {
|
||||||
width: `${this.width}px`
|
width: width <= 100 ? `${width}%` : `${width}px`
|
||||||
};
|
};
|
||||||
|
|
||||||
const customStyle = this.styles ? this.styles : {};
|
const customStyle = this.styles ? this.styles : {};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue