输入框

在element-plus的基础上，针对业务场景做了一些功能上的增强，同时通过透传保证了原生的正常用法。

基本用法

对element-plus的原生属性做了最基本的透传，可以直接使用原生的属性

<template>
  <bc-input v-model="text" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineOptions({
  name: 'Basic',
})
const text = ref('')
</script>

Hide Source

边框设置

<template>
  <bc-input v-model="text" width="183px" class="input" />
  <bc-input v-model="text" border="bottom" width="183px" class="input" />
  <bc-input v-model="text" border="none" width="183px" class="input" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Border',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const text = ref('border-setting')
</script>

<style lang="scss" scoped>
.input:not(:last-child) {
  margin-right: 20px;
}
</style>

Hide Source

内容复制

<template>
  <bc-input v-model="text" :copy="{ size: 20, color: 'red' }" >
    <template #icon>
      <checked />
    </template>
  </bc-input>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Basic',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { Checked } from '@element-plus/icons-vue'
const text = ref('')
</script>```

Hide Source

Input属性

属性	说明	类型	可选值	默认值
defalut-value	created阶段设置，不会随输入结果改变	string	-	-
width	输入框的宽度	string/number	-	-
border	输入杠的边框	string	'all'/'bottom'/'none'	'all'
only-display	与readonly不同，将input替换成div，一般用在打印之类的地方	boolean	-	false

Source

Docs