Vue Jwhuang UI

Appearance

输入类组件 ​

设计思想与原则 ​

简洁 ​

使用简单，只需要 <Input type="{组件类型}" v-model="value" /> 一行代码，一目了然。组件功能、样式高度内聚，入参简单，出参简单。

统一 ​

对原子化输入组件抽象统一，管理统一，维护统一。

分层 ​

基础组件 -> 应用组件 -> 模板组件 -> 应用程序。

文本输入 ​

{
  "value": ""
}
vue
<Input type="text" v-model="value" />

文本域输入 ​

{
  "value": ""
}
vue
<Input type="textarea" v-model="value" />

数字输入 ​

{
  "value": null
}
vue
<Input type="number" v-model="value" />

下拉选择输入 ​

请选择
{
  "value": ""
}
vue
<template>
  <Input type="select" v-model="value" :options="options" />
</template>
<script setup lang="ts">
const options = [
  {
    value: 1,
    label: '订单类型一'
  },
  {
    value: 2,
    label: '订单类型二'
  },
  {
    value: 3,
    label: '订单类型三'
  }
]
const value = ref('')
</script>

Radio 单选输入 ​

{
  "value": ""
}
vue
<template>
  <Input type="radio" v-model="value" :options="options" />
</template>
<script setup lang="ts">
const options = [
  {
    value: 1,
    label: '订单类型一'
  },
  {
    value: 2,
    label: '订单类型二'
  },
  {
    value: 3,
    label: '订单类型三'
  }
]
const value = ref('')
</script>

Checkbox 选择输入 ​

默认 true false 修改 :trueValue="1" :falseValue="0" 改变选中值

{
  "value": true
}
vue
<Input type="checkbox" v-model="checkbox" label="是否禁用" />

Checkboxgroup 复选输入 ​

{
  "value": []
}
vue
<template>
  <Input type="checkboxgroup" v-model="value" :options="options" />
</template>
<script setup lang="ts">
const options = [
  {
    value: 1,
    label: '订单类型一'
  },
  {
    value: 2,
    label: '订单类型二'
  },
  {
    value: 3,
    label: '订单类型三'
  }
]
const value = ref([])
</script>

Switch 开关输入 ​

默认 true false 修改 :activeValue="1" :inactiveValue="0" 改变选中值

{
  "value": true
}
vue
<Input type="switch" v-model="value" />

时间选择输入 ​

类型 year | yearrange | month | monthrange | date | daterange | datetime | datetimerange 遵循element-plus组件类型

日期选择 ​


{
  "value": ""
}
vue
<Input type="date" v-model="value" />

日期时间选择 ​


{
  "value": ""
}
vue
<Input type="datetime" v-model="value" />

日期时间范围选择 ​


-
{
  "value": []
}
vue
<Input type="datetimerange" v-model="value" />

级联选择输入 ​

默认单选，字段 props: { multiple: true } 控制单选，多选

{
  "value": []
}
vue
<template>
  <Input type="cascader" v-model="value" :options="treeOptions" :props="{ multiple: true }" />
</template>
<script setup lang="ts">
const treeOptions = [
  {
    value: 1,
    label: 'Level one 1',
    children: [
      {
        value: 4,
        label: 'Level two 1-1',
        children: [
          {
            value: 9,
            label: 'Level three 1-1-1'
          },
          {
            value: 10,
            label: 'Level three 1-1-2'
          }
        ]
      }
    ]
  },
  {
    value: 2,
    label: 'Level one 2',
    children: [
      {
        value: 5,
        label: 'Level two 2-1'
      },
      {
        value: 6,
        label: 'Level two 2-2'
      }
    ]
  },
  {
    value: 3,
    label: 'Level one 3',
    children: [
      {
        value: 7,
        label: 'Level two 3-1'
      },
      {
        value: 8,
        label: 'Level two 3-2'
      }
    ]
  }
]
const value = ref([])
</script>

树形选择输入 ​

默认单选，字段 multiple: true 控制单选，多选

请选择
{
  "value": []
}
vue
<template>
  <Input type="treeselect" v-model="value" :options="treeOptions" :multiple="true" />
</template>
<script setup lang="ts">
const treeOptions = [
  {
    value: 1,
    label: 'Level one 1',
    children: [
      {
        value: 4,
        label: 'Level two 1-1',
        children: [
          {
            value: 9,
            label: 'Level three 1-1-1'
          },
          {
            value: 10,
            label: 'Level three 1-1-2'
          }
        ]
      }
    ]
  },
  {
    value: 2,
    label: 'Level one 2',
    children: [
      {
        value: 5,
        label: 'Level two 2-1'
      },
      {
        value: 6,
        label: 'Level two 2-2'
      }
    ]
  },
  {
    value: 3,
    label: 'Level one 3',
    children: [
      {
        value: 7,
        label: 'Level two 3-1'
      },
      {
        value: 8,
        label: 'Level two 3-2'
      }
    ]
  }
]
const value = ref([])
</script>

字典选择输入 ​

请选择
{
  "value": ""
}
vue
<Input type="dict" v-model="value" code="test" />

API ​

Props ​

参数名说明类型默认值
model-value (v-model)绑定值Record<string, any> -
type类型text, number, switch, radio, checkbox, datetime, select, cascader, treeselect 等-
multiple单选，多选stringfalse
clearable是否可清空booleantrue
disabled是否禁用booleanfalse
placeholder文本输入的占位符string
code字典名string
options选项列表array[]

Options ​

名称说明类型默认值
label选项名stringundefined
value选项值string, numberundefined
disabled是否禁用选项booleanfalse
children选项 children 数组Options[]undefined

注意事项 ​

说明

组件基础属性字段样式已封装，需要扩展组件功能请参考 Element-Plus Input 文档查阅