@codehat/vue-color-picker

��#� �v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r� � � � �T�h�i�s� �i�s� �a� �p�u�r�e� �C�S�S� �c�o�l�o�r�-�p�i�c�k�e�r� �c�o�m�p�o�n�e�n�t� �f�o�r� �V�u�e�/�N�u�x�t� �p�r�o�j�e�c�t�.� � � � �[�!�[�N�P�M�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�n�p�m�/�v�/�@�c�o�d�e�h�a�t�/�v�u�e�-�c�s�s�-�l�o�a�d�e�r�.�s�v�g�)�]�(�h�t�t�p�s�:�/�/�w�w�w�.�n�p�m�j�s�.�c�o�m�/�p�a�c�k�a�g�e�/�@�c�o�d�e�h�a�t�/�v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r�)� �[�!�[�J�a�v�a�S�c�r�i�p�t� �S�t�y�l�e� �G�u�i�d�e�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�c�o�d�e�_�s�t�y�l�e�-�s�t�a�n�d�a�r�d�-�b�r�i�g�h�t�g�r�e�e�n�.�s�v�g�)�]�(�h�t�t�p�s�:�/�/�s�t�a�n�d�a�r�d�j�s�.�c�o�m�)� � � � �<�i�m�g� �s�r�c�=�"�.�/�p�i�c�k�e�r�.�p�n�g�"�/�>� � � � �#�#� �I�n�s�t�a�l�l�a�t�i�o�n� � � � ��bash npm i --save @codehat/vue-color-picker �� � � � �#�#� �P�r�o�p�s� �a�n�d� �o�t�h�e�r� �f�e�a�t�u�r�e�s� � � � ���v�u�e�-�c�o�l�o�r�-�p�i�c�k�e�r��� �c�o�m�e� �w�i�t�h� �o�n�e� �p�r�o�p� �selColor� �w�h�i�c�h� �c�a�n� �b�e� �u�s�e�d� �t�o� �s�e�t� �i�n�i�t�i�a�l� �c�o�l�o�r�.� �F�o�r� �d�y�n�a�m�i�c�a�l�l�y� �s�e�t� �t�h�e� �c�o�l�o�r� �u�s�e� �t�h�e� �binding� �f�e�a�t�u�r�e�.� � � � �T�h�e� �c�o�m�p�o�n�e�n�t� �emit� ���c�o�l�P�i�c�k�e�d��� �e�v�e�n�t� �w�h�i�c�h� �r�e�t�u�r�n� �t�h�e� �s�e�l�e�c�t�e�d� �c�o�l�o�r�.� �A�l�l� �w�e� �h�a�v�e� �t�o� �d�o� �i�s� �c�r�e�a�t�e� �method� �a�n�d� �r�e�c�e�i�v�e� �t�h�e� �emited� �v�a�l�u�e�.� � � � � � �#�#� �U�s�a�g�e� � � � ��javascript <template> <div class="columns section"> <div class="column"> <c-picker :selColor="col" @colPicked="changeColor" /> {{ col }} </div> <div class="column" :style="{ background: col }" > <CheckGroup/> <p> </p> </div> </div> </template> <script> import VueColorPicker from "@codehat/vue-color-picker" ; export default { name: "Gallery", data() { return { col: "", }; }, methods: { changeColor(value) { this.col = value; }, }, components: { "c-picker": VueColorPicker, }, }; </script> <style scoped> .cardContainer { position: absolute; left: 30px; top: 20px; text-align: center; } .front, .back { position: absolute; height: 100%; width: 100%; background: #ff962d; /* line-height: 300px; */ color: #03446a; /* text-align: center; */ font-size: 18px; border-radius: 5px; backface-visibility: hidden; } .back { background: #d90000; color: white; transform: rotateY(180deg); } </style> �� � �#�#� �L�i�c�e�n�s�e� � � � �M�I�T� ��� �[�m�a�n�o�j�a�p�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�m�a�n�o�j�a�p�)�