refactor(ActionBar): use setup

src/action-bar-button/index.js

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

src/action-bar-icon/index.js

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

src/action-bar/index.js

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