vue中使用jsx

前言

相对来说 有些时候用jsx更合适，更灵活些

安装依赖

有对应的包支持

yarn add --dev @vitejs/plugin-vue-jsx

配置插件

在vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({})
});

使用

ant的左侧导航，vue的模板语法写法就体验很糟糕，这里我将其改为jsx模式。

import { computed, defineComponent, resolveComponent, h  } from "vue";
import { useStore } from "/@/store";
import { useRoute } from "vue-router";
import logoImg from "/@/assets/logo.png";
import styled from "@magister_zito/vue3-styled-components";
import router from "/@/router";

const StyledLogo = styled.div`
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  img {
    height: 32px;
    margin-right: 10px;
  }
`;

const toMenu = (menu: any) => {
  router.push(menu.path);
};

const SubMenu = defineComponent({
  props: {
    menuInfo: {
      type: Object,
      default: "请输入",
    },
  },
  setup(props) {
    return () => (
      <a-sub-menu
        key={props.menuInfo.path}
        v-slots={{
          title: () => <span>{props.menuInfo.title}</span>,
          icon: () =>  h(resolveComponent(props.menuInfo.meta.icon))
        }}
      >
        {props.menuInfo.children.map((item: any) =>
          item.children ? (
            <SubMenu menu-info={item} key={item.path} />
          ) : (
            <a-menu-item
              key={item.path}
              onClick={() => {
                toMenu(item);
              }}
            >
              {item.title}
            </a-menu-item>
          )
        )}
      </a-sub-menu>
    );
  },
});



export default defineComponent({
  name:'LayoutSider',
  setup() {
    const route = useRoute();
    const store = useStore();

    // 当前高亮的选中菜单
    const selectedKeys = computed<string[]>(() => {
      return [route.path];
    });

    // 处理刷新后 显示的二级菜单或者三级菜单
    const openKeys = computed<string[]>(() => {
      let arr = [];
      arr = route.path.split("/").splice(1, route.path.split("/").length);
      arr = arr.map((item) => {
        item = "/" + item;
        return item;
      });
      return arr;
    });

    return () => (
      <a-layout-sider collapsed={store.openMenu}>
        <StyledLogo>
          <img src={logoImg} />
          { !store.openMenu && <span>Ant Design</span>}
        </StyledLogo>
        <a-menu
          style="width: auto !important"
          v-model:openKeys={openKeys.value}
          v-model:selectedKeys={selectedKeys.value}
          mode="inline"
          theme="dark"
        >
          {store.siteInfo.menus.map((item: any) =>
            item.children ? (
              <SubMenu key={item.path} menuInfo={item} />
            ) : (
              <a-menu-item
                key={item.path}
                onClick={() => {
                  toMenu(item);
                }}
                v-slots={{
                  icon: () =>  h(resolveComponent(item.meta.icon))
                }}
              >
                {item.title}
              </a-menu-item>
            )
          )}
        </a-menu>
      </a-layout-sider>
    );
  },
});

其它

如上 也看到了 如果不像样式分离，我也可以使用 styled 方案，即css in js