Last active
December 6, 2015 11:07
-
-
Save zyzsdy/b9059ccffb54ef981421 to your computer and use it in GitHub Desktop.
用Vue.js实现的两个根据输入实时显示颜色的Web App。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Test</title> | |
| <script src="vue.min.js"></script> | |
| <style> | |
| body{ | |
| margin: 0; | |
| } | |
| .out{ | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .out>div{ | |
| flex: 1; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| input{ | |
| font-size: 40px; | |
| text-align: center; | |
| background: transparent; | |
| border: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="out"> | |
| <div id="s-l" style="background-color: {{ color }}"><input v-model="color" style="color: {{font_color}}"></div> | |
| <div id="s-r" style="background-color: {{ color }}"><input v-model="color" style="color: {{font_color}}"></div> | |
| </section> | |
| <script> | |
| function fontColor(color){ | |
| color = color.substring(1); | |
| switch(color.length){ | |
| case 3: return parseInt(color, 16) <= 0x7ff; | |
| case 6: return parseInt(color, 16) <= 0x7fffff; | |
| default: return false; | |
| } | |
| } | |
| function vueFactory(n_id, n_color){ | |
| return new Vue({ | |
| el: n_id, | |
| data: { | |
| color: n_color, | |
| }, | |
| computed: { | |
| font_color: function(){ | |
| return fontColor(this.color) ? "#FFFFFF" : "#000000"; | |
| } | |
| } | |
| }) | |
| } | |
| vueFactory("#s-l", "#000000"); | |
| vueFactory("#s-r", "#FFFFFF"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment