WanxyDesign

2025-05-10T03:01:31.png

项目地址

官网地址

http://design.wanxy.online/

github

https://github.com/wanxy420/wanxy-design

npm

https://www.npmjs.com/package/wanxy-design

介绍

为了方便平时项目中重复封装使用，自定义封装了这个组件库，部分组件基于原生开发，部分组件基于element-plus进行二次封装，优化使用时的便捷，减少代码量

目前功能

右键菜单

2025-05-10T03:20:48.png
简单贴一下代码

<template>
  <div class="pr-main">
    <wxy-context-menu :menu="menu1" @select="handleSelect">
      <div class="context-menu">菜单面板1</div>
    </wxy-context-menu>

    <wxy-context-menu :menu="menu2">
      <div class="context-menu">菜单面板2</div>
    </wxy-context-menu>
  </div>
</template>

<script setup>
const menu1 = [
  { label: "菜单一", index: 1 },
  { label: "菜单二", index: 2 },
  { label: "菜单三", index: 3 },
];
const menu2 = [
  { label: "菜单四", index: 4 },
  { label: "菜单五", index: 5 },
  { label: "菜单六", index: 6 },
];

const handleSelect = (e) => {
  alert(JSON.stringify(e));
};
</script>

<style>
.pr-main {
  width: 100%;
  display: flex;
  gap: 24px;
}

.context-menu {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 200px;
  border-radius: 4px;
}
</style>

Json数据展示

组件有待优化，欢迎大家github提交issue

2025-05-10T03:22:59.png

信息内容展示组件

用于备注类信息展示

2025-05-10T03:35:18.png

计划

  • 公告
  • 无限轮播
  • 基于ele二次封装的pro table
  • 基于ele二次封装的pro form

结尾

这次组件的封装也学习到了很多的东西vitepress和组件的发布，封装组件的思想和业务组件也是不同，欢迎交流学习，后续也会更新更多的组件