other / mew-iview

Commit f03c4e6409f0a454336f6e848728a223806bb8c8

Authored by 梁灏
1 parent 04fb29ab

Modal update width prop

Showing 2 changed files with 92 additions and 54 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @f03c4e6
1 1 <template>
2 2 <div>
3   - {{ val }}
4   - <Button @click="confirm">标准</Button>
5   - <Button @click="custom">自定义按钮文字</Button>
6   - <Button @click="async">异步关闭</Button>
7 3 <Button type="primary" @click="modal1 = true">显示对话框</Button>
8 4 <Modal
9 5 v-model="modal1"
  6 + width="70"
10 7 title="普通的Modal对话框标题"
11 8 @on-ok="ok"
12 9 @on-cancel="cancel">
13   - <p>对话框内容</p>
14   - <p>对话框内容</p>
15   - <p>对话框内容</p>
  10 + <div>
  11 + <Form :model="formItem" :label-width="80">
  12 + <Form-item label="输入框">
  13 + <Input v-model="formItem.input" placeholder="请输入"></Input>
  14 + </Form-item>
  15 + <Form-item label="选择器">
  16 + <Select v-model="formItem.select" placeholder="请选择">
  17 + <Option value="beijing">北京市</Option>
  18 + <Option value="shanghai">上海市</Option>
  19 + <Option value="shenzhen">深圳市</Option>
  20 + </Select>
  21 + </Form-item>
  22 + <Form-item label="日期控件">
  23 + <Row>
  24 + <Col span="11">
  25 + <Date-picker type="date" placeholder="选择日期" v-model="formItem.date"></Date-picker>
  26 + </Col>
  27 + <Col span="2" style="text-align: center">-</Col>
  28 + <Col span="11">
  29 + <Time-picker type="time" placeholder="选择时间" v-model="formItem.time"></Time-picker>
  30 + </Col>
  31 + </Row>
  32 + </Form-item>
  33 + <Form-item label="单选框">
  34 + <Radio-group v-model="formItem.radio">
  35 + <Radio label="male">男</Radio>
  36 + <Radio label="female">女</Radio>
  37 + </Radio-group>
  38 + </Form-item>
  39 + <Form-item label="多选框">
  40 + <Checkbox-group v-model="formItem.checkbox">
  41 + <Checkbox label="吃饭"></Checkbox>
  42 + <Checkbox label="睡觉"></Checkbox>
  43 + <Checkbox label="跑步"></Checkbox>
  44 + <Checkbox label="看电影"></Checkbox>
  45 + </Checkbox-group>
  46 + </Form-item>
  47 + <Form-item label="开关">
  48 + <Switch v-model="formItem.switch" size="large">
  49 + <span slot="open">开启</span>
  50 + <span slot="close">关闭</span>
  51 + </Switch>
  52 + </Form-item>
  53 + <Form-item label="滑块">
  54 + <Slider v-model="formItem.slider" range></Slider>
  55 + </Form-item>
  56 + <Form-item label="文本域">
  57 + <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
  58 + </Form-item>
  59 + <Form-item>
  60 + <Button type="primary">提交</Button>
  61 + <Button type="ghost" style="margin-left: 8px">取消</Button>
  62 + </Form-item>
  63 + </Form>
  64 + </div>
16 65 </Modal>
17 66 </div>
18 67 </template>
... ... @@ -20,8 +69,25 @@
20 69 export default {
21 70 data () {
22 71 return {
  72 + formItem: {
  73 + input: '',
  74 + select: '',
  75 + radio: 'male',
  76 + checkbox: [],
  77 + switch: true,
  78 + date: '',
  79 + time: '',
  80 + slider: [20, 50],
  81 + textarea: ''
  82 + },
23 83 modal1: false,
24   - val: ''
  84 + model13: '',
  85 + loading1: false,
  86 + options1: [],
  87 + model14: [],
  88 + loading2: false,
  89 + options2: [],
  90 + 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']
25 91 }
26 92 },
27 93 methods: {
... ... @@ -31,51 +97,22 @@
31 97 cancel () {
32 98 this.$Message.info('点击了取消');
33 99 },
34   - confirm () {
35   - this.$Modal.confirm({
36   - title: '确认对话框标题',
37   - content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
38   - render: (h) => {
39   - return h('Input', {
40   - props: {
41   - value: this.val,
42   - autofocus: true
43   - },
44   - on: {
45   - input: (val) => {
46   - this.val = val;
47   - }
48   - }
49   - }, '一个按钮')
50   - },
51   - onOk: () => {
52   - this.$Message.info('点击了确定');
53   - },
54   - onCancel: () => {
55   - this.$Message.info('点击了取消');
56   - }
57   - });
58   - },
59   - custom () {
60   - this.$Modal.confirm({
61   - title: '确认对话框标题',
62   - content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
63   - okText: 'OK',
64   - cancelText: 'Cancel'
65   - });
66   - },
67   - async () {
68   - this.$Modal.confirm({
69   - title: '确认对话框标题',
70   - content: '<p>对话框将在 2秒 后关闭</p>',
71   - loading: true,
72   - onOk: () => {
73   - setTimeout(() => {
74   - this.$Modal.remove();
75   - this.$Message.info('异步关闭了对话框');
76   - }, 2000);
77   - }
78   - });
  100 + remoteMethod1 (query) {
  101 + if (query !== '') {
  102 + this.loading1 = true;
  103 + setTimeout(() => {
  104 + this.loading1 = false;
  105 + const list = this.list.map(item => {
  106 + return {
  107 + value: item,
  108 + label: item
  109 + };
  110 + });
  111 + this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
  112 + }, 200);
  113 + } else {
  114 + this.options1 = [];
  115 + }
79 116 }
80 117 }
81 118 }
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @f03c4e6
... ... @@ -121,8 +121,9 @@
121 121 mainStyles () {
122 122 let style = {};
123 123  
  124 + const width = parseInt(this.width);
124 125 const styleWidth = {
125   - width: `${this.width}px`
  126 + width: width <= 100 ? `${width}%` : `${width}px`
126 127 };
127 128  
128 129 const customStyle = this.styles ? this.styles : {};
... ...