areaResponse 区域响应指令

areaResponse 指令主要用来处理，宽度固定或者不固定的情况下，区域内输入控件的布局展示。场景如下

在某区域只是组合了已有的功能或者组件，不能修改内部的输入控件的布局。但是此区域与整个页面的宽度不一致，会使响应时出现视觉上的不一致。在区域上使用此指令，可以根据当前区域的实际宽度，追加上真正的宽度样式，让输入控件布局展示与视觉宽度一致。
在弹出窗口组合已经的功能或组件，不能修改内部的输入控件的布局。弹出窗口的宽度是可拖拽的，输入控件需要响应这个宽度的变更，而不是依据整体页面处理输入控件。

基本用法

单据编号

合同类型

负责人

负责部门

审批人

描述

<template>
    <div class="f-form-layout farris-form farris-form-controls-inline" v-area-response>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"><span class="farris-label-text">单据编号</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"> <span class="farris-label-text">合同类型</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"><span class="farris-label-text">负责人</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"> <span class="farris-label-text">负责部门</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"><span class="farris-label-text">审批人</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3 col-el-2">
            <div class="farris-group-wrap">
                <div class="form-group farris-form-group">
                    <label class="col-form-label"> <span class="farris-label-text">描述</span></label>
                    <div class="farris-input-wrap">
                        <input class="form-control" type="text" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

指定数据

接收值属性含义

属性名	类型	默认值	说明
enable	`boolean`	true	true 是启用区域响应，false 为禁用区域响应
autoWidth	`boolean`	true	是否监听区域的宽度变更，如果为 false,只根据初始时的宽度处理输入控件，如果为 true,监听区域的宽度变更，根据宽度变更调整输入控件的展示。

事件

TIP

暂无内容

插槽

TIP

暂无内容

areaResponse 区域响应指令 #

基本用法 #

指定数据 #

接收值属性含义 #

事件 #

插槽 #

areaResponse 区域响应指令

基本用法

指定数据

接收值属性含义

事件

插槽