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

common_form_item

v3.1.7

Published

这个组件是一个万能表单组件;不受不同项目组件库不同的影响;采用jsx写法;动态渲染表单元素

Downloads

21

Readme

commonFormChild

这是用jsx写的万能表单组件; 注意的是vue3.x以上版本请安装版本3.0.0以上的版本;vue3.x以下版本请安装版本3.0.0以下的版本;两者切记不可混用

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |data|这是传入表单组件的属性|Object|false|{"name":"","placeholder":"请选择","value":"","options":[],"type":"text"}| |form|这是form表单对象值|Object|false|{}|

例子

import CommonFormItem from "common_form_item"

vue2.x 如此引入 Vue.use(CommonFormItem)

vue3.x 如此引入 app.use(CommonFormItem)

这样你的项目中可以使用一个CommonFormItem组件;这个组件是一个万能表单组件;不受不同项目组件库不同的影响;

这样你可以使用CommonFormItem组件封装成自己项目的需求

<template>
  <div>
    <common-form-item :data='fields[0]' :form="form"></common-form-item>
  </div>
</template>

<script>
//  type为select\checkbox\radio时表示父子组件;一定要options与childTag有值;否则不会渲染
export default {
       data(){
           return {
               form:{
                 name:'',
                 sex:'',
                 channel:'',
                 sex:'',
               },
               fields:[
                 {
                    tag:'el-input',  //标签名称
                    childTag:'el-option',//针对复合元素才有该属性;指明子元素
                    options:[], //为下拉选择框\多选框\单选框准备等父子组件准备
                    type:'text', //指明文本框是输入框、文本域、单选、多选、下拉选择框,可选择值text|textarea|select|checkbox|radio 和其他 原生 input 的 type 值
                    onChange:()=>{}, //给组件传入的事件写法
                    onClick:()=>{},  //给组件传入的事件写法 ;组件有什么事件;只需在事件前面加上on即可;但要注意驼峰命名
                    /* 
                    name标识传入组件双向绑定的字段;v2只能是字符串;v3为字符串/对象/数组;
                    字符串表示该组件只有一个v-model且无参数
                    数组表示该组件有多个v-model
                    对象时;name = {
                        argument:'modelValue',  //表示v-model:argument的参数
                        modifiers:'trim'||['trim','number'], //表示v-model的修饰符,只支持vue内置的修饰符
                        name:'name',
                    }
                    */
                    name:'name', 
                    label:'姓名',
                    clearable:true,
                    placeholder:'请输入姓名',
                    maxlength:10,
                    'show-word-limit':true,
                    class:{
                        'my-input':true
                    },
                    style:{
                        width:'300px'
                    },
                    scopedSlots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //作用域插槽写法 距离是该组件有一个header的作用域插槽;此属性在vue2.x版本有效;在vue3.x中已移入slots属性中
                    slots:{
                        suffix:()=>{
                            return (
                                <span>天</span>
                            )
                        },
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //插槽写法包括作用域插槽
                 },
               ]
           }
       },
</script>