Skip to content

E
Element
Commit 5c17f579 authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

upgrade input

parent 7497dcb8
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 77 deletions
examples/docs/en-US/input.md
View file @ 5c17f579
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
input: '', input: '',
input1: '', input1: '',
input2: '', input2: '',
input21: '',
input22: '',
input23: '',
input3: '', input3: '',
input4: '', input4: '',
input5: '', input5: '',
...@@ -190,26 +193,43 @@ export default { ...@@ -190,26 +193,43 @@ export default {
Add an icon to indicate input type. 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 ```html
<el-input <div class="demo-input-suffix">
placeholder="Pick a date" 属性方式：
icon="search" <el-input
v-model="input2" placeholder="请选择日期"
:on-icon-click="handleIconClick"> suffix-icon="date"
</el-input> 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> <script>
export default { export default {
data() { data() {
return { return {
input2: '' input2: '',
} input21: '',
}, input22: '',
methods: { input23: ''
handleIconClick(ev) {
console.log(ev);
} }
} }
} }
......
examples/docs/zh-CN/input.md
View file @ 5c17f579
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
input: '', input: '',
input1: '', input1: '',
input2: '', input2: '',
input21: '',
input22: '',
input23: '',
input3: '', input3: '',
input4: '', input4: '',
input5: '', input5: '',
...@@ -179,6 +182,12 @@ ...@@ -179,6 +182,12 @@
} }
} }
} }
.demo-input-suffix {
margin-bottom: 15px;
.el-input {
margin-right: 15px;
}
}
</style> </style>
## Input 输入框 ## Input 输入框
...@@ -230,25 +239,43 @@ export default { ...@@ -230,25 +239,43 @@ export default {
带有图标标记输入类型 带有图标标记输入类型
::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。 ::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
```html ```html
<el-input <div class="demo-input-suffix">
属性方式：
<el-input
placeholder="请选择日期" placeholder="请选择日期"
icon="search" suffix-icon="date"
v-model="input2" v-model="input2">
:on-icon-click="handleIconClick"> </el-input>
</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> <script>
export default { export default {
data() { data() {
return { return {
input2: '' input2: '',
} input21: '',
}, input22: '',
methods: { input23: ''
handleIconClick(ev) {
console.log(ev);
} }
} }
} }
......
packages/form/src/form-item.vue
View file @ 5c17f579
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="el-form-item" :class="{ <div class="el-form-item" :class="{
'is-error': validateState === 'error', 'is-error': validateState === 'error',
'is-validating': validateState === 'validating', 'is-validating': validateState === 'validating',
'is-success': validateState === 'success',
'is-required': isRequired || required 'is-required': isRequired || required
}"> }">
<label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label"> <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
......
packages/input/src/input.vue
View file @ 5c17f579
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
'is-disabled': disabled, 'is-disabled': disabled,
'el-input-group': $slots.prepend || $slots.append, 'el-input-group': $slots.prepend || $slots.append,
'el-input-group--append': $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'"> <template v-if="type !== 'textarea'">
...@@ -14,17 +16,14 @@ ...@@ -14,17 +16,14 @@
<div class="el-input-group__prepend" v-if="$slots.prepend"> <div class="el-input-group__prepend" v-if="$slots.prepend">
<slot name="prepend"></slot> <slot name="prepend"></slot>
</div> </div>
<!-- input 图标 --> <!-- 前置内容 -->
<slot name="icon"> <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
<slot name="prefix"></slot>
<i class="el-input__icon" <i class="el-input__icon"
:class="[ v-if="prefixIcon"
'el-icon-' + icon, :class="['el-icon-' + prefixIcon]">
onIconClick ? 'is-clickable' : ''
]"
v-if="icon"
@click="handleIconClick">
</i> </i>
</slot> </span>
<input <input
v-if="type !== 'textarea'" v-if="type !== 'textarea'"
class="el-input__inner" class="el-input__inner"
...@@ -36,7 +35,14 @@ ...@@ -36,7 +35,14 @@
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @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"> <div class="el-input-group__append" v-if="$slots.append">
<slot name="append"></slot> <slot name="append"></slot>
...@@ -111,7 +117,9 @@ ...@@ -111,7 +117,9 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
onIconClick: Function onIconClick: Function,
suffixIcon: String,
prefixIcon: String
}, },
computed: { computed: {
...@@ -157,12 +165,6 @@ ...@@ -157,12 +165,6 @@
this.setCurrentValue(value); this.setCurrentValue(value);
this.$emit('change', value); this.$emit('change', value);
}, },
handleIconClick(event) {
if (this.onIconClick) {
this.onIconClick(event);
}
this.$emit('click', event);
},
setCurrentValue(value) { setCurrentValue(value) {
if (value === this.currentValue) return; if (value === this.currentValue) return;
this.$nextTick(_ => { this.$nextTick(_ => {
......
packages/select/src/select.vue
View file @ 5c17f579
...@@ -54,7 +54,6 @@ ...@@ -54,7 +54,6 @@
:class="{ 'is-focus': visible }" :class="{ 'is-focus': visible }"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@click="handleIconClick"
@mousedown.native="handleMouseDown" @mousedown.native="handleMouseDown"
@keyup.native="debouncedOnInputChange" @keyup.native="debouncedOnInputChange"
@keydown.native.down.prevent="navigateOptions('next')" @keydown.native.down.prevent="navigateOptions('next')"
...@@ -64,8 +63,11 @@ ...@@ -64,8 +63,11 @@
@keydown.native.tab="visible = false" @keydown.native.tab="visible = false"
@paste.native="debouncedOnInputChange" @paste.native="debouncedOnInputChange"
@mouseenter.native="inputHovering = true" @mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false" @mouseleave.native="inputHovering = false">
:icon="iconClass"> <i slot="suffix"
:class="['el-input__icon', 'el-icon-' + iconClass]"
@click="handleIconClick"
></i>
</el-input> </el-input>
<transition <transition
name="el-zoom-in-top" name="el-zoom-in-top"
......
packages/theme-chalk/src/input.scss
View file @ 5c17f579
...@@ -38,9 +38,8 @@ ...@@ -38,9 +38,8 @@
} }
} }
@include e(icon) { @include e(suffix) {
position: absolute; position: absolute;
width: 35px;
height: 100%; height: 100%;
right: 0; right: 0;
top: 0; top: 0;
...@@ -48,6 +47,46 @@ ...@@ -48,6 +47,46 @@
color: $--input-icon-color; color: $--input-icon-color;
transition: all .3s; 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 { &:after {
content: ''; content: '';
height: 100%; height: 100%;
...@@ -55,21 +94,6 @@ ...@@ -55,21 +94,6 @@
display: inline-block; display: inline-block;
vertical-align: middle; 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) { @include when(active) {
...@@ -95,6 +119,16 @@ ...@@ -95,6 +119,16 @@
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include m(suffix) {
.el-input__inner {
padding-right: 30px;
}
}
@include m(prefix) {
.el-input__inner {
padding-left: 30px;
}
}
@include m(large) { @include m(large) {
font-size: $--input-large-font-size; font-size: $--input-large-font-size;
......
packages/theme-chalk/src/select.scss
View file @ 5c17f579
...@@ -31,13 +31,13 @@ ...@@ -31,13 +31,13 @@
color: $--select-input-color; color: $--select-input-color;
font-size: $--select-input-font-size; font-size: $--select-input-font-size;
transition: transform .3s; transition: transform .3s;
transform: translateY(-50%) rotateZ(180deg); transform: rotateZ(180deg);
line-height: 16px; line-height: 16px;
top: 50%; top: 50%;
cursor: pointer; cursor: pointer;
@include when(reverse) { @include when(reverse) {
transform: translateY(-50%); transform: rotateZ(0deg);
} }
@include when(show-close) { @include when(show-close) {
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
font-size: $--select-font-size; font-size: $--select-font-size;
right: 8px; right: 8px;
text-align: center; text-align: center;
transform: translateY(-50%) rotateZ(180deg); transform: rotateZ(180deg);
border-radius: $--border-radius-circle; border-radius: $--border-radius-circle;
color: $--select-input-color; color: $--select-input-color;
......
packages/theme-chalk/src/transfer.scss
View file @ 5c17f579
...@@ -124,12 +124,11 @@ ...@@ -124,12 +124,11 @@
} }
@include e(filter) { @include e(filter) {
margin-top: 15px;
margin-bottom: 5px;
text-align: center; text-align: center;
padding: 0 15px; margin: 15px;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: block;
width: auto;
.el-input__inner { .el-input__inner {
height: $--transfer-filter-height; height: $--transfer-filter-height;
...@@ -142,8 +141,7 @@ ...@@ -142,8 +141,7 @@
} }
.el-input__icon { .el-input__icon {
right: auto; margin-left: 5px;
left: 15px;
} }
.el-icon-circle-close { .el-icon-circle-close {
......
packages/transfer/src/transfer-panel.vue
View file @ 5c17f579
...@@ -16,11 +16,14 @@ ...@@ -16,11 +16,14 @@
v-model="query" v-model="query"
size="small" size="small"
:placeholder="placeholder" :placeholder="placeholder"
:icon="inputIcon"
@mouseenter.native="inputHover = true" @mouseenter.native="inputHover = true"
@mouseleave.native="inputHover = false" @mouseleave.native="inputHover = false"
v-if="filterable">
<i slot="prefix"
:class="['el-input__icon', 'el-icon-' + inputIcon]"
@click="clearQuery" @click="clearQuery"
v-if="filterable"></el-input> ></i>
</el-input>
<el-checkbox-group <el-checkbox-group
v-model="checked" v-model="checked"
v-show="!hasNoMatch && data.length > 0" v-show="!hasNoMatch && data.length > 0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment