ColorPicker

基于 pickr 改造的颜色选择器。

使用

  1. <m-color-picker 
  2.   id='picker' 
  3.   save="0" 
  4.   preview="0" 
  5.   button='0' 
  6.   clear='0' 
  7.   width="300px">
  8. </m-color-picker>
  10. <script>
  11.   var picker = document.querySelector('#picker')
  12.   picker.addEventListener('change', function(evt){
  13.     console.log(evt.detail.color)
  14.   })
  15. </script>

API

Props

  1. {
  2.   button?: boolean;
  3.   preview?: boolean;
  4.   opacity?: boolean;
  5.   hue?: boolean;
  6.   hex?: boolean;
  7.   rgba?: boolean;
  8.   hsla?: boolean;
  9.   hsva?: boolean;
  10.   input?: boolean;
  11.   clear?: boolean;
  12.   save?: boolean;
  13.   cmyk?: boolean;
  14.   default?: string;
  15.   swatches?: string[];
  16.   inline?: boolean;
  17.   strings?: {
  18.       save: string;
  19.       clear: string;
  20.   };
  21.   width?: string;
  22. }

defaultProps

  1. {
  2.   button: true,
  3.   preview: true,
  4.   opacity: true,
  5.   hue: true,
  7.   hex: true,
  8.   rgba: true,
  9.   hsla: true,
  10.   hsva: false,
  11.   input: true,
  12.   clear: true,
  13.   save: true,
  14.   cmyk: false,
  16.   default: '#3365B7',
  18.   swatches: [],
  19.   inline: true,
  21.   strings: {
  22.     save: 'Save',  // 保存按钮的文字
  23.     clear: 'Clear' // 清楚按钮的文字
  24.   }
  25. }