github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

upgrade input

pull/7109/head
baiyaaaaa 2017-09-13 11:40:36 +08:00 committed by 杨奕
parent 7497dcb8ec
commit 5c17f57995
9 changed files with 164 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
examples/docs/en-US/input.md
View File

@ -20,6 +20,9 @@
input: '',
input1: '',
input2: '',
input21: '',
input22: '',
input23: '',
input3: '',
input4: '',
input5: '',
@ -190,26 +193,43 @@ export default {
Add an icon to indicate input type.
::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
```html
<el-input
placeholder="Pick a date"
icon="search"
v-model="input2"
:on-icon-click="handleIconClick">
</el-input>
<div class="demo-input-suffix">
属性方式：
<el-input
placeholder="请选择日期"
suffix-icon="date"
v-model="input2">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="search"
v-model="input21">
</el-input>
</div>
<div class="demo-input-suffix">
slot 方式：
<el-input
placeholder="请选择日期"
v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input2: ''
}
},
methods: {
handleIconClick(ev) {
console.log(ev);
input2: '',
input21: '',
input22: '',
input23: ''
}
}
}

53
examples/docs/zh-CN/input.md
View File

@ -20,6 +20,9 @@
input: '',
input1: '',
input2: '',
input21: '',
input22: '',
input23: '',
input3: '',
input4: '',
input5: '',
@ -179,6 +182,12 @@
}
}
}
.demo-input-suffix {
margin-bottom: 15px;
.el-input {
margin-right: 15px;
}
}
</style>
## Input 输入框
@ -230,25 +239,43 @@ export default {
带有图标标记输入类型
::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。
::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
```html
<el-input
placeholder="请选择日期"
icon="search"
v-model="input2"
:on-icon-click="handleIconClick">
</el-input>
<div class="demo-input-suffix">
属性方式：
<el-input
placeholder="请选择日期"
suffix-icon="date"
v-model="input2">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="search"
v-model="input21">
</el-input>
</div>
<div class="demo-input-suffix">
slot 方式：
<el-input
placeholder="请选择日期"
v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input2: ''
}
},
methods: {
handleIconClick(ev) {
console.log(ev);
input2: '',
input21: '',
input22: '',
input23: ''
}
}
}

1
packages/form/src/form-item.vue
View File

@ -2,6 +2,7 @@
<div class="el-form-item" :class="{
'is-error': validateState === 'error',
'is-validating': validateState === 'validating',
'is-success': validateState === 'success',
'is-required': isRequired || required
}">
<label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">

38
packages/input/src/input.vue
View File

@ -6,7 +6,9 @@
'is-disabled': disabled,
'el-input-group': $slots.prepend || $slots.append,
'el-input-group--append': $slots.append,
'el-input-group--prepend': $slots.prepend
'el-input-group--prepend': $slots.prepend,
'el-input--prefix': $slots.prefix || prefixIcon,
'el-input--suffix': $slots.suffix || suffixIcon
}
]">
<template v-if="type !== 'textarea'">
@ -14,17 +16,14 @@
<div class="el-input-group__prepend" v-if="$slots.prepend">
<slot name="prepend"></slot>
</div>
<!-- input 图标 -->
<slot name="icon">
<!-- 前置内容 -->
<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
<slot name="prefix"></slot>
<i class="el-input__icon"
:class="[
'el-icon-' + icon,
onIconClick ? 'is-clickable' : ''
]"
v-if="icon"
@click="handleIconClick">
v-if="prefixIcon"
:class="['el-icon-' + prefixIcon]">
</i>
</slot>
</span>
<input
v-if="type !== 'textarea'"
class="el-input__inner"
@ -36,7 +35,14 @@
@focus="handleFocus"
@blur="handleBlur"
>
<i class="el-input__icon el-icon-loading" v-if="validating"></i>
<!-- 后置内容 -->
<span class="el-input__suffix" v-if="$slots.suffix || suffixIcon">
<slot name="suffix"></slot>
<i class="el-input__icon"
v-if="suffixIcon"
:class="['el-icon-' + suffixIcon]">
</i>
</span>
<!-- 后置元素 -->
<div class="el-input-group__append" v-if="$slots.append">
<slot name="append"></slot>
@ -111,7 +117,9 @@
type: Boolean,
default: true
},
onIconClick: Function
onIconClick: Function,
suffixIcon: String,
prefixIcon: String
},
computed: {
@ -157,12 +165,6 @@
this.setCurrentValue(value);
this.$emit('change', value);
},
handleIconClick(event) {
if (this.onIconClick) {
this.onIconClick(event);
}
this.$emit('click', event);
},
setCurrentValue(value) {
if (value === this.currentValue) return;
this.$nextTick(_ => {

8
packages/select/src/select.vue
View File

@ -54,7 +54,6 @@
:class="{ 'is-focus': visible }"
@focus="handleFocus"
@blur="handleBlur"
@click="handleIconClick"
@mousedown.native="handleMouseDown"
@keyup.native="debouncedOnInputChange"
@keydown.native.down.prevent="navigateOptions('next')"
@ -64,8 +63,11 @@
@keydown.native.tab="visible = false"
@paste.native="debouncedOnInputChange"
@mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false"
:icon="iconClass">
@mouseleave.native="inputHovering = false">
<i slot="suffix"
:class="['el-input__icon', 'el-icon-' + iconClass]"
@click="handleIconClick"
></i>
</el-input>
<transition
name="el-zoom-in-top"

68
packages/theme-chalk/src/input.scss
View File

@ -38,9 +38,8 @@
}
}
@include e(icon) {
@include e(suffix) {
position: absolute;
width: 35px;
height: 100%;
right: 0;
top: 0;
@ -48,6 +47,46 @@
color: $--input-icon-color;
transition: all .3s;
// @include when(clickable) {
// &:hover {
// cursor: pointer;
// color: $--input-hover-border;
// & + .el-input__inner {
// border-color: $--input-hover-border;
// }
// }
// }
}
@include e(prefix) {
position: absolute;
height: 100%;
left: 0;
top: 0;
text-align: center;
color: $--input-icon-color;
transition: all .3s;
// @include when(clickable) {
// &:hover {
// cursor: pointer;
// color: $--input-hover-border;
// & + .el-input__inner {
// border-color: $--input-hover-border;
// }
// }
// }
}
@include e(icon) {
height: 100%;
width: 30px;
text-align: center;
// color: $--input-icon-color;
transition: all .3s;
&:after {
content: '';
height: 100%;
@ -55,21 +94,6 @@
display: inline-block;
vertical-align: middle;
}
& + .el-input__inner {
padding-right: 35px;
}
@include when(clickable) {
&:hover {
cursor: pointer;
color: $--input-hover-border;
& + .el-input__inner {
border-color: $--input-hover-border;
}
}
}
}
@include when(active) {
@ -95,6 +119,16 @@
cursor: not-allowed;
}
}
@include m(suffix) {
.el-input__inner {
padding-right: 30px;
}
}
@include m(prefix) {
.el-input__inner {
padding-left: 30px;
}
}
@include m(large) {
font-size: $--input-large-font-size;

6
packages/theme-chalk/src/select.scss
View File

@ -31,13 +31,13 @@
color: $--select-input-color;
font-size: $--select-input-font-size;
transition: transform .3s;
transform: translateY(-50%) rotateZ(180deg);
transform: rotateZ(180deg);
line-height: 16px;
top: 50%;
cursor: pointer;
@include when(reverse) {
transform: translateY(-50%);
transform: rotateZ(0deg);
}
@include when(show-close) {
@ -47,7 +47,7 @@
font-size: $--select-font-size;
right: 8px;
text-align: center;
transform: translateY(-50%) rotateZ(180deg);
transform: rotateZ(180deg);
border-radius: $--border-radius-circle;
color: $--select-input-color;

10
packages/theme-chalk/src/transfer.scss
View File

@ -124,12 +124,11 @@
}
@include e(filter) {
margin-top: 15px;
margin-bottom: 5px;
text-align: center;
padding: 0 15px;
width: 100%;
margin: 15px;
box-sizing: border-box;
display: block;
width: auto;
.el-input__inner {
height: $--transfer-filter-height;
@ -142,8 +141,7 @@
}
.el-input__icon {
right: auto;
left: 15px;
margin-left: 5px;
}
.el-icon-circle-close {

9
packages/transfer/src/transfer-panel.vue
View File

@ -16,11 +16,14 @@
v-model="query"
size="small"
:placeholder="placeholder"
:icon="inputIcon"
@mouseenter.native="inputHover = true"
@mouseleave.native="inputHover = false"
@click="clearQuery"
v-if="filterable"></el-input>
v-if="filterable">
<i slot="prefix"
:class="['el-input__icon', 'el-icon-' + inputIcon]"
@click="clearQuery"
></i>
</el-input>
<el-checkbox-group
v-model="checked"
v-show="!hasNoMatch && data.length > 0"