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

update input && input-group

pull/2/head
baiyaaaaa 2016-08-17 17:58:26 +08:00
parent 145cb4dbf7
commit 80ae828639
10 changed files with 102 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -32,9 +32,6 @@
"input-number": [
"./packages/input-number/index.js"
],
"input-group": [
"./packages/input-group/index.js"
],
"radio": [
"./packages/radio/index.js"
],

100
examples/docs/input.md
View File

@ -9,7 +9,8 @@
input4: '',
input5: '',
input6: '',
textarea: ''
textarea: '',
select: ''
};
}
};
@ -28,6 +29,9 @@
.el-textarea {
width: 414px;
}
.el-input-group {
min-width: 260px;
}
.el-input-group + .el-input-group {
margin-top: 15px;
}
@ -82,22 +86,6 @@
</el-input>
```
<!-- ## readonly 状态
<el-input
:readonly="true"
placeholder="请输入内容"
:value.sync="input1">
</el-input>
```html
<el-input
:readonly="true"
placeholder="请输入内容"
:value.sync="input1">
</el-input>
``` -->
## Input 图标
<div class="demo-box demo-input">
@ -118,76 +106,54 @@
## Input Group
前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
### 后置元素
<div class="demo-box demo-input">
<el-input-group>
<el-input
placeholder="请输入内容"
:value.sync="input2">
</el-input>
<span class="el-input-group__label" slot="append">.com</span>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="append">.com</template>
</el-input>
</div>
```html
<el-input-group>
<el-input
placeholder="请输入内容"
:value.sync="input2">
</el-input>
<span class="el-input-group__label" slot="append">.com</span>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="append">.com</template>
</el-input>
```
### 前置元素
<div class="demo-box demo-input">
<el-input-group>
<el-button slot="prepend" type="text">按钮</el-button>
<el-input
placeholder="请输入内容"
:value.sync="input2">
</el-input>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="prepend">Http://</template>
</el-input>
</div>
```html
<el-input-group>
<el-button slot="prepend" type="text">按钮</el-button>
<el-input
placeholder="请输入内容"
:value.sync="input2">
</el-input>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="prepend">Http://</template>
</el-input>
```
### 前置和后置元素
<div class="demo-box demo-input">
<el-input-group>
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li class="divider">选项四</li>
</el-dropdown>
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
<el-button type="text" slot="append">搜索</el-button>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
<el-select v-model="select" slot="prepend" :width="100">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
</el-input>
</div>
```html
<el-input-group>
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li class="divider">选项四</li>
</el-dropdown>
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
<el-button type="text" slot="append">搜索</el-button>
</el-input-group>
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
<el-select v-model="select" slot="prepend" :width="100">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
</el-input>
```
## 尺寸

7
packages/input-group/index.js
View File

@ -1,7 +0,0 @@
const ElInputGroup = require('../input/src/input-group');
ElInputGroup.install = function(Vue) {
Vue.component(ElInputGroup.name, ElInputGroup);
};
module.exports = ElInputGroup;

2
packages/input/index.js
View File

@ -1,9 +1,7 @@
const ElInput = require('./src/input');
const ElInputGroup = require('./src/input-group');
ElInput.install = function(Vue) {
Vue.component(ElInput.name, ElInput);
Vue.component(ElInputGroup.name, ElInputGroup);
};
module.exports = ElInput;

20
packages/input/src/input-group.vue
View File

@ -1,20 +0,0 @@
<template>
<div class="el-input-group">
<div class="el-input-group__prepend" v-if="_slotContents.prepend">
<slot name="prepend"></slot>
</div>
<slot></slot>
<div class="el-input-group__append" v-if="_slotContents.append">
<slot name="append"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'ElInputGroup',
data() {
return {
};
}
};
</script>

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

@ -2,11 +2,16 @@
<div :class="[
type === 'textarea' ? 'el-textarea' : 'el-input',
size ? 'el-input-' + size : '',
{'is-disabled': disabled}
{
'is-disabled': disabled,
'el-input-group': $slots.prepend || $slots.append
}
]">
<template v-if="type !== 'textarea'">
<i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
<i class="el-input__icon el-icon-loading" v-if="validating"></i>
<!-- 前置元素 -->
<div class="el-input-group__prepend" v-if="$slots.prepend">
<slot name="prepend"></slot>
</div>
<input
:type="type"
:name="name"
@ -23,6 +28,13 @@
:autocomplete="autoComplete"
ref="input"
>
<!-- input 图标 -->
<i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
<i class="el-input__icon el-icon-loading" v-if="validating"></i>
<!-- 后置元素 -->
<div class="el-input-group__append" v-if="$slots.append">
<slot name="append"></slot>
</div>
</template>
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>

2
packages/theme-default/src/common/var.css
View File

@ -151,7 +151,7 @@
--input-large-height: 42px;
--input-small-font-size: 13px;
--input-small-height: 28px;
--input-small-height: 30px;
--input-mini-font-size: 12px;
--input-mini-height: 22px;

29
packages/theme-default/src/input-recommend.css
View File

@ -1,29 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
/*@import "./core/dropdown.css";*/
@import "./core/tag.css";
@import "./core/input.css";
@component-namespace element {
@b input {
display: inline-block;
font-size: var(--input-font-size);
position: relative;
@e placeholder {
background-color: #fff;
color: var(--input-border-color);
left: 4px;
padding: 0 2px;
position: absolute;
top: calc(var(--input-height) / 2 - var(--input-font-size) + 4);
transition: all 0.2s ease-out;
z-index: var(--index-normal);
@when enter {
color: var(--input-border-color-hover);
top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1);
}
}
}
}

80
packages/theme-default/src/input.css
View File

@ -4,6 +4,7 @@
@component-namespace el {
@b input {
position: relative;
font-size: var(--font-size-base);
@e inner {
display: block;
@ -11,7 +12,6 @@
box-sizing: border-box;
width: 100%;
height: var(--input-height);
font-size: var(--font-size-base);
color: var(--input-color);
background-color: #fff;
background-image: none;
@ -71,75 +71,87 @@
}
@b input-large {
font-size: var(--input-large-font-size);
& .el-input__inner {
font-size: var(--input-large-font-size);
height: var(--input-large-height);
}
}
@b input-small {
font-size: var(--input-small-font-size);
& .el-input__inner {
font-size: var(--input-small-font-size);
height: var(--input-small-height);
}
}
@b input-mini {
font-size: var(--input-mini-font-size);
& .el-input__inner {
font-size: var(--input-mini-font-size);
height: var(--input-mini-height);
}
}
@b input-group {
display: table;
border-collapse: separate;
& .el-input {
& > .el-input__inner {
vertical-align: middle;
display: table-cell;
}
@e label {
padding: 0 10px;
font-size: 13px;
}
@e prepend {
@e append, prepend {
background-color: #f9fafc;
color: #99a9bf;
vertical-align: middle;
display: table-cell;
position: relative;
border: var(--border-base);
border-right: 0;
border-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0 10px;
width: 1%;
white-space: nowrap;
& .el-dropdown--text {
padding: 0 10px;
& .el-select,
& .el-button {
display: block;
margin: -10px;
}
& .el-button,
& .el-select .el-input__inner,
& .el-select:hover .el-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
& .el-button,
& .el-input {
font-size: inherit;
}
}
@e prepend {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@e append {
vertical-align: middle;
display: table-cell;
position: relative;
border: var(--border-base);
border-left: 0;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& .el-input:first-child {
.el-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& .el-input__inner:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& .el-input:last-child {
.el-input__inner {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& .el-input__inner:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& .el-input:not(:first-child):not(:last-child) {
.el-input__inner {
border-radius: 0;
}
& .el-input__inner:not(:first-child):not(:last-child) {
border-radius: 0;
}
}

11
src/index.js
View File

@ -9,7 +9,6 @@ import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js';
import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js';
import InputGroup from '../packages/input-group/index.js';
import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js';
@ -48,6 +47,8 @@ import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
import Badge from '../packages/badge/index.js';
import Card from '../packages/card/index.js';
const install = function(Vue) {
if (install.installed) return;
@ -63,7 +64,6 @@ const install = function(Vue) {
Vue.component(MenuItem.name, MenuItem);
Vue.component(Input.name, Input);
Vue.component(InputNumber.name, InputNumber);
Vue.component(InputGroup.name, InputGroup);
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
Vue.component(RadioButton.name, RadioButton);
@ -99,6 +99,8 @@ const install = function(Vue) {
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message);
Vue.component(Badge.name, Badge);
Vue.component(Card.name, Card);
Vue.use(Loading);
@ -128,7 +130,6 @@ module.exports = {
MenuItem,
Input,
InputNumber,
InputGroup,
Radio,
RadioGroup,
RadioButton,
@ -166,5 +167,7 @@ module.exports = {
Upload,
Progress,
Spinner,
Message
Message,
Badge,
Card
};