mini color picker

منتقي الألوان المصغر

يقوم مكون منتقي الألوان الصغير (منتقي الألوان) باختيار الألوان من خلال لوحة الألوان ويستخدم للمشاهد المحددة من قبل المستخدم.

مميزة:

تحليل الحلول الحالية

• يحتاج منتقي الألوان إلى الانتباه إلى موضع المكونات، والعملية ليست سلسة، والتكوين معقد. سيؤدي موضعه إلى تمديد الصفحة الأصلية، مما يؤدي إلى تجربة سيئة. يتم تمييز مسافة الانزلاق بالبكسل (ثابت)، ويجب مراعاة دقة الجهاز، وهو أمر لا يفضي إلى تعدد الأطراف.
• يستخدم PapaerPen مكون شريط التمرير الأصلي لتحقيق التحديد المنزلق، والذي لا يقتصر على دقة الجهاز. ومع ذلك، فإنه يتطلب ثلاث عمليات، والتنفيذ الداخلي لاختيار تدرج اللون أمر مرهق ولا يؤثر حقًا على قيمة اللون كمكونات ثلاثة (HSV/HSB).

حل

• استخدم شريط التمرير الرسمي لتحديد درجة اللون، والعرض المتحرك لتحديد التشبع والسطوع نظرًا لأنه مكون أساسي رسمي، فإن العملية تكون سلسة.
• في إعداد المنطقة المنزلقة، بعد الحصول على العقدة الفعلية، يتم استخدام النسبة للتأثير على تغيير قيمة اللون، دون النظر في تحويل rpx.
• فيما يتعلق بعملية التشغيل، فهي تقتصر على منطقة تشغيل الهاتف المحمول، ولا يمكن استخدام Popover لسحب النافذة المنبثقة لأعلى، والتي لا تؤثر على الصفحة الأصلية وتسلط الضوء على النقاط الرئيسية.
• فيما يتعلق بمعاينة العملية، نظرًا لأن قناع النافذة المنبثقة لا يمكن تجنبه ولا يمكن معاينته في الوقت الفعلي، يتم استخدام لون شريط تمرير التدرج لتحقيق المعاينة. وفي الوقت نفسه، تم أخذ مشكلات المنطقة الأمنية لجهاز iPhone-X بعين الاعتبار.

استخدم التأثير

لقطة شاشة

عينة

قم بمعاينة التأثير في أدوات المطور => معرف مقتطف الكود: YOF4QUmO7NmW

التثبيت والاستخدام

1. احصل على المكونات

بوابة

قد يكون غير مستقر، ولكنه يحتوي على آخر تحديثات الميزات

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

انسخ مجلد المكونات/منتقي الألوان في المشروع إلى مسار المكون

npm

استقرار

npm install mini-color-picker --save

لاستخدام حزمة npm، يرجى الرجوع إلى الوثائق الرسمية لبرنامج WeChat الصغير.

2. تقديم المكونات

أضف ما يلي إلى ملف json المقابل للصفحة التي تستخدم هذا المكون:

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

إذا كنت تستخدم npm، فانقر على شريط القائمة في أدوات المطور: الأدوات --> Build 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 ;
  } ,
} ) 

قائمة الممتلكات

ملكية	يكتب	القيمة الافتراضية	مطلوب	يوضح
يعرض	منطقية	خطأ شنيع	نعم	ما إذا كان سيتم عرضه
initColor	خيط	رغب (255،0،0)	نعم	اللون الأولي، تمثيل RGB
قناع	منطقية	حقيقي	لا	ما إذا كان سيتم عرض قناع الخلفية أم لا
MaskClosable	منطقية	حقيقي	لا	هل يمكن إيقاف تشغيل قناع الخلفية من خلال النقر عليه؟
bindchangeColor	معالج الأحداث		لا	رد الاتصال بعد اختيار اللون، events.detail = {color}
bindClose	معالج الأحداث		لا	تم تشغيل الحدث بعد النقر على قناع الخلفية لإيقاف تشغيل منتقي الألوان

يطور

يلاحظ :

1. لا يوجد حاليا أي ربط ثنائي الاتجاه، أي أن قيمة اللون يتم تحديدها من قبل المستخدم بعد الحصول على القيمة الأولية، ولا ينبغي تغييرها عن طريق الإدخال الخارجي (ثم يتم فقدان معنى اختيار اللون)
2. يمكنك معاينة قيمة اللون لشريط التمرير في الوقت الفعلي أثناء عملية اللمس، وتمرير قيمة اللون إلى الصفحة بعد إيقاف اللمس لتجنب الحظر الناتج عن setData المتكرر.
3. تنسيق البيانات المستخدم للاتصال الخارجي مع المكونات هو rgb. لتجنب تقديم تنسيقات بيانات متعددة قد تؤدي إلى تكرار التعليمات البرمجية في السيناريوهات الفعلية، يمكن للمطورين التحويل عند الطلب والرد على المحتوى المقابل التالي على الحساب العام "MakerGYT". "للحصول على رمز الوظيفة المرجعية:

• rgb2hex
• rgb2hsv
• rgb2cmyk
• hex2rgb
• hsv2rgb

قضية

رخصة

معهد ماساتشوستس للتكنولوجيا © MakerGYT