blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Field: support $attrs & $listeners

Browse Source
This commit is contained in:
陈嘉涵 2017-09-22 14:54:05 +08:00
parent 910739905c
commit 72b013a440
8 changed files with 121 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
docs/examples-docs/field.md
View File

@ -1,8 +1,6 @@
<style> <style>
.demo-field { .demo-field {
.van-field-wrapper { padding-bottom: 30px;
padding: 0 10px;
}
} }
</style> </style>
@ -10,17 +8,11 @@
export default { export default {
data() { data() {
return { return {
username: 'zhangmin' value: '',
password: '',
username: 'zhangmin',
message: ''
}; };
},
methods: {
onIconClick() {
this.username = '';
},
onFieldBlur() {
console.log('blured');
}
} }
}; };
</script> </script>
@ -39,92 +31,78 @@ Vue.component(Field.name, Field);
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
通过 v-model 绑定输入框的值
根据`type`属性显示不同的输入框。
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-cell-group>
<van-field v-model="value" placeholder="请输入用户名"></van-field>
</van-cell-group>
```
:::
#### 自定义类型
根据`type`属性定义不同类型的输入框
:::demo 自定义类型
```html
<van-cell-group> <van-cell-group>
<van-field <van-field
type="text"
label="用户名："
placeholder="请输入用户名"
v-model="username" v-model="username"
label="用户名"
icon="clear" icon="clear"
:on-icon-click="onIconClick" placeholder="请输入用户名"
@blur="onFieldBlur" required
required></van-field> @click-icon="username = ''"
>
</van-field>
<van-field <van-field
v-model="password"
type="password" type="password"
label="密码：" label="密码"
placeholder="请输入密码" placeholder="请输入密码"
required> required>
<template slot="icon">
<van-icon name="search"></van-icon>
</template>
</van-field> </van-field>
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
</van-cell-group> </van-cell-group>
``` ```
::: :::
#### 无label的输入框 #### 禁用输入框
不传入`label`属性即可。 :::demo 禁用输入框
:::demo 无label的输入框
```html ```html
<van-cell-group> <van-cell-group>
<van-field type="text" placeholder="请输入用户名"></van-field> <van-field value="输入框已禁用" label="用户名" disabled></van-field>
</van-cell-group> </van-cell-group>
``` ```
::: :::
#### 带border的输入框 #### 错误提示
传入一个`border`属性。 :::demo 错误提示
:::demo 带border的输入框
```html
<div class="van-field-wrapper">
<van-field type="text" placeholder="请输入用户名" border></van-field>
</div>
```
:::
#### 禁用的输入框
传入`disabled`属性即可。
:::demo 禁用的输入框
```html ```html
<van-cell-group> <van-cell-group>
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field> <van-field label="用户名" placeholder="请输入用户名" error></van-field>
</van-cell-group> </van-cell-group>
``` ```
::: :::
#### 错误的输入框 #### 高度自适应
对于 textarea，可以通过`autosize`属性设置高度自适应
传入`error`属性即可。 :::demo 高度自适应
:::demo 错误的输入框
```html ```html
<van-cell-group> <van-cell-group>
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field> <van-field
</van-cell-group> v-model="message"
``` label="留言"
::: type="textarea"
placeholder="请输入留言"
rows="1"
#### Autosize的输入框(仅支持textarea) autosize
>
传入`autosize`属性, 且将`rows`设为1。 </van-field>
:::demo 错误的输入框
```html
<van-cell-group>
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
</van-cell-group> </van-cell-group>
``` ```
::: :::
@ -133,23 +111,24 @@ Vue.component(Field.name, Field);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 输入框类型 | `String` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` | | type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
| placeholder | 输入框placeholder | `String` | | | | value | 输入框的值 | `String` | - | - |
| value | 输入框的值 | `String` | | | | label | 输入框标签 | `String` | - | - |
| label | 输入框标签 | `String` | | | | disabled | 是否禁用输入框 | `Boolean` | `false` | - |
| disabled | 是否禁用输入框 | `Boolean` | `false` | | | error | 输入框是否有错误 | `Boolean` | `false` | - |
| error | 输入框是否有错误 | `Boolean` | `false` | | | autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
| readonly | 输入框是否只读 | `Boolean` | `false` | | | icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
| maxlength | 输入框maxlength | `String`, `Number` | | |
| rows | textarea rows | `String`, `Number` | | | ### Event
| cols | textarea cols | `String`, `Number` | | |
| autosize | 自动调整高度(仅支持textarea) | `Boolean` | `false` | `true`, `false` | | 事件名称 | 说明 | 回调参数 |
| icon | 输入框尾部图标 | `String` | | icon中支持的类型 | |-----------|-----------|-----------|
| onIconClick | 点击图标的回调函数 | `Function` | | | | focus | 输入框聚焦时触发 | - |
| blur | 输入框失焦时触发 | - |
| click-icon | 点击尾部图标时触发 | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| icon | 自定义icon | | icon | 自定义icon |

84
docs/src/ExamplesApp.vue
View File

@ -1,93 +1,9 @@
<template> <template>
<div class="examples-container" ref="container">
<div class="demo-content" ref="demo">
<router-view></router-view> <router-view></router-view>
</div>
<div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
<img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
</div>
</div>
</template> </template>
<script>
export default {
computed: {
visible() {
return ['/'].indexOf(this.$route.path) < 0;
}
},
data() {
return {
isFooterFixed: false
};
},
mounted() {
this.computeFooterFixed();
},
watch: {
'$route.path'(val) {
this.$nextTick(() => {
this.computeFooterFixed();
});
}
},
methods: {
computeFooterFixed() {
if (this.$refs.container) {
const demoSize = this.$refs.demo.getBoundingClientRect();
const containerSize = this.$refs.container.getBoundingClientRect();
if (demoSize.height < containerSize.height - 54) {
this.isFooterFixed = true;
return;
}
}
this.isFooterFixed = false;
}
}
};
</script>
<style> <style>
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body, html {
height: 100%;
}
.examples-container {
height: 100%;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 0;
}
}
.footer {
margin-top: 30px;
width: 100%;
padding: 10px 0 20px;
background: #f8f8f8;
&.footer-fixed {
position: absolute;
bottom: 0;
left: 0;
}
}
.zanui-logo {
display: block;
margin: 0 auto;
width: 150px;
height: auto;
}
</style> </style>

5
docs/src/examples.js
View File

@ -42,5 +42,6 @@ if (process.env.NODE_ENV !== 'production') {
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line
render: h => h(App), render: h => h(App),
router router,
}).$mount('#app-container'); el: '#app-container'
});

5
docs/src/index.js
View File

@ -41,5 +41,6 @@ if (process.env.NODE_ENV !== 'production') {
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line
render: h => h(App), render: h => h(App),
router router,
}).$mount('#app-container'); el: '#app-container'
});

118
packages/field/index.vue
View File

@ -1,47 +1,43 @@
<template> <template>
<van-cell <van-cell
class="van-field"
:title="label" :title="label"
:required="required" :required="required"
:class="{ :class="['van-field', {
'van-field--hastextarea': type === 'textarea', 'van-field--has-textarea': type === 'textarea',
'van-field--nolabel': !label, 'van-field--nolabel': !label,
'van-field--disabled': disabled, 'van-field--disabled': $attrs.disabled,
'van-field--error': error, 'van-field--error': error,
'van-field--border': border, 'van-field--border': border,
'van-hairline--surround': border,
'van-field--autosize': autosize, 'van-field--autosize': autosize,
'van-field--has-icon': showIcon 'van-field--has-icon': hasIcon,
}"> 'van-hairline--surround': border
}]">
<textarea <textarea
v-if="type === 'textarea'" v-if="type === 'textarea'"
ref="textareaElement" v-bind="$attrs"
v-on="$listeners"
ref="textarea"
class="van-field__control" class="van-field__control"
v-model="currentValue" :value="value"
@focus="handleInputFocus" @input="onInput"
@blur="handleInputBlur" />
:placeholder="placeholder"
:maxlength="maxlength"
:disabled="disabled"
:readonly="readonly"
:rows="rows"
:cols="cols">
</textarea>
<input <input
v-else v-else
v-bind="$attrs"
v-on="$listeners"
class="van-field__control" class="van-field__control"
:value="currentValue"
@input="handleInput"
@focus="handleInputFocus"
@blur="handleInputBlur"
:type="type" :type="type"
:placeholder="placeholder" :value="value"
:maxlength="maxlength" @input="onInput"
:disabled="disabled" />
:readonly="readonly"> <div
<div v-if="showIcon" class="van-field__icon" @click="onIconClick"> v-if="hasIcon"
v-show="$slots.icon || value"
class="van-field__icon"
@touchstart.prevent="onClickIcon"
>
<slot name="icon"> <slot name="icon">
<van-icon :name="icon"></van-icon> <van-icon :name="icon" />
</slot> </slot>
</div> </div>
</van-cell> </van-cell>
@ -70,80 +66,52 @@ export default {
value: {}, value: {},
icon: String, icon: String,
label: String, label: String,
placeholder: String,
error: Boolean, error: Boolean,
disabled: Boolean,
readonly: Boolean,
required: Boolean, required: Boolean,
maxlength: [String, Number],
border: Boolean, border: Boolean,
rows: [String, Number], autosize: Boolean,
cols: [String, Number],
autosize: {
type: Boolean,
default: false
},
onIconClick: { onIconClick: {
type: Function, type: Function,
default: () => {} default: () => {}
} }
}, },
data() { watch: {
return { value() {
currentValue: this.value if (this.autosize && this.type === 'textarea') {
}; this.$nextTick(this.adjustSize);
}
}
}, },
mounted() { mounted() {
if (this.autosize && this.type === 'textarea') { if (this.autosize && this.type === 'textarea') {
const el = this.$refs.textareaElement; const el = this.$refs.textarea;
el.style.height = el.scrollHeight + 'px'; el.style.height = el.scrollHeight + 'px';
el.style.overflowY = 'hidden'; el.style.overflowY = 'hidden';
} }
}, },
watch: {
value(val) {
this.currentValue = val;
},
currentValue(val) {
if (this.autosize && this.type === 'textarea') {
this.$nextTick(this.sizeAdjust);
}
this.$emit('input', val);
}
},
computed: { computed: {
showIcon() { hasIcon() {
// 有icon的slot，就认为一直展示 return this.$slots.icon || this.icon;
if (this.$slots.icon) {
return true;
}
return this.icon && this.currentValue;
} }
}, },
methods: { methods: {
handleInput(event) { onInput(event) {
this.currentValue = event.target.value; this.$emit('input', event.target.value);
}, },
sizeAdjust() { onClickIcon() {
const el = this.$refs.textareaElement; this.$emit('click-icon');
this.onIconClick();
},
adjustSize() {
const el = this.$refs.textarea;
el.style.height = 'auto'; el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px'; el.style.height = el.scrollHeight + 'px';
},
handleInputFocus() {
this.$emit('focus');
},
handleInputBlur() {
this.$emit('blur');
} }
} }
}; };

2
packages/vant-css/src/field.css
View File

@ -22,7 +22,7 @@
padding-left: 90px; padding-left: 90px;
} }
&--hastextarea { &--has-textarea {
.van-field__control { .van-field__control {
min-height: 60px; min-height: 60px;
} }

36
test/unit/specs/field.spec.js
View File

@ -38,16 +38,12 @@ describe('Field', () => {
} }
}); });
expect(wrapper.hasClass('van-field')).to.be.true;
expect(wrapper.data().currentValue).to.equal('test');
const eventStub = sinon.stub(wrapper.vm, '$emit'); const eventStub = sinon.stub(wrapper.vm, '$emit');
wrapper.vm.value = 'test2'; wrapper.vm.value = 'test2';
wrapper.update();
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.data().currentValue).to.equal('test2');
expect(eventStub.calledWith('input')); expect(eventStub.calledWith('input'));
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
done(); done();
}); });
}); });
@ -70,25 +66,6 @@ describe('Field', () => {
}); });
}); });
it('input something to field', (done) => {
wrapper = mount(Field, {
propsData: {
value: ''
}
});
const input = wrapper.find('.van-field__control')[0];
input.element.value = 'test';
input.trigger('input');
wrapper.update();
wrapper.vm.$nextTick(() => {
expect(wrapper.data().currentValue).to.equal('test');
done();
});
});
it('create a textarea field', () => { it('create a textarea field', () => {
wrapper = mount(Field, { wrapper = mount(Field, {
propsData: { propsData: {
@ -98,7 +75,7 @@ describe('Field', () => {
}); });
expect(wrapper.hasClass('van-field')).to.be.true; expect(wrapper.hasClass('van-field')).to.be.true;
expect(wrapper.hasClass('van-field--hastextarea')).to.be.true; expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
}); });
it('create a autosize textarea field', (done) => { it('create a autosize textarea field', (done) => {
@ -109,6 +86,10 @@ describe('Field', () => {
} }
}); });
wrapper.vm.$on('input', val => {
wrapper.vm.value = val;
});
expect(wrapper.hasClass('van-field')).to.be.true; expect(wrapper.hasClass('van-field')).to.be.true;
expect(wrapper.hasClass('van-field--autosize')).to.be.true; expect(wrapper.hasClass('van-field--autosize')).to.be.true;
@ -122,7 +103,7 @@ describe('Field', () => {
wrapper.update(); wrapper.update();
setTimeout(() => { setTimeout(() => {
expect(wrapper.data().currentValue).to.equal('test'); expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px'); expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
done(); done();
}, 500); }, 500);
@ -136,6 +117,7 @@ describe('Field', () => {
} }
}); });
wrapper.find('.van-field__icon')[0].trigger('touchstart');
expect(wrapper.find('.van-field__icon').length).to.equal(1); expect(wrapper.find('.van-field__icon').length).to.equal(1);
}); });
@ -148,7 +130,7 @@ describe('Field', () => {
} }
}); });
wrapper.find('.van-field__icon')[0].trigger('click'); wrapper.find('.van-field__icon')[0].trigger('touchstart');
expect(fn.calledOnce).to.be.true; expect(fn.calledOnce).to.be.true;
}); });

4
yarn.lock
View File

@ -7660,8 +7660,8 @@ yeast@0.1.2:
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
zan-doc@^0.2.12: zan-doc@^0.2.12:
version "0.2.15" version "0.2.16"
resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.15.tgz#f169ce77fce1323e257f7b5c674fc56092bf83ec" resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.16.tgz#dd458f0a807dea814b412a609679a63a20960077"
dependencies: dependencies:
cheerio "0.22.0" cheerio "0.22.0"
decamelize "^1.2.0" decamelize "^1.2.0"