textbox 文本框

文字输入框

基本用法

<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: "text",
        form: {
          rules: [{ required: true, message: "此项必填" }],
          col:{span:24},  //默认12
          tooltip:'Tooltip提示'         
        }      
      },
      fn2: {
        title: "带图标",
        type: "text",
        form: {
          col:{span:24},          
          component:{
            'prefix-icon':'search',
            'suffix-icon':'Calendar',
            clearable:false
          }      
        }      
      },
      fn3: {
        title: "数字输入",
        type: "number",
        form: {
          col:{span:24},
          component:{
            precision:2,
            step:0.01
          }      
        }      
      },
      fn5:{
        title:'',
        type:'label',
        form:{
          col:{style:'color:red'},
          props:{
            value:'文字内容文字内容'
          }
        }        
      },
      fn4:{
        title:'多行文本',
        type:'textarea',
        form:{
          col:{span:24},    
          component:{
            rows:3
          }
        }
      },
    },
    form:{
      labelWidth:'80px' //默认120
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fn3:123.05};

  return {
    formOptions,   
    formRef
  };
}

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

槽位

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions">
        <template #fn2_append>
            <dn-icon icon="search"></dn-icon>
        </template>
      </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: "text",
        form: {
          col:{span:24},
          tooltip:{
            text:'json槽位',
            color:"red"
          },
          props:{
            slots:{
                prepend:(scope)=>{                    
                    return <dn-icon icon="search"></dn-icon>
                }
            }
          }               
        }        
      },
      fn2: {
        title: "template槽位",
        type: "text",
        form: {
          col:{span:24}            
        }        
      }
    },
    form:{
        labelPosition:'top'
    }
  });
}

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

  return {
    formOptions,   
    formRef
  };
}

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

textbox API

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

textbox 事件

Name	Description
原生事件	component下写事件，参考原生组件事件

textbox Slots

Name	Description
key_[原生组件槽位名称]	原生槽位

textbox Exposes

Name	Description
ctlRef	原生组件引用