HaierUI Plus

Appearance

Return to top
On this page

common-custom 自定义输入框（齐思博）

基础用法

自定义输入框内容，通过customElName自定义标签，目前仅测试完成时间日期选择器。

当labelName不传或为空时，内容左对齐，否则右对齐
时间段:
-
----
日期:
----
输入框:
----
输入框:
请选择
--无label--
请选择
<template>
  <div>
    <h-common-custom
      v-model="dateCustom"
      customElName="el-date-picker"
      labelName="时间段:"
      type="daterange"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      width="300px"
    ></h-common-custom>
    <div>----</div>
    <h-common-custom
      v-model="dateCustom02"
      customElName="el-date-picker"
      labelName="日期:"
      type="date"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      width="300px"
    ></h-common-custom>
    <div>----</div>
    <h-common-custom
      labelName="输入框:"
      v-model="dateCustom03"
      customElName="el-input"
      width="300px"
    ></h-common-custom>
    <div>----</div>
    <h-common-custom
      labelName="输入框:"
      v-model="dateCustom03"
      customElName="el-select"
      width="300px"
      :options="[
        { label: '选项1', value: 1 },
      ]"
    ></h-common-custom>
    <div>--无label--</div>
    <h-common-custom
      v-model="dateCustom03"
      customElName="el-select"
      width="300px"
      :options="[
        { label: '选项1', value: 1 },
      ]"
    ></h-common-custom>
  </div>
</template>

<script setup>
import {
  ref
} from 'vue';
let dateCustom = ref(['', '']);
let dateCustom02 = ref('');
let dateCustom03 = ref('');
</script>

Attributes（可自定义扩展配置）

参数说明类型可选值默认值
value / v-model输入框绑定值———
disabled是否禁用boolean—false
labelName选择框关联的label文字string——
width输入框宽度string—100%
customElName自定义标签string——
optionsel-select选项列表array——

Events

方法名说明参数
input当绑定值变化时触发当前值
change当绑定值变化时触发当前值