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')
组件使用
参数说明
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>
