mini color picker 다운로드 - mini color picker 소스 코드 다운로드

mini color picker

AI 소스 코드

1.0.0

다운로드

미니 색상 선택기

애플릿 색상 선택기(color picker) 구성 요소는 색상 팔레트를 통해 색상을 선택하고 사용자 정의 장면에 사용됩니다.

특성:

기존 솔루션 분석

We-color-picker는 구성 요소 위치 지정에 주의를 기울여야 하며 작업이 원활하지 않고 원활하지 않으며 구성이 복잡합니다. 위치 지정으로 인해 원본 페이지가 늘어나서 사용 경험이 저하됩니다. 슬라이딩 거리가 픽셀(고정)로 구분되며, 장치 해상도를 고려해야 하는데 이는 멀티엔드에 도움이 되지 않습니다.
PapaerPen은 원래 슬라이더 구성 요소를 사용하여 장치 해상도에 제한되지 않는 슬라이딩 선택을 실현합니다. 그러나 세 가지 작업이 필요하며 색상 선택의 내부 구현이 번거롭습니다. 이는 세 가지 구성 요소(HSV/HSB)로서 색상 값에 실제로 영향을 미치지 않습니다.

해결책

색상을 선택하려면 공식 슬라이더를 사용하고 채도와 밝기를 선택하려면 이동 가능한 뷰를 사용하십시오. 공식 기본 구성 요소이므로 작동이 원활합니다.
슬라이딩 영역 설정에서는 실제 노드를 얻은 후 rpx 변환을 고려하지 않고 비율을 사용하여 색상 값 변경에 영향을 줍니다.
작업 과정상 휴대폰 작업 영역으로 제한되어 있으며 Popover를 사용할 수 없습니다. 하단을 사용하여 팝업 창을 끌어오면 원본 페이지에 영향을 주지 않고 핵심 사항이 강조됩니다.
작업 미리보기에서는 실시간 미리보기에서는 팝업창 마스크를 불가피하게 사용할 수 없으므로 색상 슬라이더의 색상을 사용하여 미리보기를 구현합니다. 동시에 아이폰-x의 보안 영역 문제도 고려된다.

사용 효과

스크린샷

견본

개발자 도구에서 효과 미리보기 => 코드 조각 ID: YOF4QUmO7NmW

설치 및 사용

1. 구성 요소 가져오기

자식

불안정할 수 있지만 최신 기능 업데이트가 포함되어 있습니다.

git clone https://github.com/MakerGYT/mini-color-picker.git

프로젝트의 Components/color-picker 폴더를 컴포넌트 경로에 복사하세요.

npm

안정화하다

npm install mini-color-picker --save

npm 패키지를 사용하려면 WeChat 애플릿 공식 문서를 참조하세요.

2. 구성 요소 소개

이 구성 요소를 사용하여 페이지에 해당하는 json 파일을 추가합니다.

{
  "usingComponents" : {
    "color-picker" : " /components/color-picker/color-picker " 
  }
}

npm을 사용하는 경우 개발자 도구에서 메뉴 표시줄을 클릭합니다. 도구 -> npm 빌드 "옵션을 선택합니다(데모는 빌드 후의 결과입니다).

{
  "usingComponents" : {
    "color-picker" : " mini-color-picker/color-picker " 
  }
}

3. 컴포넌트 사용

참고자료/페이지

 <!-- index.wxml -->
< view style =" background:{{rgb}};width:100px;height:24px; " bindtap =" toPick " > </ view >
< color-picker bindchangeColor =" pickColor " initColor =" {{rgb}} " show =" {{pick}} " />

 Page ( {
  data : {
    rgb : 'rgb(0,154,97)' , //初始值
    pick : false
  } ,
  // 显示取色器
  toPick : function ( ) {
    this . setData ( {
      pick : true
    } )
  } ,
  //取色结果回调
  pickColor ( e ) {
    let rgb = e . detail . color ;
  } ,
} )

부동산 목록

재산	유형	기본값	필수의	설명하다
보여주다	부울	거짓	예	표시 여부
초기화색상	끈	RGB(255,0,0)	예	초기 색상, RGB 표현
마스크	부울	진실	아니요	배경 마스크 표시 여부
마스크닫을 수 있음	부울	진실	아니요	배경 마스크를 클릭하면 끌 수 있나요?
바인드체인지색상	이벤트 핸들러		아니요	색상 선택 후 콜백, event.detail = {color}
묶다닫다	이벤트 핸들러		아니요	색상 선택기를 끄기 위해 배경 마스크를 클릭한 후 트리거되는 이벤트

개발하다

알아채다 :

현재 양방향 바인딩이 없습니다. 즉, 초기 값을 얻은 후 사용자가 색상 값을 선택하고 외부 입력에 의해 변경되어서는 안 됩니다(그러면 색상 선택의 의미가 사라집니다).
터치가 진행되는 동안 슬라이더의 색상 값을 실시간으로 미리 볼 수 있으며, 잦은 setData로 인한 차단을 방지하기 위해 터치를 중지한 후 색상 값을 페이지에 전달할 수 있습니다.
구성 요소와의 외부 통신에 사용되는 데이터 형식은 rgb입니다. 실제 시나리오에서 코드 중복으로 이어질 수 있는 여러 데이터 형식의 도입을 방지하기 위해 개발자는 요청 시 변환하고 공개 계정 "MakerGYT"에서 다음 해당 콘텐츠에 응답할 수 있습니다. " 참조 기능 코드를 얻으려면: