개발중/Vue.js

Common Search Box Convention

Binsoo 2021. 10. 5.
728x90
반응형

🟡 검색 박스 컴포넌트명은 searchBox 로 통일 ~!

 

import searchBox from '@/views/common/search/search12


🟡 검색 버튼 클릭시 실행하는 메소드 명은 searchClick로 통일 ~!

 

<searchBox@click:search="searchClick"/>


🟡 검색 버튼 눌렀을 시에 메소드에 검색 박스에 존재하는 값들이 잘 넘어오게 해주기 ~!

, searchClick( val ){ 

    console.log(val) 

}


🟡 변수명 뒤에 붙는 1, 2, 3 은 모두 통일 되야 안 헷갈려요~!

 

 

title1 : '품사' , 

 

labelList1 : [ 

{ label: '전체', value: '' } 

, { label: '명사', value: '100000000X' } 

, { label: '동사', value: '100100000X' }

 , { label: '사용자 지정', value: '101000000X' } ] , 

 

searchField1 : '' , searchValue1 : ''

 

 

, title2 : '사용 여부' 

, labelList2 : [ { label: '전체'   , value: '' } , { label: '사용' , value: 'Y' } , { label: '중지' , value: 'N' } ]

 , searchValue2 : ''

 

 

, title3 : '검색'

 , labelList3 : [ { label: '포함 검색'       , value: 'contain' } , { label: '정확하게 검색' , value: 'exactly' } ]

, searchField3 : 'contain'

, searchValue3 : ''

 


 

728x90
반응형

'개발중 > Vue.js' 카테고리의 다른 글

el-drawe Scrollbar 설정  (0) 2021.10.21
POMS Method Convention ☺❗  (0) 2021.10.05
vue popup 정리  (0) 2021.09.09
vue 유효성 span 알림 검사  (0) 2021.08.31
el-table column align  (0) 2021.08.30

댓글