npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

form-designer-naiveui

v1.1.0

Published

好用的vue可视化表单设计器组件

Downloads

3

Readme

form-create-designer-naiveui

这个是 Vue3 版本

MIT github

form-create-designer-naiveui 是基于 @form-create/naive-ui vue3版本实现的表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。

form-create-designer 是基于 @form-create/element-ui 开发的表单设计器,本项目更换原项目的UI框架为 Naive UI ,做出的更改如下:

  • Element Plus v2.0.1 -> Naive UI v2.34.3
  • codemirror v5.60.0 -> v6.0.1
  • 自定义ColorPicker组件,便于定制组件颜色
  • 更新部分组件为Vue 3版本

文档 | 在线演示 | form-create 文档

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目可继续完善,如有任何建议或问题请在这里提出

demo1

引入

NodeJs:

npm i form-designer-naiveui

请自行导入NaiveUI并挂载

import formCreate from '@form-create/naive-ui'
import FcDesigner  from 'form-designer-naiveui'

app.use(formCreate)
app.use(FcDesigner)

使用

<fc-designer ref="designer"/>

设置多语言

通过 locale 配置项设置语言

<template>
  <fc-designer :locale="locale"></fc-designer>
</template>

<script>
import En from "form-designer-naiveui/locale/en";
export default {
  data(){
    return {
        locale: En,
    }
  }
}
</script>

组件props

  • menuMenuList 重新配置拖拽的组件

  • heightint|string 设计器组件高度, 默认100%

  • localeobject 设置多语言

  • configConfig 设置多语言

  • mask boolean 设置拖拽表单中的组件是否可以操作

组件方法

  • 获取当前生成表单的生成规则

    type getRule = () => Rule[]

    示例: this.$refs.designer.getRule()

  • 获取当前表单的全局配置

    type getOption = () => Object
  • 设置当前生成表单的规则

    type setRule = (rules: Rule[]) => void;
  • 设置当前表单的全局配置

    type setOption = (option: Object) => void;
  • 增加一组拖拽组件

    type addMenu = (menu: Menu) => void;
  • 删除一组拖拽组件

    type removeMenu = (name: string) => void;
  • 批量覆盖插入拖拽组件

    type setMenuItem = (name: string, items: MenuItem[]) => void;
  • 插入一个拖拽组件到分组

    type appendMenuItem = (name:string, item: MenuItem) => void;
  • 删除一个拖拽组件

    type removeMenuItem = (item: string | MenuItem) => void;
  • 新增一个拖拽组件的生成规则

    type addComponent = (item: DragRule) => void;

提示! 内置的三个组件分组name分别为: main,aide,layout

联系

email : [email protected]

License

MIT

Copyright (c) 2021-present xaboy