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

@dimple-smile/dimple-lowcode

v0.3.14

Published

简单的表单设计器

Downloads

25

Readme

简介

一款无额外心智负担的表单设计器。具有以下特点:

  • 无额外运行时,支持嵌入任意业务系统
  • 组件式引入,支持个性化的业务初始配置
  • 极简的组件拓展方式,飞速拓展业务进行表单搭建
  • 基于element-ui

组件效果预览

你有两种方式预览

  • 使用浏览器访问该地址:https://dimple-lowcode.vercel.app 进行预览。
  • 这个项目本身就是一个 vue-cli 项目,git clone该项目到本地后,npm i之后 npm run dev即可预览。

目录

安装

(Back to top)

// 1.该组件依赖于element-ui,首先保证项目内引用了element-ui

// 2.在命令行里执行
$ npm i @dimple-smile/dimple-lowcode

// 3.在你的代码里写
import { DimpleLowcodeForm } from '@dimple-smile/dimple-lowcode'

使用说明

(Back to top)

下面是一个简单的使用例子

在src/App.vue文件里能看到预览使用的栗子

<template>
  <div style="height: 100vh">
    <DimpleLowcodeForm :materials="materials" :config="config" :data="data" />
  </div>
</template>

<script>
import { DimpleLowcodeForm } from '@dimple-smile/dimple-lowcode'
export default {
  components: { DimpleLowcodeForm },
  data() {
    return {
      config: {},
      materials:[],
      data:[],
    }
  },
}
</script>

参数

(Back to top) | 参数名 | 意义 | 类型 | 默认值 | 说明 | | -| -| -| - | - | | value | 渲染的表单数据 | Array | [] | 用于预置渲染或者预览渲染表单页面,支持v-model | | systemMaterials | 系统素材列表 | Array | systemMaterials() | 系统库素材库,import { systemMaterials } from '@dimple-smile/dimple-lowcode' 可以拿到 | | materials | 素材列表 | Array | [] | 会添加于系统库之后 | | config | 配置项 | Object | {} | 可以填一些初始的表单配置,支持sync双向绑定 | | preview | 是否为预览模式 | Boolean | null | 是否为预览模式,支持sync双向绑定 | | saveRequestConfig | 保存时的自定义配置 | Function | null | 此配置为一个函数,会带上当前框架已经校验完成的axios请求配置 | | btnRequestConfig | 按钮提交时的自定义配置 | Function | null | 此配置为一个函数,会带上当前框架已经校验完成的axios请求配置 | | saveHandler | 自定义保存操作 | Function | null | 配置后请求按钮会替换为此Handler,参数:{ layout,config } | | btnHandler | 自定义按钮操作 | Function | null | 配置后按钮操作事件会替换为此Handler,参数:{ layout,config,btnConfig } | | renderType | 渲染类型 | string | form-item | 每个渲染item的渲染类型,默认为表单项,填入custom可以为一个纯粹的容器 | | gutter | 布局子项之间的间距 | string | null | 单位为px或者vw、vh | | gutterPlacement | gutter的位置 | string | right | 支持['top', 'bottom', 'left', 'right']四选一 |

// materials 配置示例
import { FormItem } from '@/components/form' 
import { 
  valueTypes, // 所有支持的数据类型
  editTypes, // 所有支持的参数编辑类型
} from '@dimple-smile/dimple-lowcode'

[
  {
    key: 'custom', 
    name: '业务组件库',
    components: [{
      key: 'custom.input', // 组件的key,必须保证全局唯一
      name: '业务输入框', // 组件的名称
      component: FormItem, // 组件的引用
      value: '', // 组件v-model的值,所有业务组件必须实现v-model
      valueType: valueTypes.string.value, // 数据类型,可以从valueTypes中获取支持的类型
      defaultProps: { type: 'input' }, // 组件的默认参数

      // renderType: 'form-item', // 组件渲染类型,默认不需要传入可以从['form-item','mobile-form-item','custom']中选择
      // defaultInputProps: {}, // 默认值输入使用组件录入时的参数

      // props对象为当前组件可配置的参数列表,每一项的编辑类型可以从editTypes中选择,每一项的值会被赋予到组件的props中
      props: {
        options: { 
          label: '选项列表', // 参数的标签名称
          value: [], // 参数的值
          editType: editTypes.options // 编辑参数时使用的组件类型
        },
      },
    }]
  }
]
// config 配置

// 表单的默认配置,import { formConfig } from '@dimple-smile/dimple-lowcode'
const formConfig = () => {
  return {
    // id: '', // 表单id,不传会自动生成
    name: '', // 表单名称
    columnWidth: '100%', // 表单项的列度
    style: { padding: '20px' }, // 表单容器的样式
    formProps: { // 表单的配置
      labelLength: 8, // 表单下所有项目的文本宽度
      alignItems: 'center', // 表单下所有项目的内容对齐方向
      labelPosition: 'right', // 表单下所有项目的标签对齐方向
      // marginBottom: '20px', // 表单下所有项目的距离底部距离
    },
    buttons: [], // 表单的操作按钮组,可以配置多个,每一项都需要满足formButtonItem的配置
    save: { ...formButtonItem, text: '保存', btnType: 'primary' }, // 表单保存配置,和按钮配置formButtonItem一样
  }
}

// 操作按钮的配置
const formButtonItem = {
  text: '按钮', // 按钮显示的文本
  btnType: 'default', // 按钮的类型:primary / success / warning / danger / info / text
  operateType: buttonOperateTypes.request.value, // 按钮的操作类型,见buttonOperateTypes
  api: '', // 按钮操作类型为网络请求时,请求的接口地址
  formDataFiledName: 'form', // 发起网络请求时表单数据的字段名
  successMsg: '发送成功', // 发起网络请求时发送成功的提示信息
  errorMsg: '发送失败', // 发起网络请求时发送失败的提示信息
  headers: [], // requestParamItem[]
  body: [], // requestParamItem[]

  link: '', // 按钮操作类型为链接跳转时,跳转的地址
}

// 按钮的操作类型 import { buttonOperateTypes } from '@dimple-smile/dimple-lowcode'
const buttonOperateTypes = {
  request: { value: 'request', label: '网络请求' },
  link: { value: 'link', label: '链接跳转' },
}

插槽

(Back to top)

| 参数名 | 意义 | 说明 | | - | - | - | | logo | logo处的插槽 | 默认为项目名称

事件

(Back to top) | 参数名 | 意义 | 说明 | | - | - | - | | afterSave | 保存成功之后触发的事件 | 保存失败不会触发,参数为请求成功的返回值 | | afterSaveError | 保存失败之后触发的方法事件 | 保存成功不会触发,参数为请求失败的返回值 | | afterBtnRequest | 按钮请求提交成功之后触发的事件 | 提交失败不会触发,参数为请求成功的返回值 | | afterBtnRequestError | 按钮请求提交失败之后触发的方法事件 | 提交成功不会触发,参数为请求失败的返回值 |

开发说明

(Back to top)

src文件夹存放着组件的全部源码。入口为src/packages/*

贡献

(Back to top)

@dimple-smile

赞助

(Back to top)

Love

许可证

(Back to top)

只要不商用,注明出处即可。

GNU General Public License version 3

最后

(Back to top)

谢谢你的使用~