web-bing

效果

image.png

安裝依賴

  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')

組件使用

參數(shù)說明

config：表單數(shù)據(jù)
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為表單數(shù)據(jù)
  // formData為綁定數(shù)據(jù)結(jié)構(gòu)
  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: [ // 校驗規(guī)則
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                },
                {
                    label: "輸入框",
                    name: "name",
                    component: "input", // 表單類型
                    span: 8,
                    bind: { // elementui 內(nèi)置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: [ // 校驗規(guī)則
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                },
                {
                    label: "級聯(lián)選擇器",
                    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 表示擁有嵌套關(guān)系。否則將值“平鋪”在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" // 動態(tài)顯示隱藏此表單
                },
                {
                    label: "單選",
                    name: "radio",
                    component: "radio",
                    options: [
                        {
                            label: "選項1",
                            value: "1"
                        },
                        {
                            label: "選項2",
                            value: "2"
                        }
                    ],
                    hideHandle: "$.required==true"
                },
                {
                    label: "開關(guān)",
                    name: "required",
                    span: 12,
                    message: "演示如何使用表達(dá)式動態(tài)顯隱和必填，試試打開和關(guān)閉開關(guān)",
                    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: "數(shù)值",
                    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>