other / mew-iview

Commit b30250a7f082fa603bcbe4ed5799a27ddfe25f14

Authored by Chavy
1 parent 7a9f6b28

fixed: #2219 & ColorPicker icon position

Showing 3 changed files with 214 additions and 70 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @b30250a
1 1 <template>
2 2 <div>
3   - <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
4   - <Form-item label-for="autocomplete" prop="name">
5   - <span slot="label"><Icon type="ionic"></Icon></span>
6   - <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
7   - </Form-item>
8   - <Form-item label="邮箱" prop="mail">
9   - <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
10   - <ColorPicker v-model="formValidate.mail"></ColorPicker>
11   - </Form-item>
12   - <Form-item label-for="select" label="城市" prop="city">
13   - <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">
14   - <Option value="beijing">北京市</Option>
15   - <Option value="shanghai">上海市</Option>
16   - <Option value="shenzhen">深圳市</Option>
17   - </Select>
18   - </Form-item>
19   - <Form-item label-for="date" label="选择日期" prop="date">
20   - <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
21   - </Form-item>
22   - <Form-item label-for="cascader" label="级联选择" prop="cascader">
23   - <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>
24   - </Form-item>
  3 + <Tabs type="card">
  4 + <TabPane label="默认大小">
  5 + <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
  6 + <Form-item label-for="autocomplete" prop="name">
  7 + <span slot="label"><Icon type="ionic"></Icon></span>
  8 + <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>
  9 + </Form-item>
  10 + <Form-item label-for="input" label="介绍" prop="desc">
  11 + <Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
  12 + </Form-item>
  13 + <Form-item label="邮箱" prop="mail">
  14 + <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
  15 + <ColorPicker v-model="formValidate.mail"></ColorPicker>
  16 + </Form-item>
  17 + <Form-item label-for="select" label="城市" prop="city">
  18 + <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">
  19 + <Option value="beijing">北京市</Option>
  20 + <Option value="shanghai">上海市</Option>
  21 + <Option value="shenzhen">深圳市</Option>
  22 + </Select>
  23 + </Form-item>
  24 + <Form-item label-for="date" label="选择日期" prop="date">
  25 + <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
  26 + </Form-item>
  27 + <Form-item label-for="cascader" label="级联选择" prop="cascader">
  28 + <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>
  29 + </Form-item>
  30 +
  31 + <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
  32 + <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>
  33 + </Form-item>
  34 +
  35 + <Form-item label="选择日期">
  36 + <Row>
  37 + <Col span="11">
  38 + <Form-item prop="date">
  39 + <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
  40 + </Form-item>
  41 + </Col>
  42 + <Col span="2" style="text-align: center">-</Col>
  43 + <Col span="11">
  44 + <Form-item prop="time">
  45 + <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
  46 + </Form-item>
  47 + </Col>
  48 + </Row>
  49 + </Form-item>
  50 + <Form-item label="性别" prop="gender">
  51 + <Radio-group v-model="formValidate.gender">
  52 + <Radio label="male">男</Radio>
  53 + <Radio label="female">女</Radio>
  54 + </Radio-group>
  55 + </Form-item>
  56 + <Form-item label="爱好" prop="interest">
  57 + <Checkbox-group v-model="formValidate.interest">
  58 + <Checkbox label="吃饭"></Checkbox>
  59 + <Checkbox label="睡觉"></Checkbox>
  60 + <Checkbox label="跑步"></Checkbox>
  61 + <Checkbox label="看电影"></Checkbox>
  62 + </Checkbox-group>
  63 + </Form-item>
  64 + <Form-item>
  65 + <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>
  66 + <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>
  67 + </Form-item>
  68 + </Form>
  69 + </TabPane>
  70 + <TabPane label="小表单">
  71 + <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
  72 + <Form-item label-for="autocomplete" prop="name">
  73 + <span slot="label"><Icon type="ionic"></Icon></span>
  74 + <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>
  75 + </Form-item>
  76 + <Form-item label-for="input" label="介绍" prop="desc">
  77 + <Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
  78 + </Form-item>
  79 + <Form-item label="邮箱" prop="mail">
  80 + <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
  81 + <ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>
  82 + </Form-item>
  83 + <Form-item label-for="select" label="城市" prop="city">
  84 + <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">
  85 + <Option value="beijing">北京市</Option>
  86 + <Option value="shanghai">上海市</Option>
  87 + <Option value="shenzhen">深圳市</Option>
  88 + </Select>
  89 + </Form-item>
  90 + <Form-item label-for="date" label="选择日期" prop="date">
  91 + <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
  92 + </Form-item>
  93 + <Form-item label-for="cascader" label="级联选择" prop="cascader">
  94 + <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>
  95 + </Form-item>
  96 +
  97 + <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
  98 + <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>
  99 + </Form-item>
  100 +
  101 + <Form-item label="选择日期">
  102 + <Row>
  103 + <Col span="11">
  104 + <Form-item prop="date">
  105 + <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
  106 + </Form-item>
  107 + </Col>
  108 + <Col span="2" style="text-align: center">-</Col>
  109 + <Col span="11">
  110 + <Form-item prop="time">
  111 + <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>
  112 + </Form-item>
  113 + </Col>
  114 + </Row>
  115 + </Form-item>
  116 + <Form-item label="性别" prop="gender">
  117 + <Radio-group v-model="formValidate.gender" size="small">
  118 + <Radio label="male">男</Radio>
  119 + <Radio label="female">女</Radio>
  120 + </Radio-group>
  121 + </Form-item>
  122 + <Form-item label="爱好" prop="interest" size="small">
  123 + <Checkbox-group v-model="formValidate.interest">
  124 + <Checkbox label="吃饭"></Checkbox>
  125 + <Checkbox label="睡觉"></Checkbox>
  126 + <Checkbox label="跑步"></Checkbox>
  127 + <Checkbox label="看电影"></Checkbox>
  128 + </Checkbox-group>
  129 + </Form-item>
  130 + <Form-item>
  131 + <Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>
  132 + <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>
  133 + </Form-item>
  134 + </Form>
  135 + </TabPane>
  136 + <TabPane label="大表单">
  137 + <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
  138 + <Form-item label-for="autocomplete" prop="name">
  139 + <span slot="label"><Icon type="ionic"></Icon></span>
  140 + <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>
  141 + </Form-item>
  142 + <Form-item label-for="input" label="介绍" prop="desc">
  143 + <Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
  144 + </Form-item>
  145 + <Form-item label="邮箱" prop="mail">
  146 + <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
  147 + <ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>
  148 + </Form-item>
  149 + <Form-item label-for="select" label="城市" prop="city">
  150 + <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">
  151 + <Option value="beijing">北京市</Option>
  152 + <Option value="shanghai">上海市</Option>
  153 + <Option value="shenzhen">深圳市</Option>
  154 + </Select>
  155 + </Form-item>
  156 + <Form-item label-for="date" label="选择日期" prop="date">
  157 + <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
  158 + </Form-item>
  159 + <Form-item label-for="cascader" label="级联选择" prop="cascader">
  160 + <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>
  161 + </Form-item>
  162 +
  163 + <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
  164 + <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>
  165 + </Form-item>
25 166  
26   - <Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
27   - <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>
28   - </Form-item>
  167 + <Form-item label="选择日期">
  168 + <Row>
  169 + <Col span="11">
  170 + <Form-item prop="date">
  171 + <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
  172 + </Form-item>
  173 + </Col>
  174 + <Col span="2" style="text-align: center">-</Col>
  175 + <Col span="11">
  176 + <Form-item prop="time">
  177 + <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>
  178 + </Form-item>
  179 + </Col>
  180 + </Row>
  181 + </Form-item>
  182 + <Form-item label="性别" prop="gender">
  183 + <Radio-group v-model="formValidate.gender" size="large">
  184 + <Radio label="male">男</Radio>
  185 + <Radio label="female">女</Radio>
  186 + </Radio-group>
  187 + </Form-item>
  188 + <Form-item label="爱好" prop="interest" size="large">
  189 + <Checkbox-group v-model="formValidate.interest">
  190 + <Checkbox label="吃饭"></Checkbox>
  191 + <Checkbox label="睡觉"></Checkbox>
  192 + <Checkbox label="跑步"></Checkbox>
  193 + <Checkbox label="看电影"></Checkbox>
  194 + </Checkbox-group>
  195 + </Form-item>
  196 + <Form-item>
  197 + <Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>
  198 + <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>
  199 + </Form-item>
  200 + </Form>
  201 + </TabPane>
  202 + </Tabs>
29 203  
30   - <Form-item label="选择日期">
31   - <Row>
32   - <Col span="11">
33   - <Form-item prop="date">
34   - <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
35   - </Form-item>
36   - </Col>
37   - <Col span="2" style="text-align: center">-</Col>
38   - <Col span="11">
39   - <Form-item prop="time">
40   - <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
41   - </Form-item>
42   - </Col>
43   - </Row>
44   - </Form-item>
45   - <Form-item label="性别" prop="gender">
46   - <Radio-group v-model="formValidate.gender">
47   - <Radio label="male">男</Radio>
48   - <Radio label="female">女</Radio>
49   - </Radio-group>
50   - </Form-item>
51   - <Form-item label="爱好" prop="interest">
52   - <Checkbox-group v-model="formValidate.interest">
53   - <Checkbox label="吃饭"></Checkbox>
54   - <Checkbox label="睡觉"></Checkbox>
55   - <Checkbox label="跑步"></Checkbox>
56   - <Checkbox label="看电影"></Checkbox>
57   - </Checkbox-group>
58   - </Form-item>
59   - <Form-item label-for="input" label="介绍" prop="desc">
60   - <Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
61   - </Form-item>
62   - <Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
63   - <Form-item>
64   - <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
65   - <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
66   - </Form-item>
67   - </Form>
68 204  
69 205 <div style="margin: 100px">
70 206 <form action="/">
... ...
src/styles/components/color-picker.less
  Show/Hide comments   View file @b30250a
... ... @@ -26,7 +26,7 @@
26 26 overflow: hidden;
27 27 text-align: center;
28 28 i{
29   - font-size: 20px;
  29 + font-size: 18px;
30 30 }
31 31 }
32 32 }
... ... @@ -34,11 +34,21 @@
34 34 width: 20px;
35 35 height: 20px;
36 36 top: 1px;
  37 + &-empty{
  38 + i{
  39 + font-size: 20px;
  40 + }
  41 + }
37 42 }
38 43 &-small &-color{
39 44 width: 14px;
40 45 height: 14px;
41 46 top: 3px;
  47 + &-empty{
  48 + i{
  49 + font-size: 14px;
  50 + }
  51 + }
42 52 }
43 53  
44 54 &-picker{
... ... @@ -206,4 +216,4 @@
206 216 left: 8px;
207 217 }
208 218 }
209   -}
210 219 \ No newline at end of file
  220 +}
... ...
src/styles/components/input.less
  Show/Hide comments   View file @b30250a
... ... @@ -7,6 +7,9 @@
7 7 width: 100%;
8 8 position: relative;
9 9 vertical-align: middle;
  10 +
  11 + // #2149 & #2219
  12 + line-height: normal
10 13 }
11 14 &-icon {
12 15 width: 32px;
... ... @@ -84,8 +87,3 @@
84 87 }
85 88 }
86 89 }
87   -
88   -// #2149
89   -.@{form-item-prefix-cls} .@{input-prefix-cls}-wrapper-small .@{input-prefix-cls}-icon{
90   - line-height: 32px;
91   -}
92 90 \ No newline at end of file
... ...