mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-06-01 03:09:15 +08:00
refactor(ActionBar): use setup
This commit is contained in:
parent
785047754b
commit
9644047dc7
@ -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>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user