@irises/at-input

描述

一款基于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;
}