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

el-form-renderer

v1.1.2

Published

A Vue.js project

Downloads

86

Readme

el-form-renderer

Form renderer is based on element-ui. It inherits all of the element's attribute definitions completely and extends them briefly. So users can render a complete element form by using a piece of preset data.

Quick start

// Step1: Make sure you have properly installed element-ui and used it correctly.

// Step2: Install
yarn add el-form-renderer

// Step3: In the .vue file that needs the renderer
<template>
  <el-form-renderer :content="content"></el-form-renderer>
</template>

<script>
import ElFormRenderer from 'el-form-renderer'

export default {
  components: {
    ElFormRenderer
  }
}
</script>

Props

  • Support all attributes on el-form.

  • disabled [Boolean] Set true to disable all atomic forms. If the element-ui version is still below 2.1.0, it is still compatible.

  • content [ObjectArray] Define the contents of the form, each Object represents an atomic form (such as el-input, el-select, ...), All attributes on the el-form-item are declared here, and attributes on the el-input etc. are declared on the $el attribute. There are other attributes on the Object such as: $id, $type, $default,$enableWhen[optional], $options[optional], $attrs[optional].

// content example
[
  {
    $id: "form1", // Each atomic form uses an id to store its value, be careful not to repeat
    $type: "input", // Type, all the form types provided by element, like el-xxx
    $enableWhen: { form2: 'beijing' }, // Optional attribute, which means that the this atomic form will display when form2's value is beijing
    $attrs: { 'data-name': 'form1' }, // Optional attribute, wording follows the Render function specification of Vue
    label: "Input", // A property on the el-form-item
    $default: "default value",
    rules: [{ required: true, message: 'Please enter the name of the activity name', trigger: 'blur' }] // A property on the el-form-item
  }, {
    $id: "form2",
    $type: "select",
    label: "Select",
    // $el: Used to define the properties of a specific atomic form (el-select in this case)
    $el: {
      placeholder: "Please select your zone"
    },
    // $options: Each atomic form with Selection Capabilities use this to define options. (such as: select, radio-group, radio-button, checkbox-group, checkbox-button, etc.)
    $options: [{
      label: 'Zone one',
      value: 'shanghai'
    }, {
      label: 'Zone two',
      value: 'beijing'
    }]
  }
]

In addition, we added an optional value to the $type attribute: group, which can be used to create more complex data types:

// This example will get the object data structure:
// group1: {
//   input1: '',
//   input2: ''
// }
{
  $id: "group1", // Follow the principle of the same level of ID is not repeated, essentially equivalent to the object's key
  $type: "group",
  label: "object data example",
  $items: [{
    $id: "input1",
    $type: "input",
    label: "input1",
    $default: "default value"
  }, {
    $id: "input2",
    $type: "input",
    label: "input2",
    $default: "default value",
  }]
}

Methods

  • Supports all methods on el-form.

  • Other Methods:

| Method Name | Description | Parameters | | ---------- | -------- | ---------- | | getFormValue | Get the value of the current form | - | | updateValue | Update form value manually | ({ id, value }) |

Slot

  • You can insert a custom VNode at the end of the form by using the default slot.