ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[improvement] use scoped-slots (#2712)

Browse Source
This commit is contained in:
neverland
2019-02-11 17:52:43 +08:00
committed by GitHub
parent 9f7c91a3b9
commit 9c4ad97731
5 changed files with 159 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
packages/field/index.js
View File

@@ -163,41 +163,55 @@ export default sfc({
if (height) {
input.style.height = height + 'px';
}
},
renderInput() {
const inputProps = {
ref: 'input',
class: bem('control', this.inputAlign),
domProps: {
value: this.value
},
attrs: {
...this.$attrs,
readonly: this.readonly
},
on: this.listeners
};
if (this.type === 'textarea') {
return <textarea {...inputProps} />;
}
return <input type={this.type} {...inputProps} />;
},
renderLeftIcon() {
const showLeftIcon = this.slots('left-icon') || this.leftIcon;
if (showLeftIcon) {
return (
<div class={bem('left-icon')} onClick={this.onClickLeftIcon}>
{this.slots('left-icon') || <Icon name={this.leftIcon} />}
</div>
);
}
},
renderRightIcon() {
const { slots } = this;
const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
if (showRightIcon) {
return (
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
{slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />}
</div>
);
}
}
},
render(h) {
const { type, labelAlign, slots } = this;
const showLeftIcon = slots('left-icon') || this.leftIcon;
const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
const LeftIcon = showLeftIcon && (
<div slot="icon" class={bem('left-icon')} onClick={this.onClickLeftIcon}>
{slots('left-icon') || <Icon name={this.leftIcon} />}
</div>
);
const RightIcon = showRightIcon && (
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
{slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />}
</div>
);
const inputProps = {
ref: 'input',
class: bem('control', this.inputAlign),
domProps: {
value: this.value
},
attrs: {
...this.$attrs,
readonly: this.readonly
},
on: this.listeners
};
const Input = type === 'textarea' ? <textarea {...inputProps} /> : <input type={type} {...inputProps} />;
const { slots, labelAlign } = this;
return (
<Cell
icon={this.leftIcon}
@@ -210,15 +224,17 @@ export default sfc({
error: this.error,
disabled: this.$attrs.disabled,
[`label-${labelAlign}`]: labelAlign,
'min-height': type === 'textarea' && !this.autosize
'min-height': this.type === 'textarea' && !this.autosize
})}
scopedSlots={{
icon: this.renderLeftIcon
}}
>
{LeftIcon}
{h('template', { slot: 'title' }, slots('label'))}
<div class={bem('body')}>
{Input}
{this.renderInput()}
{this.showClear && <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />}
{RightIcon}
{this.renderRightIcon()}
{slots('button') && <div class={bem('button')}>{slots('button')}</div>}
</div>
{this.errorMessage && <div class={bem('error-message')}>{this.errorMessage}</div>}