vueform表单整体禁用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vueform表单整体禁用相关的知识,希望对你有一定的参考价值。

参考技术A 目前的想法是用 vue 将 input 封装成一个组件,label 可以通过 props 传进去,但是这个 v-model 确是不知道应该怎么传进去了!

关于bootstrap--表单控件(disabled表单禁用显示表单验证的样式)

1、disabled:

(1)在input中加入disabled可使表单禁用,如图:

<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled></div>

(2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:

<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
</fieldset>

 

2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:

 <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>

3、表单验证状态:加上has-feedback,并且加一个

<span class="glyphiconglyphicon-ok form-control-feedback"></span>

标签,才会出现小图标;在<input>下面加上<span class="help-block">来显示“你们输入的正确信息”。

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你是输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

 

以上是关于vueform表单整体禁用的主要内容,如果未能解决你的问题,请参考以下文章

Angular 3 形成 2 任一条件禁用按钮

启用/禁用表单控件触发 valueChanges Angular 2 Forms

simple_form: 禁用表单而不添加 disabled: true 或 readonly: true 到每个输入

重置后角度表单保持禁用

学习 Bootstrap 5 之 Forms

对模型驱动表单使用禁用