web-bing

##效果

安装依赖

  npm install web-bing

项目中引用

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 引入
import componentsBing from 'web-bing'
import 'web-bing/dist/web-bing.css'
Vue.use(componentsBing)

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

组件使用

参数说明

config：表单数据
formData： 绑定form表单
size: 尺寸
labelBg: label背景颜色
border：是否显示边框

useComponents.vue

<template>
  <div id="app">
       <sd-form ref="formref" :config="config" size="mini" labelBg="#EAF2FF" border v-model="formData">
        <!-- 具名插槽 -->
        <template #testSlot>
            <el-input v-model="formData.slotName" placeholder="这是自定义表单"></el-input>
        </template>
        <!-- 具名插槽 -->
        <template #testSlot1>
            <el-input v-model="formData.slotName1" placeholder="这是自定义表单1"></el-input>
        </template>
        <el-button type="primary" @click="formSave">保 存</el-button>
    </sd-form>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      config: {},
      formData: {}
    }
  },
  // config为表单数据
  // formData为绑定数据结构
  created() {
        this.config = {
            labelWidth: '120px',  //  label宽度
            labelPosition: 'right', // label对齐方式
            size: 'medium', //  表单尺寸
            formItems: [ // 表单元素
                {
                    label: "自定义表单", //表单名称
                    name: "slotName", // formData绑定的key
                    span: 8, // el-col的span
                    slotName: 'testSlot', // 具名插槽
                    rules: [ // 校验规则
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                },
                {
                    label: "输入框",
                    name: "name",
                    component: "input", // 表单类型
                    span: 8,
                    bind: { // elementui 内置props
                        maxlength: "20",
                        placeholder: "Activity name",
                    },
                    rules: [
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                    requiredHandle: "$.required==true", // 是否需要校验
                },
                {
                    label: "栅格(12/24)",
                    name: "name2",
                    component: "input",
                    span: 8,
                    bind: {
                        placeholder: "span: 12",
                    }
                },
                {
                    label: "栅格(12/24)",
                    name: "name3",
                    component: "input",
                    span: 24,
                    bind: {
                        placeholder: "span: 12",
                    }
                },
                {
                    label: "自定义表单1", //表单名称
                    name: "slotName1", // formData绑定的key
                    span: 12, // el-col的span
                    slotName: 'testSlot1', // 具名插槽
                    rules: [ // 校验规则
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                },
                {
                    label: "级联选择器",
                    name: "cascader",
                    component: "cascader",
                    span: 12,
                    options: [ // 筛选项
                        {
                            label: "Guide",
                            value: "guide",
                            children: [
                                {
                                    label: "Disciplines",
                                    value: "disciplines"
                                },
                                {
                                    label: "Consistency",
                                    value: "consistency"
                                },
                            ]
                        },
                        {
                            label: "Resource",
                            value: "resource",
                            children: [
                                {
                                    label: "Axure Components",
                                    value: "axure"
                                },
                                {
                                    label: "Sketch Templates",
                                    value: "sketch"
                                },
                                {
                                    label: "Design Documentation",
                                    value: "docs"
                                }
                            ]
                        },
                        {
                            label: "Component",
                            value: "component"
                        },
                    ]
                },
                {
                    label: "多选框",
                    name: "checkbox",
                    component: "checkbox",
                    span: 12,
                    tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
                    options: [ // 表单具体属性
                        {
                            label: "选项1",
                            name: "option1"
                        },
                        {
                            label: "选项2",
                            name: "option2"
                        }
                    ],
                    hideHandle: "$.required==true" // 是否隐藏
                },
                {
                    label: "多选框组",
                    name: "checkboxGroup",
                    component: "checkboxGroup",
                    span: 24,
                    options: [
                        {
                            label: "选项1",
                            value: "option1"
                        },
                        {
                            label: "选项2",
                            value: "option2"
                        }
                    ],
                    hideHandle: "$.required==true" // 动态显示隐藏此表单
                },
                {
                    label: "单选",
                    name: "radio",
                    component: "radio",
                    options: [
                        {
                            label: "选项1",
                            value: "1"
                        },
                        {
                            label: "选项2",
                            value: "2"
                        }
                    ],
                    hideHandle: "$.required==true"
                },
                {
                    label: "开关",
                    name: "required",
                    span: 12,
                    message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
                    component: "switch",
                },
                {
                    label: "日期/时间",
                    name: "date",
                    span: 12,
                    component: "date",
                    bind: {
                        type: "datetime",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                    },
                    rules: [
                        {required: true, message: "Please input Data", trigger: "change"}
                    ],
                },
                {
                    label: "数值",
                    name: "number",
                    component: "number",
                },
                {
                    label: "颜色",
                    name: "color",
                    component: "color",
                },
                {
                    label: "评分",
                    name: "rate",
                    component: "rate",
                }
            ]
        }
        this.formData = {
            slotName: '自定义表单',
            slotName1: '123',
            name: '',
            name2: '',
            name3: '',
            cascader: '',
            checkbox: {},
            checkboxGroup: [],
            radio: '1',
            required: false,
            date: '',
            slider: 8,
            number: 0,
            color: '',
            rate: 0
        }
  },
  methods: {
    // 表单保存
      formSave() {
          this.$refs.formref.validate((valid) => {
              if(valid) {
                  console.log(this.formData)
              }
          })
      }
  }
}
</script>

<style>

</style>