介绍

输入框组件，用于配合弹出框组件和表单控件一起使用。自定义了输入框样式。

引入

import PopoutInput from 'sard-uniapp/components/popout-input/popout-input.vue'

代码演示

基础使用

使用 v-model 绑定值， click 事件监听点击事件。

vue lang="ts"

<template>
  <sar-list card>
    <sar-list-item>
      <sar-popout-input
        v-model="value"
        placeholder="请选择"
        clearable
        @clear="toast('清除')"
        @click="toast('点击了')"
        @change="onChange"
      />
    </sar-list-item>
    <sar-list-item title="设置值" hover arrow @click="value = '输入框内容'" />
  </sar-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'sard-uniapp'

const value = ref('')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue lang="js"

<template>
  <sar-list card>
    <sar-list-item>
      <sar-popout-input
        v-model="value"
        placeholder="请选择"
        clearable
        @clear="toast('清除')"
        @click="toast('点击了')"
        @change="onChange"
      />
    </sar-list-item>
    <sar-list-item title="设置值" hover arrow @click="value = '输入框内容'" />
  </sar-list>
</template>

<script setup lang="js">
import { ref } from "vue";
const value = ref("");
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

API

PopoutInputProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
model-value	输入框值	string	-
placeholder	输入框占位符内容	string	-
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
loading	加载状态	boolean	false
clearable	是否显示清空按钮	boolean	false
multiline	是否多行输入框	boolean	false
arrow 1.22+	自定义箭头图标名	string	'caret-right'
arrow-family 1.22+	自定义箭头图标字体	string	'sari'
input-props 1.22+	自定义输入框组件属性	InputProps	-

PopoutInputSlots

插槽	描述	属性
arrow 1.22+	自定义箭头	() => void
prepend 1.25.4+	自定义输入框前置内容	() => void
append 1.25.4+	自定义输入框后置内容	() => void

PopoutInputEmits

事件	描述	类型
click	点击输入框时触发，只读和禁用不触发	() => void
update:model-value	输入框值改变时触发	(value: string) => void
change 1.9.2+	输入框值改变时触发	(value: string) => void
clear	点击清除按钮时触发	() => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-popout-input-arrow-font-size: var(--sar-text-base);
  --sar-popout-input-arrow-color: var(--sar-border-color);
  --sar-popout-input-active-opacity: var(--sar-active-opacity);
  --sar-popout-input-append-gap: 8rpx;
  --sar-popout-input-loading-size: var(--sar-text-lg);
  --sar-popout-input-loading-color: var(--sar-fourth-color);
}