Github의 주소 : https://github.com/ElsonJe/Simple-ui.git
알리 벡터 아이콘 라이브러리 : https://www.iconfont.cn/
우선, 효과
둘째, 패키지
<템플릿>
<버튼 @ =의 Click "는 clickHandler ()"클래스 = "스타일을"사용 안 함 = "사용 안 함"> {{텍스트}} </ 버튼>
</ 템플릿>
<스크립트>
내보내기 기본 {
이름 : 'SP- 버튼 ' ,
데이터 () {
반환 {}
},
소품 : {
/ * 텍스트 표시 버튼 * /
텍스트 : {
유형 : 문자열
}
/ * 버튼 활성화 여부 * /
{: 장애
유형 : 부울,
기본값 : false로
} ,
/ * 버튼 모양 * /
디자인 : {
유형 : 문자열,
태만 '블록'
}
/ * 벡터 아이콘 * /
아이콘 : 문자열,
/ * 내장 된 버튼 스타일 * /
유형 : {
유형 : 문자열
기본 : '정상'
}
}
방법 : {
/ * 버튼 클릭 이벤트의 상위 구성 요소에 대한 트리거를 사용 * /
는 clickHandler () {
다음은이 $ EMIT ( '을 클릭합니다'. )
}
},
계산 : {
/ * 소품을 따라, 디스플레이 버튼 스타일 * /
스타일 : {
{) (GET
반환 [ 'SP-버튼' 은이 .design,이 본 .icon, 이 본 .Type]
}
}
}
}
.1s; </ SCRIPT>
<스타일 범위> / * 도입 벡터 아이콘 * /
@import '../../assets/icons/iconfont.css' ;
버튼 {
폭 : 100 픽셀,
높이 : 30 픽셀;
개요 : 없음 ; / * 기본 스타일의 버튼을 제거 개요 * / / * 애니메이션 * /
전환 : 국경 0 .8s;
-webkit-전환 : 0 국경 .8s,
전환 : 배경 색 0 .1s;
-webkit-전환 : 배경 - 0 컬러
라는 .Normal {
}
/ * 표준 스타일 * / 허용;
테두리 : 1 픽셀 고체 RGB ( 135, 135, 136 );
배경 - 색상 : #FFFFFF;
글꼴 - 크기 : 12 픽셀;
색상 : RGB ( 92, 90, 90 );
}
.normal : 가져가 {
커서 : 포인터;
배경 - 색상 : # F4F4F5;
}
.normal : 활성 {
색상 : # 000 ;
테두리 : 1 픽셀 고체 RGB ( 135, 135, 136 );
배경 - 색상 : # F4F4F5;
}
.normal : 장애인 {
커서 : 없습니다 -
배경 색 : RGB (241, 243, 245 );
불투명 : 0.8 ;
}
/ * 주 스타일 * /
.primary {
색상 : #FFFFFF;
배경 - 색상 : # 3a8ee6;
글꼴 - 크기 : 12 픽셀;
국경 : 없음;
}
.primary : 활성 {
배경 색 : RGB (192, 215, 250 );
색상 : RGB ( 105, 83, 233 );
국경 : 없음;
}
.primary : 가져가 {
커서 : 포인터;
배경 색 : RGB (125, 174, 248 );
}
.primary {중지
배경 색 : RGB (192, 215, 250 );
색상 : # 3a8ee6;
국경 : 없음;
커서 : 없습니다 - 허용;
}
/ * 경고 스타일 * /
.warning {
색상 : #FFFFFF;
배경 - 색상 : # CF9236;
글꼴 - 크기 : 12 픽셀;
국경 : 없음;
}
.warning : 활성 {
배경 색 : RGB (233, 202, 157 );
색상 : RGB ( 185, 115, 10 );
국경 : 없음;
}
.warning : 가져가 {
커서 : 포인터;
배경 색 : RGB (231, 177, 97 );
}
.warning : {비활성화
배경 색 : RGB (233, 202, 157 );
색상 : RGB ( 185, 115, 10 );
국경 : 없음;
커서 : 없습니다 - 허용;
}
/ * 오류 스타일 * /
에는 .error {
색상 : #FFFFFF;
배경 색 : RGB (250, 96, 96 );
글꼴 - 크기 : 12 픽셀;
국경 : 없음;
}
에는 .error : 활성 {
배경 색 : RGB (243, 181, 181 );
색상 : RGB ( 245, 60, 60 );
국경 : 없음;
}
에는 .error : 가져가 {
커서 : 포인터;
배경 색 : RGB (238, 127, 127 );
}
에는 .error : 비활성화 {
배경 색 : RGB (243, 181, 181 );
색상 : RGB ( 245, 60, 60 );
국경 : 없음;
커서 : 없습니다 - 허용;
}
/ * 성공 스타일 * /
일단 .success {
색상 : #FFFFFF;
배경 - 색상 : # 5DAF34;
글꼴 - 크기 : 12 픽셀;
국경 : 없음;
}
일단 .success : 활성 {
배경 색 : RGB (185, 218, 168 );
색상 : RGB ( 70, 153, 29 );
테두리 : 없음;
}
일단 .success : 가져가 {
커서 : 포인터;
배경 색 : RGB (129, 211, 85 );
}
일단 .success : 비활성화 {
배경 색 : RGB (185, 218, 168 );
색상 : RGB ( 70, 153, 29 );
국경 : 없음;
커서 : 없습니다 - 허용;
}
/ * 정보를 원하시면 스타일 * /
.INFO {
색상 : #FFFFFF;
배경 - 색상 : #의 A6A9AD;
글꼴 - 크기 : 12 픽셀;
국경 : 없음;
}
.INFO : 활성 {
배경 색 : RGB (212, 214, 218);
색상 : RGB ( 141, 144, 146 );
국경 : 없음;
}
.INFO : 가져가 {
커서 : 포인터;
배경 색 : RGB (176, 178, 182 );
}
.INFO : 비활성화 {
배경 색 : RGB (212, 214, 218 );
색상 : RGB ( 141, 144, 146 );
국경 : 없음;
커서 : 없습니다 - 허용;
}
/ * 方块* /
.block {
국경 - 반경 : 0 픽셀;
}
/ * 半圆* /
.oval {
국경 - 반경 : 50 픽셀;
}
/ *필렛 * /
.fillet {
테두리 - RADIUS : 5px;
}
/ * 라운드 * /
.circle {
/ * 높이와 동일한 폭 라운드 될하지만 뷰의 영상 점, 폭 5px 다중 높이보다 더 매력적인 * /
폭 : 50 픽셀 ,
높이 : 45 픽셀,
테두리 -radius : 50 % ;
}
</ 스타일>
셋째, 요약
더 많은 디자인과 색상 패턴 매칭을 작동합니다.
谦良恭卑，信诚实至；生活不易，共勉同求。