@codehat/vue-color-picker v1.0.0
��# 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
b a s h
n p m i - - s a v e @ c o d e h a t / v u e - c o l o r - p i c k e r
# # 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 s e l C o l o r 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 b i n d i n g f e a t u r e .
T h e c o m p o n e n t e m i t 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 m e t h o d a n d r e c e i v e t h e e m i t e d v a l u e .
# # U s a g e
j a v a s c r i p t
< t e m p l a t e >
< d i v c l a s s = " c o l u m n s s e c t i o n " >
< d i v c l a s s = " c o l u m n " >
< c - p i c k e r : s e l C o l o r = " c o l "
@ c o l P i c k e d = " c h a n g e C o l o r " / >
{ { c o l } }
< / d i v >
< d i v c l a s s = " c o l u m n " : s t y l e = " { b a c k g r o u n d : c o l } " >
< C h e c k G r o u p / >
< p >
< / p >
< / d i v >
< / d i v >
< / t e m p l a t e >
< s c r i p t >
i m p o r t V u e C o l o r P i c k e r f r o m " @ c o d e h a t / v u e - c o l o r - p i c k e r " ;
e x p o r t d e f a u l t {
n a m e : " G a l l e r y " ,
d a t a ( ) {
r e t u r n {
c o l : " " ,
} ;
} ,
m e t h o d s : {
c h a n g e C o l o r ( v a l u e ) {
t h i s . c o l = v a l u e ;
} ,
} ,
c o m p o n e n t s : {
" c - p i c k e r " : V u e C o l o r P i c k e r ,
} ,
} ;
< / s c r i p t >
< s t y l e s c o p e d >
. c a r d C o n t a i n e r {
p o s i t i o n : a b s o l u t e ;
l e f t : 3 0 p x ;
t o p : 2 0 p x ;
t e x t - a l i g n : c e n t e r ;
}
. f r o n t ,
. b a c k {
p o s i t i o n : a b s o l u t e ;
h e i g h t : 1 0 0 % ;
w i d t h : 1 0 0 % ;
b a c k g r o u n d : # f f 9 6 2 d ;
/ * l i n e - h e i g h t : 3 0 0 p x ; * /
c o l o r : # 0 3 4 4 6 a ;
/ * t e x t - a l i g n : c e n t e r ; * /
f o n t - s i z e : 1 8 p x ;
b o r d e r - r a d i u s : 5 p x ;
b a c k f a c e - v i s i b i l i t y : h i d d e n ;
}
. b a c k {
b a c k g r o u n d : # d 9 0 0 0 0 ;
c o l o r : w h i t e ;
t r a n s f o r m : r o t a t e Y ( 1 8 0 d e g ) ;
}
< / s t y l e >
# # 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 )
4 years ago