共计 4989 个字符,预计需要花费 13 分钟才能阅读完成。
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
是一款 react
markdown 语法编辑器,尽管作者没怎么保护了,然而咱们看中了 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 文档,可能有些案例用法没有同步进来,咱们会在后续同步更新文档的。