关于前端:antsimplepro20正式发布助力vue3社区

ant-simple-pro 在 2 月份公布 v1.0 版本，到当初已近有一段时间了，并且也在 github 上播种了100+star, 更要害的是失去了偏右，陈帅，小夕等大佬的激励，使我这个菜鸟更加有了学习的能源和保护，做好 ant-simple-pro。

捷足先登的 2.0

已实现版本

• react(v2.0)
• react+ts(v2.0)
• vue3.1+ts(v2.0)
• vue3.1(v2.0)

未实现局部

• angular(2.0)

此次的版本更新，react 版本难度不大，难的是 vue 版本，因为 react 对应的插件和第三方库，vue3.0 有的没有，哎，其实也不是没有，是齐全没有，因而开启了咱们造轮子的想法。

舒适提醒：如下代码片段只是演示，并不是残缺的，残缺的请查看 ant-simple-pro。

vue3-grid-layout

vue3-grid-layout 借鉴了 vue-grid-layout，react-grid-layout 这两个库，并且咱们在 vue-grid-layout 的根底上，全副用 vue3+ts 全副重写，使其反对 vue3，typescript，vue3-grid-layout 可能有很多的 bug，不过欢送各位提 issues，vue3-grid-layout 文档地址。

// 如下代码来自 ant-simple-pro
import {GridLayout, GridItem} from '@/components/grid-layout'
 <GridLayout
  v-if="layout.length"
  ref="gridLayout"
  v-model:layout="layout"
  :col-num="12"
  :row-height="30"
  :is-draggable="true"
  :is-resizable="true"
  :is-mirrored="false"
  :vertical-compact="true"
  :margin="[10, 10]"
  :use-css-transforms="true"
>
      <GridItem
        :ref="setItemRef"
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <component :is="item.type" @contextmenu="e => onComponentClick(e, item)" :data-i="item.i"></component>
      </GridItem>
</GridLayout>

vue3-context-menu

vue3-context-menu 是咱们自已写的一款右键菜单组件，用 vue3+ts 进行编写, 完满的反对vue3，typescript，如若有 bug，能够提 issues，vue3-context-menu 文档地址。

// 如下代码来自 ant-simple-pro
import createContextMenu from '@/components/context-menu/create-context-menu'
 setup() {function onContainerRightClick(e: MouseEvent) {
      createContextMenu({
        event: e,
        menus: [
          {
            label: '编辑',
            handler() {visible.value = true}
          },
          {
            label: '复制题目',
            handler(item, event: MouseEvent) {copy(form.title, event)
              message.destroy()
              message.success('复制胜利，ctrl+ v 进行粘贴')
            }
          }
        ]
      })
    }
  }
 <a-row type="flex" class="menu-container" align="middle"      @contextmenu="onContainerRightClick">
      <ComImage className="image" :src="logo" alt="logo" />
      <h2 class="title">{{data.title}}</h2>
      <section class="font-size-16">{{data.description}}</section>
</a-row>

vue3-qrcode

vue3-qrcode 是咱们自已写的一款生成二维码的组件，用 vue3+ts 进行编写, 完满的反对vue3，typescript，如若有 bug，能够提 issues，vue3-qrcode 地址文档。

// 如下代码来自 ant-simple-pro
import VueQrcode from '@/components/qrcode'
<VueQrcode
  ref="qrcodeRef"
  canvasClass="canvas-qrcode"
  :value="config.linkUrl"
  :size="config.size"
  :style="{margin:'auto'}"
  :imageSettings="{
    src: config.logoUrl,
    width: config.logoW,
    height: config.logoH,
    excavate: config.excavate
  }"
></VueQrcode>

vue3-color

vue3-color 是咱们借鉴了 react-color 的源码思维，用 vue3+ts 写的一款色彩选择器组件，齐全反对 vue3,ts, 咱们对外裸露了SketchPicker,SwatchesPicker 等组件选择器，api 和组件选择器，更 react-color 一模一样，vue3-color 文档地址。

// 如下代码来自 ant-simple-pro
import {Sketch, Swatch, Chrome, Compact} from '@/components/vue-color'
<a-row :gutter="[20, 20]" type="flex">
  <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
    <Sketch v-model:value="color"></Sketch>
  </a-col>
  <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
    <Swatch v-model:value="color"></Swatch>
  </a-col>
  <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
    <Chrome v-model:value="color"></Chrome>
  </a-col>
  <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
    <Compact v-model:value="color"></Compact>
  </a-col>
</a-row>

vue3-cropImage

vue3-cropImage 是咱们写的一款图片上传剪切组件，vue3+ts编写，完满反对vue3, 操作简略，vue3-cropImage 文档地址。

// 如下代码来自 ant-simple-pro
import CropImage from '@/components/cropper/index.vue'
 <CropImage v-model:visible="visible" :src="src" @submit="onCropSubmit" :file="fileRef"></CropImage>

vue3-useHotkeys

vue3-useHotkeys 是咱们写的一款按键监听插件，用 vue3 中的 hooks 思维，在配合 hotkeys-js 而写的，操作简略，vue3-useHotkeys 文档地址。

// 如下代码来自 ant-simple-pro
import {useHotkeys} from '@/hooks'
useHotkeys('ctrl+d', event => {event.preventDefault()
  disabled.value = false
})
 
useHotkeys('ctrl+s', event => {event.preventDefault()
  disabled.value = true
})

vue3-for-editor

vue3-for-editor 是咱们借鉴了 for-editor 而写进去的 markdown 语法编辑器，for-editor
是一款 reactmarkdown 语法编辑器，尽管作者没怎么保护了，然而咱们看中了 for-editor 简洁，适宜二次开发的特点，所以用vue3+ts 全副重写，能够认为 vue3-for-editor 是 for-editor 的 vue 版本，vue3-for-editor 文档地址。

// 如下代码来自 ant-simple-pro
import ForEditor from '@/components/for-editor'
 <ForEditor v-model:value="value"></ForEditor>

vue3-codemirror

vue3-codemirror 是咱们借鉴了 CodeMirror，且在 CodeMirror 的根底上用 vue3+ts 写的一个代码编辑器组件，使其完满反对 vue3 和操作简洁，vue3-codemirror 文档地址。

// 如下代码来自 ant-simple-pro
import Codemirror from '@/components/vue-codemirror/index.vue'
<Codemirror
  v-model:value="content"
  :options="{
    mode: 'javascript',
    theme: 'material',
    lineNumbers: true
  }"
></Codemirror>

vue3-tinymce

vue3-tinymce 是咱们借鉴了 tinymce 和 tinymce-vue 这 2 个插件而写的一个富文本编辑器组件，尽管 tinymce-vue 当初曾经反对 vue3.0 了，然而有些bug，咱们在这二者之间，再次进行封装，使其操作更加简洁，vue3-tinymce 文档地址。

// 如下代码来自 ant-simple-pro
import TinymceEditor from '@/components/tinymce/index.vue'
 <TinymceEditor v-model:value="form.content" placeholder="请输出"></TinymceEditor>

emoji-mart-vue

emoji-mart-vue 并不是咱们开发的，而且 emoji-mart-vue 也反对 vue3.0, 只是确少ts 申明，所以咱们对 emoji-mart-vue 新增了 ts 版本的类型申明文件
地址。

// 如下代码来自 ant-simple-pro
import {Picker, EmojiIndex} from 'vue-emoji-mart'
 <Picker :data="emojiIndex" set="apple" @select="onSelect" :i18n="i18nConfig" />

总结

如上所述的这些 vue3 组件或者插件，基本上是咱们自已编写开发和保护的，所以如果有什么 bug 也是很失常的，咱们很心愿大家可能给咱们提 issues。

咱们在 vue 版本中除了下面的这些组件外，咱们还编写了很多小组件，如 图片上传组件 ,layoutTable，scrollbar，svg 组件 等等，当然咱们也编写了一些hooks，具体的请查看此我的项目。

咱们都是一群很菜的码农，如果有些不好的中央，还请各位多多指教，咱们也想为 vue3 社区和 antd 社区献出一份微薄之力，同时也非常感谢我的好敌人；永豪为 vue 版本做出的重大贡献。

ant-simple-pro 会继续更新，迭代，不必放心我的项目没人保护的问题。

我的项目地址：ant-simple-pro。

文档地址：ant-simple-pro-document 必看。

舒适提醒：ant-simple-pro-document 文档，可能有些案例用法没有同步进来，咱们会在后续同步更新文档的。