From c0d09051434bc3db868c109ff27f8bd417c7675b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 27 Jun 2018 11:08:06 +0800
Subject: [PATCH] update Input append&prepend border-radius

---
 examples/routers/input.vue   | 180 +++++++++++++++++------------------
 src/styles/mixins/input.less |   2 +-
 2 files changed, 86 insertions(+), 96 deletions(-)

diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index 3f3b5347..81392c6a 100644
--- a/examples/routers/input.vue
+++ b/examples/routers/input.vue
@@ -1,106 +1,96 @@
 <template>
-    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
-        <FormItem label="Password" prop="passwd">
-            <Input type="password" v-model="formCustom.passwd"></Input>
-        </FormItem>
-        <FormItem label="Confirm" prop="passwdCheck">
-            <Input type="password" v-model="formCustom.passwdCheck"></Input>
-        </FormItem>
-        <FormItem label="Age" prop="age">
-            <Input type="text" v-model="formCustom.age" number></Input>
-        </FormItem>
-        <FormItem>
-            <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
-            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
-        </FormItem>
-        <br><br>
-        <Icon class="ivu-load-loop" type="ios-loading" size="14" color="#ff6600" />
+    <div>
+        <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
+        <Input v-model="value11">
+            <span slot="prepend">http://</span>
+            <span slot="append">.com</span>
+        </Input>
+        <br>
+        <Input v-model="value12">
+            <Select v-model="select1" slot="prepend" style="width: 80px">
+                <Option value="http">http://</Option>
+                <Option value="https">https://</Option>
+            </Select>
+            <Select v-model="select2" slot="append" style="width: 70px">
+                <Option value="com">.com</Option>
+                <Option value="org">.org</Option>
+                <Option value="io">.io</Option>
+            </Select>
+        </Input>
+        <br>
+        <Input v-model="value13">
+            <Select v-model="select3" slot="prepend" style="width: 80px">
+                <Option value="day">Day</Option>
+                <Option value="month">Month</Option>
+            </Select>
+            <Button slot="append" icon="ios-search"></Button>
+        </Input>
+        <br>
 
-        <Icon class="ivu-load-loop" type="ios-loading" size="12" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="13" color="#ff6600" />
+        <Input v-model="value11" size="small">
+        <span slot="prepend">http://</span>
+        <span slot="append">.com</span>
+        </Input>
+        <br>
+        <Input v-model="value12" size="small">
+        <Select v-model="select1" slot="prepend" style="width: 80px">
+            <Option value="http">http://</Option>
+            <Option value="https">https://</Option>
+        </Select>
+        <Select v-model="select2" slot="append" style="width: 70px">
+            <Option value="com">.com</Option>
+            <Option value="org">.org</Option>
+            <Option value="io">.io</Option>
+        </Select>
+        </Input>
+        <br>
+        <Input v-model="value13" size="small">
+        <Select v-model="select3" slot="prepend" style="width: 80px">
+            <Option value="day">Day</Option>
+            <Option value="month">Month</Option>
+        </Select>
+        <Button slot="append" icon="ios-search"></Button>
+        </Input>
+        <br>
 
-        <Icon class="ivu-load-loop" type="ios-loading" size="16" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="18" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="20" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
-
-        <Icon type="ios-alert" size="30" color="#ff6600" />
-        <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
-    </Form>
+        <Input v-model="value11" size="large">
+        <span slot="prepend">http://</span>
+        <span slot="append">.com</span>
+        </Input>
+        <br>
+        <Input v-model="value12" size="large">
+        <Select v-model="select1" slot="prepend" style="width: 80px">
+            <Option value="http">http://</Option>
+            <Option value="https">https://</Option>
+        </Select>
+        <Select v-model="select2" slot="append" style="width: 70px">
+            <Option value="com">.com</Option>
+            <Option value="org">.org</Option>
+            <Option value="io">.io</Option>
+        </Select>
+        </Input>
+        <br>
+        <Input v-model="value13" size="large">
+        <Select v-model="select3" slot="prepend" style="width: 80px">
+            <Option value="day">Day</Option>
+            <Option value="month">Month</Option>
+        </Select>
+        <Button slot="append" icon="ios-search"></Button>
+        </Input>
+        <br>
+    </div>
 </template>
 <script>
     export default {
         data () {
-            const validatePass = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password'));
-                } else {
-                    if (this.formCustom.passwdCheck !== '') {
-                        // 对第二个密码框单独验证
-                        this.$refs.formCustom.validateField('passwdCheck');
-                    }
-                    callback();
-                }
-            };
-            const validatePassCheck = (rule, value, callback) => {
-                if (value === '') {
-                    callback(new Error('Please enter your password again'));
-                } else if (value !== this.formCustom.passwd) {
-                    callback(new Error('The two input passwords do not match!'));
-                } else {
-                    callback();
-                }
-            };
-            const validateAge = (rule, value, callback) => {
-                if (!value) {
-                    return callback(new Error('Age cannot be empty'));
-                }
-                // 模拟异步验证效果
-                setTimeout(() => {
-                    if (!Number.isInteger(value)) {
-                        callback(new Error('Please enter a numeric value'));
-                    } else {
-                        if (value < 18) {
-                            callback(new Error('Must be over 18 years of age'));
-                        } else {
-                            callback();
-                        }
-                    }
-                }, 1000);
-            };
-
             return {
-                formCustom: {
-                    passwd: '',
-                    passwdCheck: '',
-                    age: ''
-                },
-                ruleCustom: {
-                    passwd: [
-                        { validator: validatePass, trigger: 'blur' }
-                    ],
-                    passwdCheck: [
-                        { validator: validatePassCheck, trigger: 'blur' }
-                    ],
-                    age: [
-                        { validator: validateAge, trigger: 'blur' }
-                    ]
-                }
-            }
-        },
-        methods: {
-            handleSubmit (name) {
-                this.$refs[name].validate((valid) => {
-                    if (valid) {
-                        this.$Message.success('Success!');
-                    } else {
-                        this.$Message.error('Fail!');
-                    }
-                })
-            },
-            handleReset (name) {
-                this.$refs[name].resetFields();
+                value: '',
+                value11: '',
+                value12: '',
+                value13: '',
+                select1: 'http',
+                select2: 'com',
+                select3: 'day'
             }
         }
     }
diff --git a/src/styles/mixins/input.less b/src/styles/mixins/input.less
index 25a91253..5c75e9b5 100644
--- a/src/styles/mixins/input.less
+++ b/src/styles/mixins/input.less
@@ -178,7 +178,7 @@
         text-align: center;
         background-color: #eee;
         border: 1px solid @input-border-color;
-        border-radius: @border-radius-base;
+        border-radius: @btn-border-radius;
 
         // Reset Select's style in addon
         .@{css-prefix}select {