refactor(ActionBar): use setup

This commit is contained in:
chenjiahan 2020-08-23 14:31:03 +08:00
parent 785047754b
commit 9644047dc7
3 changed files with 54 additions and 66 deletions

View File

@ -18,47 +18,35 @@ export default createComponent({
disabled: Boolean,
},
emits: ['click'],
setup(props, { slots }) {
return (vm) => {
const { type, icon, text, color, loading, disabled } = props;
computed: {
isFirst() {
const prev = this.parent && this.parent.children[this.index - 1];
return !prev || prev.$options.name !== this.$options.name;
},
const { parent } = vm;
const { name } = vm.$options;
const prev = parent && parent.children[vm.index - 1];
const next = parent && parent.children[vm.index + 1];
const last = !next || name !== next.$options.name;
const first = !prev || name !== prev.$options.name;
isLast() {
const next = this.parent && this.parent.children[this.index + 1];
return !next || next.$options.name !== this.$options.name;
},
},
const onClick = () => {
route(vm.$router, vm);
};
methods: {
onClick(event) {
this.$emit('click', event);
route(this.$router, this);
},
},
render() {
return (
<Button
class={bem([
{
first: this.isFirst,
last: this.isLast,
},
this.type,
])}
size="large"
type={this.type}
icon={this.icon}
color={this.color}
loading={this.loading}
disabled={this.disabled}
onClick={this.onClick}
>
{this.$slots.default ? this.$slots.default() : this.text}
</Button>
);
return (
<Button
class={bem([type, { last, first }])}
size="large"
type={type}
icon={icon}
color={color}
loading={loading}
disabled={disabled}
onClick={onClick}
>
{slots.default ? slots.default() : text}
</Button>
);
};
},
});

View File

@ -19,42 +19,42 @@ export default createComponent({
iconClass: null,
},
emits: ['click'],
setup(props, { slots }) {
function genIcon() {
const { dot, badge, icon, color, iconClass } = props;
methods: {
onClick(event) {
this.$emit('click', event);
route(this.$router, this);
},
genIcon() {
if (this.$slots.icon) {
if (slots.icon) {
return (
<div class={bem('icon')}>
{this.$slots.icon()}
<Badge dot={this.dot} badge={this.badge} />
{slots.icon()}
<Badge dot={dot} badge={badge} />
</div>
);
}
return (
<Icon
class={[bem('icon'), this.iconClass]}
tag="div"
dot={this.dot}
name={this.icon}
badge={this.badge}
color={this.color}
dot={dot}
name={icon}
badge={badge}
color={color}
class={[bem('icon'), iconClass]}
/>
);
},
},
}
render() {
return (
<div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
{this.genIcon()}
{this.$slots.default ? this.$slots.default() : this.text}
return (vm) => (
<div
role="button"
class={bem()}
tabindex="0"
onClick={() => {
route(vm.$router, vm);
}}
>
{genIcon()}
{slots.default ? slots.default() : props.text}
</div>
);
},

View File

@ -13,10 +13,10 @@ export default createComponent({
},
},
render() {
return (
<div class={bem({ unfit: !this.safeAreaInsetBottom })}>
{this.$slots.default?.()}
setup(props, { slots }) {
return () => (
<div class={bem({ unfit: !props.safeAreaInsetBottom })}>
{slots.default?.()}
</div>
);
},