描述

一款基于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 | 获取@数组 |

安装使用

安装

npm install -S @irises/at-input

引入

<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>

// main.ts
import '@irises/at-input/style.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;
}