drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Input append&prepend border-radius

Browse source
This commit is contained in:
梁灏 2018-06-27 11:08:06 +08:00
parent eccaa940bd
commit c0d0905143
2 changed files with 86 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
examples/routers/input.vue
View file

@ -1,106 +1,96 @@
<template> <template>
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> <div>
<FormItem label="Password" prop="passwd"> <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
<Input type="password" v-model="formCustom.passwd"></Input> <Input v-model="value11">
</FormItem> <span slot="prepend">http://</span>
<FormItem label="Confirm" prop="passwdCheck"> <span slot="append">.com</span>
<Input type="password" v-model="formCustom.passwdCheck"></Input> </Input>
</FormItem> <br>
<FormItem label="Age" prop="age"> <Input v-model="value12">
<Input type="text" v-model="formCustom.age" number></Input> <Select v-model="select1" slot="prepend" style="width: 80px">
</FormItem> <Option value="http">http://</Option>
<FormItem> <Option value="https">https://</Option>
<Button type="primary" @click="handleSubmit('formCustom')">Submit</Button> </Select>
<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button> <Select v-model="select2" slot="append" style="width: 70px">
</FormItem> <Option value="com">.com</Option>
<br><br> <Option value="org">.org</Option>
<Icon class="ivu-load-loop" type="ios-loading" size="14" color="#ff6600" /> <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" /> <Input v-model="value11" size="small">
<Icon class="ivu-load-loop" type="ios-loading" size="13" color="#ff6600" /> <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" /> <Input v-model="value11" size="large">
<Icon class="ivu-load-loop" type="ios-loading" size="18" color="#ff6600" /> <span slot="prepend">http://</span>
<Icon class="ivu-load-loop" type="ios-loading" size="20" color="#ff6600" /> <span slot="append">.com</span>
<Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" /> </Input>
<Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" /> <br>
<Input v-model="value12" size="large">
<Icon type="ios-alert" size="30" color="#ff6600" /> <Select v-model="select1" slot="prepend" style="width: 80px">
<Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" /> <Option value="http">http://</Option>
</Form> <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> </template>
<script> <script>
export default { export default {
data () { 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 { return {
formCustom: { value: '',
passwd: '', value11: '',
passwdCheck: '', value12: '',
age: '' value13: '',
}, select1: 'http',
ruleCustom: { select2: 'com',
passwd: [ select3: 'day'
{ 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();
} }
} }
} }

2
src/styles/mixins/input.less
View file

@ -178,7 +178,7 @@
text-align: center; text-align: center;
background-color: #eee; background-color: #eee;
border: 1px solid @input-border-color; border: 1px solid @input-border-color;
border-radius: @border-radius-base; border-radius: @btn-border-radius;
// Reset Select's style in addon // Reset Select's style in addon
.@{css-prefix}select { .@{css-prefix}select {