Narcoleptic's Patch Mangler

    v-form-dialog

    1.0.1 • Public • Published

    v-form-dialog

    基于vue、element-ui的表格弹窗组件,用于信息的添加、编辑等操作。

    Installing

    install with npm

    npm install --save v-form-dialog
    

    Import into your component:

    import FormDialog from 'v-form-dialog';
    

    Useage:

    const schema = [
        { "prop": "name", "label": "姓名","tooltip":"姓名格式为字母数字" },
        { "prop": "sex", "label": "性别","type":"radio","options":[{"label":"男","value": 1},{"label":"女","value": 2}],"default": 1 },
        { "prop": "age", "label": "年龄","type":"number","controlsPosition": "right","min": 1,"max": 200 },
        { "prop": "birth", "label": "生日","type":"date" },
        { "prop": "city","label": "城市","type":"select", "options":[{"label":"北京","value": "beijing"},{"label":"上海","value": "shasnghai"}],"default": "beijing"},
        { "prop": "like","label": "兴趣爱好","type":"checkbox", "options":[{"label":"唱歌"},{"label":"跳舞"}],"valueKey": "label","default":[]}
    ]
    const rules = {
        "name":[
            {"required":true,"message":"请输入姓名","trigger":"blur"},
            {"pattern":"^[a-zA-Z0-9]+$","message":"姓名格式不正确","trigger":"blur"}
        ],
        "city":[
            {"required":true,"message":"请选择城市","trigger":"blur"}
        ]
    }
    FormDialog.show({
        title:"例子",
        schema: schema,
        rules: rules,
        submit: (form, cb)=>{
            //模拟保存,显示loading
            const loading=this.$loading({ fullscreen: true })
            setTimeout(()=>{
                this.$message({type:'success',message:'保存成功',duration: 2000})
                loading.close()
                cb && cb();
            },1000)
            
        }
    })
    

    Install

    npm i v-form-dialog

    DownloadsWeekly Downloads

    6

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    489 kB

    Total Files

    24

    Last publish

    Collaborators

    • tuchongyang