uniapp의 공식 확장 구성 요소 uni-combox 구현: 선택만 가능하지만 직접 작성할 수는 없습니다. (입력은 필터링 및 드롭다운 목록 표시를 지원합니다.)

유니콤박스

uni-combox는 기본적으로 다음을 지원합니다.

1. 드롭다운에서 선택하세요.
2. 키워드를 입력하면 드롭다운 목록이 자동으로 필터링되어 관련 항목을 표시합니다.
3. 드롭다운 목록에 존재하지 않는 내용을 수동으로 입력할 수 있습니다.

질문:

내 요구 사항은 사용자가 직접 입력하는 것을 허용하지 않고 선택만 허용하는 것입니다. 어떤 사람들은 uni-data-select를
직접 사용하는 것이 더 좋다고 말할 수도 있지만, 이것이 입력을 지원하지 않는 경우 자동 필터링은 포함된 옵션만 표시합니다. 그래서 내가 직접 수정할 수 밖에 없습니다.京京

소스 코드 변환

1. data 추가 기능은 초기 값을 유지하는 데 사용 되며 oldVal유효하지 않은 값이 선택된 경우 백필에 사용됩니다.
2. 값이 watch없으면 초기화합니다 oldVal. 초기화 된 경우 mounted, uni-combox여러 번 캡슐화하는 경우 값을 가져오지 못할 수 있습니다.
3. 드롭다운 목록이 열릴 때마다 모든 값이 표시될 수 있다는 사실을 추가 onFocus하세요 . this.inputVal = '';(기본적으로 선택한 값은 필터 역할을 하기 때문에 드롭다운 목록에는 다른 내용이 없습니다.)
   
4. onBlur논리적인 판단을 추가해, 포커스가 상실되었을 때 드롭다운 목록에서 입력 상자의 값이 선택되지 않은 경우 로 oldVal재정의합니다.

if(!this.filterCandidates.some(s=>s===this.inputVal)){
    
     
	this.inputVal = this.oldVal;
}

참고자료

구성품명 : 유니콤박스