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
Download patch file Download diff file Expand all files Collapse all files

180
examples/routers/input.vue
View file

@ -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'
}
}
}

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

@ -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 {