更新记录

1.2.1（2020-05-11）

2020-5-11

如果没有label，隐藏label的view

1.2.0（2020-05-11）

2020-5-11

1. 添加背景色，mode="cube" 时有效
2. 添加 field-group 的说明

1.1.0（2020-05-11）

2020-5-11

1. 添加 label 自定义 class
2. 当 disabled 时，添加小锁图标和相关设置
3. label 和 input 之间添加插槽，例如手机号码字段，label 存在，又要在 input 前标记固定的+86，可使用slot="inputBefore"

平台兼容性

更新日志

2020-5-11

如果没有label，隐藏label的view

说明

包含 2 种样式的文本框

实现

1. 对应 uni 文档的 input 属性；
2. 必填显示红色星号；
3. 错误信息红线和红框提示；
4. 获取焦点动态下划线；
5. 下划线模式、带背景框双模式；

属性

方法

关联

ju-field-group

文本框的组，此组件并不设置任何 props，使用后，回给mode="default"生成上下两条灰色线条，ju-field就会缩进一些

调用示例

<!-- 带分组 -->
<ju-field-group>
  <ju-field
    required
    class="mb-15"
    placeholder="请输入手机号码"
    label-icon="app-icon icon-phone font-size-20"
    type="number"
    maxlength="11"
    v-model="mobile"
    border="yellow"
    focus-border="purple"
    error-text="我错啦"
  />

  <ju-field
    required
    class="mb-15"
    placeholder="请输入手机号码"
    label-icon="app-icon icon-phone font-size-20"
    type="number"
    maxlength="11"
    v-model="mobile"
    border="yellow"
    focus-border="purple"
    error-text="我错啦"
  />
</ju-field-group>

<!-- 设置disabled，并且设置小锁图标class -->
<ju-field
  disabled
  disabled-lock-class="bg-red text-white"
  mode="cube"
  required
  class="mb-15"
  placeholder="请输入手机号码"
  label-icon="app-icon icon-phone font-size-20"
  type="number"
  maxlength="11"
  v-model="mobile"
  border="yellow"
  focus-border="purple"
  error-text="我错啦"
/>

import juFieldGroup from "ju-field-group";
import juField from "ju-field";

export default {
  components: {
    juFieldGroup,
    juField,
  },
};

slot

slot=control

右边插槽，例如文本框右边添加一个“获取验证码”按钮

slot=inputBefore

label 和 input 之间当插槽

slot=disabledLock

当disabledLock="custim"且设置了 slot="disabledLock"，插槽生效

<ju-field
  mode=""
  placeholder="输入6位验证码"
  label-icon="app-icon icon-verification-code font-size-20"
  type="number"
  maxlength="11"
  v-model="code"
>
  <template
    slot="control"
  >
    <view
      class=""
      >获取验证码</view
    >
  </template>
</ju-field>