diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index 3f3b534..81392c6 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 25a9125..5c75e9b 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 {
--
libgit2 0.21.4