Vue.js 드 롭 다운 옵션 이 있 는 입력 상자(Textbox with Dropdown)구성 요소
원래 이 구성 요소 가 비교적 흔 하 다 고 생각 했 는데 이미 많은 기 존의 예 를 들 어 직접 응용 할 수 있 을 것 이 라 고 생각 했 지만 한 바퀴 를 검색 해 보 니 비슷 한 구성 요소 들 이 너무 많은 기능 을 가지 고 있 는 것 을 발견 했다.예 를 들 어 검색,다 중 선택 등(쉽게 말 하면 너무 복잡 하 다!).그래서 스스로 간단 하고 사용 하기 쉬 운 것 을 쓰 는 것 이 좋 겠 다 고 생각 했 습 니 다.여기 서 뚱뚱 한 사장 님 께 서 제 가 곤 혹 스 러 울 때 도와 주신 것 에 감사 해 야 합 니 다.
이 UI 요 소 는 Common Bar Width App 에 사 용 됩 니 다.
등록 구성 요소
봉 인 된 구성 요소 코드 를 복사 하여 붙 여 넣 기 를 통 해 전역 구성 요 소 를 등록 합 니 다.
디자인 할 때 입력 상자 에 서로 다른 유형 이 존재 할 수 있 음 을 고려 합 니 다.예 를 들 어 텍스트 입력 상자,수치 입력 상자,백분 수 입력 상자 등 입 니 다.그래서 포 장 된 코드 에 서 는 함수
inputRule
를 통 해 입력 을 제한 합 니 다.제한 적 인 방법 은 Regex 를 이용 해 걸 러 내 는 것 이다.다른 유형 이 있 으 면inputRule
의 여과 조건 을 수정 할 수도 있다.
<script type="text/x-template" id="dropdown">
<div class="dropdown" v-if="options">
<!-- Dropdown Input -->
<input :type="type"
:disabled="disabled"
v-model="input_value"
@focus="showOptions()"
@blur="exit()"
@keyup="keyMonitor"
@input="input_value = inputRule(type)" />
...
</script>
<script>
Vue.component('dropdown', {
template: '#dropdown',
props: {
type: String,
options: Array,
disabled: Boolean,
value: String
},
...
methods: {
inputRule:function(type){
var value;
switch(type){
case 'text':
value = this.input_value.replace(/[^a-zA-Z0-9]/g,'');
break;
case 'number':
value = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,'');
break;
case 'percentage':
value = this.input_value.replace(/[^\d]/g,'');
value = value > 100 ? '100' : value;
value = value < 0 ? '0' : value;
break;
default:
console.log("no limitation");
}
return value;
},
...
</script>
호출 모듈사용자 정의 탭 호출 구성 요 소 를 추가 합 니 다.
<dropdown type = "text"
:options = "text_options"
:value = "text_value"
:disabled = "text_disabled"
@on_change_input_value = "onTextChange">
</dropdown>
데 이 터 를 전달 하 다마지막 으로 부모 구성 요소,props 에 동적 바 인 딩 데 이 터 를 연결 합 니 다.
on_change_input_value:업데이트 값
data: function () {
return {
text_value: 'ccc',
text_disabled: false,
text_options: [
{ id: 1, name: 'a' },
{ id: 2, name: 'bb' },
{ id: 3, name: 'ccc' },
{ id: 4, name: 'dddd' },
{ id: 5, name: 'eeeee' },
{ id: 6, name: 'fffff ' },
{ id: 7, name: 'gggggg' },
{ id: 8, name: 'hhhhhhh' },
{ id: 9, name: 'iiiiiiii' },
],
...
}
},
...
methods: {
onTextChange: function (new_text_value) {
this.text_value = new_text_value;
},
...
},
소스 코드GitHub
Vue.js 드 롭 다운 옵션 이 있 는 입력 상자(Textbox with Dropdown)구성 요소 에 대한 이 글 은 여기까지 소개 되 었 습 니 다.Vue.js 드 롭 다운 옵션 이 있 는 입력 상자 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.