Carol UI

Appearance

input 输入框 ​

基础用法
placeholder默认 
<template>
  <div>
    <div class="row">
      <cl-input v-model="data.value1" />
      <cl-input v-model="data.value2" />
    </div>
    <div class="row">
      <cl-input v-model="data.value3" readonly />
      <cl-input v-model="data.value4" disabled />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  value1: '',
  value2: '可清空',
  value3: '只读模式',
  value4: '禁用模式'
})
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  .cl-input {
    margin-top: 12px;
  }
}
</style>
phone格式
自动控制11位且只能输入数字
<template>
  <div>
    <cl-input v-model="data.phone" type="phone" />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  phone: ''
})
</script>
0/5
限制字符长度
限制最大字符数&可选是否显示当前字符数
<template>
  <div class="row">
    <cl-input v-model="data.value" :maxlength="5" show-word-limit />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  value: ''
})
</script>
聚焦失焦
可调用组件的focus和blur实现聚焦失焦
<template>
  <div class="row">
    <div>
      <div>
        <cl-input ref="inputRef" v-model="data.value1" />
        <cl-button @click="getFocus">点击获取焦点</cl-button>
      </div>
      <div>
        <cl-input ref="input1Ref" v-model="data.value2" />
        <cl-button @click="blurFocus">点击失去焦点</cl-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
const inputRef = ref<HTMLElement | null>(null)
const input1Ref = ref<HTMLElement | null>(null)
const data = reactive({
  value1: '',
  value2: ''
})
const getFocus = () => {
  inputRef?.value?.focus()
}
const blurFocus = () => {
  input1Ref?.value?.blur()
}
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  .cl-input {
    margin-top: 12px;
  }
  .cl-button {
    margin-left: 12px;
  }
}
</style>
前缀后缀用法
prefix、suffix 是将元素插入input-wrap内部，被插入的元素没有边框，适用轻量元素若要被插入元素有边框或者插入组合元素，请使用input-group
<template>
  <div class="row">
    <cl-input v-model="form.name">
      <template #prefix>
        <cl-icon iconName="cl-icon-yonghu"></cl-icon>
      </template>
      <template #suffix>
        <cl-icon iconName="cl-icon-add"></cl-icon>
      </template>
    </cl-input>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const form = reactive({
  name: 'Carol',
  age: 18
})
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  .tips {
    display: block;
  }
  .cl-input {
    margin-top: 12px;
  }
}
</style>
密码输入框
不要密文显示直接用text，否则password
<template>
  <div class="row">
    <div>
      <cl-input v-model="form.password1" type="password" />
    </div>
    <div>
      <cl-input v-model="form.password2" type="password" :visibilityToggle="false" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const form = reactive({
  password1: 'Carol',
  password2: '11'
})
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  .cl-input {
    margin-top: 12px;
  }
}
</style>

textarea 文本域 ​

基础用法
textarea目前没有slot，即prefix、suffix
<template>
  <div class="row">
    <cl-textarea v-model="data.remark" />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  remark: ''
})
</script>

行数设置
rows: 展示几行 默认二行，当与minRows, maxRows冲突时，rows具有较低的优先级 minRows: 最小可压缩的行数，默认一行, 会控制resize和autoSize交互 maxRows: 最大可扩展的行数，会控制resize和autoSize交互
<template>
  <div>
    <cl-textarea v-model="data.value1" :rows="1" />
  </div>
  <br />
  <div>
    <cl-textarea v-model="data.value2" :minRows="2" :maxRows="2" />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  value1: '我是Carol1',
  value2: '我是Carol2'
})
</script>
0 / 100
限制字数
可以限制输入的长度&控制字符数是否显示
<template>
  <div class="row">
    <cl-textarea v-model="data.remark" :maxlength="100" show-word-limit />
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  remark: ''
})
</script>

inputgroup ​

元

至

～

～
基础用法
有slot，即prefix、suffix会有分隔符
<template>
  <cl-input-group style="width: 240px">
    <cl-input v-model="data.value1" />
    <span>元</span>
  </cl-input-group>
  <br /><br />
  <cl-input-group style="width: 240px">
    <cl-input v-model="data.value2" />
    <span>至</span>
    <cl-input-number v-model="data.value3" />
  </cl-input-group>
  <br /><br />
  <cl-input-group style="width: 240px">
    <cl-input v-model="data.value4" />
    <span style="z-index: 1; border-left-color: #fff; border-right-color: #fff">～</span>
    <cl-input-number v-model="data.value5" />
  </cl-input-group>
  <br /><br />
  <cl-input-group style="width: 240px">
    <cl-input v-model="data.value6" />
    <span style="border: none">～</span>
    <cl-input-number v-model="data.value7" />
  </cl-input-group>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const data = reactive({
  value1: '',
  value2: '',
  value3: '',
  value4: '',
  value5: '',
  value6: '',
  value7: ''
})
</script>

input props ​

名称类型默认值描述
v-modelstring--
maxlengthnumber-最大输入长度(字符数)
show-word-limitbooleanfalse是否显示输入字数统计
placeholderstring请输入输入框占位文本
clearablebooleantrue是否可清空
disabledbooleanfalse禁用
readonlybooleanfalse只读
autofocusbooleanfalse自动获取焦点
inputWidthnumber240input的宽度
sizestringmedium输入框尺寸变化

password props ​

名称类型默认值可选值描述
typestringpassword-代表是密码类型
visibilityTogglebooleantrue-是否展示显示明文icon

textarea props ​

名称类型默认值可选值描述
rowsnumber2-输入框行数
minRowsnumber1-最小行数
maxRowsnumber--最大行数
autosizebooleantrue-自适应高度,设置为false将不会自动撑开高度
resizestring-none, both, horizontal, vertical控制是否能被用户缩放
maxlengthnumber--最大输入长度(字符数)
show-word-limitbooleanfalse-是否显示输入字数统计
clearablebooleantrue-是否可清空

Slots 参数描述 ​

name描述回调参数
prefix输入框头部内容-
suffix输入框尾部内容-

Events 参数描述 ​

事件描述回调参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change仅在输入框失去焦点或用户按下回车时触发(value: string
input在 Input 值改变时触发(value: string
clear在点击由 clearable 属性生成的清空按钮时触发-

Methods 参数描述 ​

事件描述回调参数
focus使 input 获取焦点-
blur使 input 失去焦点-