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 <template> 1 <template>
2 <div> 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 <div style="margin: 100px"> 205 <div style="margin: 100px">
70 <form action="/"> 206 <form action="/">
src/styles/components/color-picker.less
  Show/Hide comments   View file @b30250a
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 overflow: hidden; 26 overflow: hidden;
27 text-align: center; 27 text-align: center;
28 i{ 28 i{
29 - font-size: 20px; 29 + font-size: 18px;
30 } 30 }
31 } 31 }
32 } 32 }
@@ -34,11 +34,21 @@ @@ -34,11 +34,21 @@
34 width: 20px; 34 width: 20px;
35 height: 20px; 35 height: 20px;
36 top: 1px; 36 top: 1px;
  37 + &-empty{
  38 + i{
  39 + font-size: 20px;
  40 + }
  41 + }
37 } 42 }
38 &-small &-color{ 43 &-small &-color{
39 width: 14px; 44 width: 14px;
40 height: 14px; 45 height: 14px;
41 top: 3px; 46 top: 3px;
  47 + &-empty{
  48 + i{
  49 + font-size: 14px;
  50 + }
  51 + }
42 } 52 }
43 53
44 &-picker{ 54 &-picker{
@@ -206,4 +216,4 @@ @@ -206,4 +216,4 @@
206 left: 8px; 216 left: 8px;
207 } 217 }
208 } 218 }
209 -}  
210 \ No newline at end of file 219 \ No newline at end of file
  220 +}
src/styles/components/input.less
  Show/Hide comments   View file @b30250a
@@ -7,6 +7,9 @@ @@ -7,6 +7,9 @@
7 width: 100%; 7 width: 100%;
8 position: relative; 8 position: relative;
9 vertical-align: middle; 9 vertical-align: middle;
  10 +
  11 + // #2149 & #2219
  12 + line-height: normal
10 } 13 }
11 &-icon { 14 &-icon {
12 width: 32px; 15 width: 32px;
@@ -84,8 +87,3 @@ @@ -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 \ No newline at end of file 90 \ No newline at end of file