npm package: @irises/at-input
Description: 一款基于`vue`的支持@功能的文本输入内容
Author: irises
Latest version: 1.0.2

### 描述

一款基于`vue`的支持@功能的文本输入内容



### 功能

- @输入
- 多行/单行控制
- 禁用可用控制
- 获取当前文本内容和所@数组
- 键盘上下与回车选择选项



### 属性

| 属性           | 类型                                              | 是否必传 | 默认值    | 描述                       |
| -------------- | ------------------------------------------------- | -------- | --------- | -------------------------- |
| `queryOptions` | (value: string) => { key: any, label: string  }[] | 是       |           | 获取选项回调，支持异步     |
| `customClass`  | object                                            | 否       | {}        | 自定义样式类               |
| `placeholder`  | string                                            | 否       | ''        | 暂未实现                   |
| `error`        | boolean                                           | 否       | false     | 是否显示错误态             |
| `disabled`     | boolean                                           | 否       | false     | 是否禁用                   |
| `atColor`      | string                                            | 否       | `#1890ff` | @标签颜色                  |
| `height`       | string                                            | 否       | `80px`    | 输入框高度，多行开启时生效 |
| `wrap`         | boolean                                           | 否       | true      | 是否开启多行               |



### 方法

| 方法名      | 描述         |
| ----------- | ------------ |
| `setFocus`  | 聚焦输入框   |
| `getText`   | 获取文本内容 |
| `getAtList` | 获取@数组    |



### 安装使用

安装

```bash
npm install -S @irises/at-input
```

引入

```vue
<script setup lang="ts">
import {
    AtInput,
} from '@irises/at-input';
import {
    ref
} from 'vue';

function queryOptions (key: string) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            { key: 1, label: '星期一' },
            { key: 2, label: '星期二' },
            { key: 3, label: '星期三' },
            { key: 4, label: '星期四' },
            { key: 5, label: '12313123123'},
            { key: 6, label: 'asdasdqwe'},
        ].filter((item) => item.label.includes(key)))
      }, 500)
    })
}
const inputRef = ref();

let wrapAble = ref(true)
let isDisabled = ref(false)

function setFocus() {
  inputRef.value.setFocus()
}

function getText () {
  console.log(inputRef.value.getText())
}
function getAtList () {
  console.log(inputRef.value.getAtList())
}
</script>

<template>
  <div class="demo">
    <at-input :queryOptions="queryOptions" placeholder="请输入" :wrap="wrapAble" ref="inputRef" height="200px" :disabled="isDisabled"></at-input>
    <div style="margin-top: 16px;">
      <button @click="wrapAble = !wrapAble">{{ wrapAble ? '禁止换行' : '开启换行' }}</button>
      <button @click="isDisabled = !isDisabled">{{ isDisabled ? '启用' : '禁用' }}</button>
      <button @click="setFocus">聚焦</button>
      <button @click="getText">获取文本</button>
      <button @click="getAtList">获取@数组</button>
    </div>
  </div>
</template>
```

```typescript
// main.ts
import '@irises/at-input/style.css'
```



### 主题色

```css
:root {
    --atinput-color: #2C3E59;
    --atinput-border-color: #8EABD1;
    --atinput-border-color__hover: #1D71F0;
    --atinput-border-color__error: #CC0814;
    --atinput-border-color__disabled: #8EABD1;
    --atinput-background-color: #F9FBFF;
    --atinput-background-color__disabled: #E5EDF9;
    --atinput-font-size: 14px;
    --atinput-placeholder-color: #A3AFC2;
    --atinput-popover-boder-color: #1D71F0;
    --atinput-popover-background-color: #F9FBFF;
    --atinput-popover-item-background-color__hover: #E5EDF9;
    --atinput-tip-color: #7C8BA3;
}
```