Pixelium Design

中文

English

中文

English

Appearance

自动填充 AutoComplete ​

有提示的文本输入框。

基础使用 ​

传入 options 作为选项。传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

<template>
	<px-space direction="vertical">
		<px-auto-complete
			placeholder="Please input"
			v-model="input"
			:options="options"
		></px-auto-complete>
		<px-auto-complete
			placeholder="Please input"
			:options="options"
			default-value="test"
		></px-auto-complete>
	</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')

const options = ref<string[]>([
	'pear',
	'plum',
	'cherry',
	'blueberry',
	'raspberry',
	'blackberry',
	'lemon',
	'lime',
	'pomegranate',
	'apricot'
])
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

禁用选项 ​

options 中，选项置 disabled 为 true 可禁用选项。

<template>
	<px-auto-complete
		placeholder="Please input"
		v-model="input"
		:options="options"
	></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')

const options = ref(
	[
		'apple',
		'banana',
		'orange',
		'grape',
		'strawberry',
		'kiwi',
		'mango',
		'pineapple',
		'watermelon',
		'peach'
	].map((item, index) => {
		return {
			label: item,
			value: item,
			disabled: (index & 1) === 1
		}
	})
)
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

分组 ​

options 中，也支持传入选项组。

<template>
	<px-auto-complete
		placeholder="Please input"
		v-model="input"
		:options="options"
	></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
const options = ref([
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	},
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

远程加载 ​

设置 loading、showPopoverEmpty 属性和监听 input 事件，实现远程加载时的 UI 变化。

<template>
	<px-auto-complete
		placeholder="Please input"
		v-model="input"
		:options="options"
		:loading="loading"
		append
		@input="inputHandler"
	></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
const loading = ref(false)

const options = ref<string[]>([])

const data = [
	'pear',
	'plum',
	'cherry',
	'blueberry',
	'raspberry',
	'blackberry',
	'lemon',
	'lime',
	'pomegranate',
	'apricot'
]

const inputHandler = () => {
	options.value = []
	loading.value = true
	setTimeout(() => {
		options.value = data
		loading.value = false
	}, 6000)
}
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

追加模式 ​

选中选项后添加到输入框而不是覆盖原内容，需要设置 append 属性开启，配合传入 filter、shouldShowPopover 函数控制弹出框的选项和展示。

<template>
	<px-auto-complete
		placeholder="Please input"
		v-model="input"
		:options="options"
		:filter="filter"
		:shouldShowPopover="shouldShowPopover"
		append
	></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')

const options = ref<string[]>(['gmail.com', '163.com', 'qq.com'])

const filter = (_: string, options: string[]) => {
	return options
}
const shouldShowPopover = (value: string) => {
	return value.endsWith('@')
}
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

自定义渲染 ​

option 插槽自定义选项渲染，group-label 插槽自定义分组标签名渲染。

<template>
	<px-auto-complete placeholder="Please input" v-model="input" :options="options">
		<template #group-label="{ option }">
			{{ option.label }}
			<div
				style="margin-left: 12px; color: red; font-size: 16px"
				v-if="option.label === 'citrus fruits'"
			>
				HOT!
			</div>
		</template>
		<template #option="{ option }">
			{{ option.label }}
			<px-tag style="margin-left: 12px" v-if="option.value === 'orange'">NEW!</px-tag>
		</template>
	</px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
const options = ref([
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	},
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

更多配置 ​

AutoComplete 还拥有 Input 组件的大部分功能。

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

prefix
suffix

Composite

Status

Expose

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-auto-complete
				placeholder="Please input"
				disabled
				:options="options"
			></px-auto-complete>
			<px-auto-complete
				placeholder="Please input"
				readonly
				:options="options"
			></px-auto-complete>
			<px-auto-complete
				placeholder="Please input"
				loading
				:options="options"
			></px-auto-complete>
			<px-auto-complete
				placeholder="Please input"
				clearable
				:options="options"
			></px-auto-complete>
		</px-space>
		<h4>Shape</h4>
		<px-space>
			<px-auto-complete
				placeholder="Please input"
				shape="round"
				:options="options"
			></px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-auto-complete
				placeholder="Please input"
				size="small"
				:options="options"
			></px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
			<px-auto-complete
				placeholder="Please input"
				size="large"
				:options="options"
			></px-auto-complete>
		</px-space>
		<h4>Slot</h4>
		<px-space>
			<px-auto-complete placeholder="Please input" :options="options">
				<template #prefix>prefix</template>
				<template #suffix>suffix</template>
			</px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options">
				<template #prepend>
					<IconBolt></IconBolt>
				</template>
			</px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options">
				<template #append>
					<IconBolt></IconBolt>
				</template>
			</px-auto-complete>
		</px-space>
		<h4>Composite</h4>
		<px-space>
			<px-input-group>
				<px-input-group-label>
					<IconBolt></IconBolt>
				</px-input-group-label>
				<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
				<px-button>Confirm</px-button>
			</px-input-group>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options" status="success">
			</px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options" status="warning">
			</px-auto-complete>
			<px-auto-complete placeholder="Please input" :options="options" status="error">
			</px-auto-complete>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus</px-button>
				<px-button theme="info" @click="blurHandler">Blur</px-button>
				<px-button theme="info" @click="selectHandler">Select</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-auto-complete
				placeholder="Please input"
				:options="options"
				ref="autoCompleteRef"
			></px-auto-complete>
		</px-space>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { AutoComplete } from '@pixelium/web-vue'

// If on-demand import
// import { AutoComplete } from '@pixelium/web-vue/es'

const autoCompleteRef = ref<InstanceType<typeof AutoComplete>>(null)

const focusHandler = () => {
	autoCompleteRef.value?.focus()
}
const blurHandler = () => {
	autoCompleteRef.value?.blur()
}
const clearHandler = () => {
	autoCompleteRef.value?.clear()
}
const selectHandler = () => {
	autoCompleteRef.value?.select()
}

const options = ref<string[]>([
	'pear',
	'plum',
	'cherry',
	'blueberry',
	'raspberry',
	'blackberry',
	'lemon',
	'lime',
	'pomegranate',
	'apricot'
])
</script>

<style lang="css" scoped>
.px-auto-complete {
	width: 320px;
}
</style>

API ​

AutoCompleteProps ​

属性类型可选默认值描述版本
modelValuestring | null是自动填充输入框的值（受控模式），支持 v-model。0.0.2
defaultValuestring | null是自动填充输入框的默认值（非受控模式）。0.0.2
optionsstring是选项列表。0.0.2
placeholderstring是占位符文本。0.0.2
disabledboolean是false是否禁用。0.0.2
readonlyboolean是false是否只读。0.0.2
clearableboolean是false是否显示清除按钮。0.0.2
loadingboolean是false是否显示加载状态。0.0.2
showPopoverEmptyboolean是false是否在选项为空时展示弹出框。0.0.2
shouldShowPopover(value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean是判断输入时是否展示弹出框的函数。0.0.2
filter(keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[]是筛选选项的函数。0.0.2
appendboolean是false追加模式。0.0.2
size'medium' | 'large' | 'small'是'medium'自动填充输入框尺寸。0.0.2
shape'default' | 'round'是'default'自动填充输入框形状。0.0.2
borderRadiusNumberOrPercentage | NumberOrPercentage[]是圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。0.0.2
status'success' | 'warning' | 'error' | 'normal'是'normal'表单验证状态。0.0.2
autofocusboolean是false原生 <input> 的 autofocus 属性。0.0.2

AutoCompleteEvents ​

事件参数描述版本
inputvalue: string, e: Event自动填充输入框输入时的回调。0.0.2
update:modelValuevalue: string更新 modelValue 的回调。0.0.2
changevalue: string, e: Event | undefined输入内容变化时的回调。0.0.2
clearvalue: string点击清除文本按钮，清除内容时的回调。0.0.2
blure: FocusEvent自动填充输入框失焦时的回调。0.0.2
focuse: FocusEvent自动填充输入框聚焦时的回调。0.0.2
selectvalue: string, option: string | AutoCompleteOption, e: MouseEvent选中选项的回调。0.0.2

AutoCompleteSlots ​

插槽参数描述版本
prefix前缀内容。0.0.2
suffix后缀内容。0.0.2
optionoption: string | AutoCompleteOption选项内容。0.0.2
group-labeloption: AutoCompleteGroupOption选项组的标签名。0.0.2

AutoCompleteExpose ​

属性类型可选默认值描述版本
focus() => void否聚焦当前控件。0.0.2
blur() => void否取消聚焦当前控件。0.0.2
clear() => void否清空当前输入内容。0.0.2
select() => void否选中当前输入内容。0.0.2

AutoCompleteOption, AutoCompleteGroupOption ​

ts
export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: typeof GROUP_OPTION_TYPE
}

export interface AutoCompleteOption extends Option<string> {
	value: string
	disabled?: boolean
}

export interface AutoCompleteGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (AutoCompleteOption | string)[]
}