switch 开关

switch 开关

基本用法

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>      
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1:{
        title: "",
        type: "switch",
        form: {          
          col:{span:24},
          props:{
            value:1,
            text:'同意选项',
            events:{
              change:(scope)=>{
                console.log(scope);
              }
            }                
          }            
        }
      },
      fn2:  {
        title: "自定义图标",
        type: "switch",
        form: {          
          component:{
            'active-icon':"Check",
            'inactive-icon':'close'
          },
          col:{span:24},
          props:{
            value:1,
            text:'同意选项'
          }            
        }
      },
    },
    form:{
      labelPosition:'left'
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fn2:'2' };

  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

switch API

PropsName	Description	Type	Default
key	字段名称子组件column配置	json
└ title	标题	string
└ type	switch	string
└ form	表单栏位配置	json
└└ rules	验证规则，参考原生el配置	array
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ value	单个复选框时的Value	object
└└└ text	单个复选框时的显示的文本	string
└└└ events	组件事件	json
└└└└ onChange	值change触发
└└ tooltip	输入提示内容	string
└└ order	排序	number
└└ show	是否显示	boolean
└└ blank	是否空占位	boolean
└└ prefixRender	组件左边render
└└ suffixRender	组件右边render

switch Exposes

Name	Description
ctlRef	原生组件引用