小白教程
所有教程
关于
Search
172.69.58.42
172.69.58.42
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“模板:ColorPicker”的源代码
本页内容
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
== Color Picker == 这个color picker使用[https://github.com/xiaokaike/vue-color xiaokaike/vue-color] 实现。可以拖动和输入改变颜色值, 可以查看对应的十六进制颜色,RGB,RGBA, HSLA颜色。 <html> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-color/2.8.1/vue-color.min.js" type="application/javascript"></script> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script> <div id="app"> <h1 :style="{color:colors.hex}">Hex:{{colors.hex}}</h1> <h1 :style="{color:rgba}">RGBA:{{rgba}}</h1> <h1 :style="{color:rgb}">RGB:{{rgb}}</h1> <picker @input="updateValue" v-model="colors" /> </div> <div id="app2"> <h1 :style="{color:colors.hex}">Hex:{{colors.hex}}</h1> <h1 :style="{color:rgba}">RGBA:{{rgba}}</h1> <h1 :style="{color:rgb}">RGB:{{rgb}}</h1> <photoshop-picker @input="updateValue" v-model="colors" /> </div> <script type="text/javascript" charset="utf-8"> var colors = { hex: '#0000ff', } var photoshop = VueColor.Photoshop; var sketch = VueColor.Sketch; new Vue({ el: '#app', components: { 'picker': sketch, }, data () { return { colors: colors, rgba:"rgba(0,0,255,1)", rgb:"rgb(0,0,255)", } }, methods: { updateValue (value) { this.colors = value this.rgba = 'rgba('+value.rgba.r+','+value.rgba.g+','+value.rgba.b+','+value.rgba.a+')'; this.rgb = 'rgb('+value.rgba.r+','+value.rgba.g+','+value.rgba.b+')'; console.log(this.rgba); } }, }) </script> <script type="text/javascript" charset="utf-8"> var colors2 = { hex: '#0000ff', } var photoshop = VueColor.Photoshop; new Vue({ el: '#app2', components: { 'photoshop-picker':photoshop, }, data () { return { colors: colors, rgba:"rgba(0,0,255,1)", rgb:"rgb(0,0,255)", } }, methods: { updateValue (value) { console.log(value); this.colors = value this.rgba = 'rgba('+value.rgba.r+','+value.rgba.g+','+value.rgba.b+','+value.rgba.a+')'; this.rgb = 'rgb('+value.rgba.r+','+value.rgba.g+','+value.rgba.b+')'; console.log(this.rgba); } }, }) </script> </html>
返回至“
模板:ColorPicker
”。