Casual UI - Vue

基础使用

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-input v-model="inputValue" placeholder="预设内容" />
    </div>
    <div>
      <c-input v-model="inputValue" type="password" placeholder="密码输入框" />
    </div>
    <div>
      <c-input v-model="inputValue" rounded placeholder="圆角输入框" />
    </div>
    <div>
      <c-input v-model="inputValue" disabled placeholder="禁用态" />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-input v-model="inputValue" placeholder="超小尺寸" size="xs" />
    </div>
    <div>
      <c-input v-model="inputValue" placeholder="小尺寸" size="sm" />
    </div>
    <div>
      <c-input v-model="inputValue" placeholder="中等尺寸（默认）" />
    </div>
    <div>
      <c-input v-model="inputValue" placeholder="大尺寸" size="lg" />
    </div>
    <div>
      <c-input v-model="inputValue" placeholder="超大尺寸" size="xl" />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

可清除

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <c-input v-model="inputValue" placeholder="请输入..." clearable />
</template>
点击展开/收起代码
点击打开交互式编辑器

前置与后置

+234
@someone 
<script setup>
import { matContactPhone, matDateRange } from '@quasar/extras/material-icons/index'
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-x-lg">
    <div>
      <c-input v-model="value">
        <template #prefix>
          +234
        </template>
        <template #suffix>
          @someone
        </template>
      </c-input>
    </div>
    <div>
      <c-input v-model="value" placeholder="suffix图标" clearable>
        <template #prefix>
          <c-icon :content="matContactPhone" />
        </template>
        <template #suffix>
          <c-icon :content="matDateRange" />
        </template>
      </c-input>
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

加载态

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <div>
      <c-input v-model="value" loading placeholder="加载中..." />
    </div>
    <div>
      <c-input v-model="value" loading placeholder="加载中...">
        <template #loading>
          <c-loading-bar color="cyan" />
        </template>
      </c-input>
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

CInput API

Props
Slots
Events
modelValue
string | number
*

输入框内的值，用于默认的v-model绑定

theme
CTheme
默认值  'primary'

主题

disabled
boolean
默认值  false

是否禁用

size
CSize
默认值  'md'

尺寸

placeholder
string
默认值  ''

输入框预设文本

rounded
boolean
默认值  false

是否表现为圆角

loading
boolean
默认值  false

是否处于加载态

clearable
boolean
默认值  false

内容是否可清除

readonly
boolean
默认值  false

是否是只读状态

prefixDivider
boolean
默认值  true

是否展示前置内容与输入框之间的分割线

suffixDivider
boolean
默认值  true

是否展示后置内容与输入框之间的分割线

focused
boolean
默认值  false

是否处于聚焦态，v-model:focused双向绑定用

autoBlur
boolean
默认值  true

是否自动根据input失去焦点事件blur

type
"text" | "password"
默认值  'text'

输入框类型

customColor
boolean
默认值  false

是否使用自定义颜色状态，若设置为true，则聚焦不会触发边框颜色变更，包括背景色、边框色

validateTrigger
"change" | "blur" | "focus" | "manual"
默认值  'blur'

表单验证触发时机

clearValidateOnFocus
boolean
默认值  true

是否在聚焦时清除验证状态