UNPKG

wsemi

Version:

A support package for web developer.

294 lines (257 loc) 9.89 kB
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>examples for color converter</title> <!-- @babel/polyfill已廢棄 --> <script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script> </head> <body> <div id="app"> <v-app> <v-main> <v-container style="margin:0px; padding:20px 30px;"> <div style="padding:10px 0px 20px 0px; font-size:1.4rem;">Color Converter</div> <v-row> <v-col cols="12" sm="6" md="3" > <v-text-field label="input color" hide-details v-model="c" ></v-text-field> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3" > <v-btn @click="convert" >convert</v-btn> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3" > <v-text-field label="hex color" hide-details v-model="hex" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hex8 color" hide-details v-model="hex8" ></v-text-field> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3" > <v-text-field label="rgb color" hide-details v-model="rgb" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="rgb color(percentage)" hide-details v-model="rgbp" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="rgba color" hide-details v-model="rgba" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="rgba color(percentage)" hide-details v-model="rgbap" ></v-text-field> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsl color" hide-details v-model="hsl" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsl color(percentage)" hide-details v-model="hslp" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsla color" hide-details v-model="hsla" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsla color(percentage)" hide-details v-model="hslap" ></v-text-field> </v-col> </v-row> <v-row> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsv color" hide-details v-model="hsv" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsv color(percentage)" hide-details v-model="hsvp" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsva color" hide-details v-model="hsva" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3" > <v-text-field label="hsva color(percentage)" hide-details v-model="hsvap" ></v-text-field> </v-col> </v-row> </v-container> </v-main> </v-app> </div> <script> new Vue({ el: '#app', vuetify: new Vuetify(), data: { c:'#fff', hex:'', hex8:'', rgb:'', rgbp:'', rgba:'', rgbap:'', hsv:'', hsvp:'', hsva:'', hsvap:'', hsl:'', hslp:'', hsla:'', hslap:'', }, computed:{ }, methods:{ convert:function(){ let vo=this let oc=wsemi.color vo.hex=oc.toHexString(vo.c) vo.hex8=oc.toHex8String(vo.c) vo.rgb=oc.toRgbString(vo.c) vo.rgbp=oc.toRgbPString(vo.c) vo.rgba=oc.toRgbaString(vo.c) vo.rgbap=oc.toRgbaPString(vo.c) vo.hsl=oc.toHslString(vo.c) vo.hslp=oc.toHslPString(vo.c) vo.hsla=oc.toHslaString(vo.c) vo.hslap=oc.toHslaPString(vo.c) vo.hsv=oc.toHsvString(vo.c) vo.hsvp=oc.toHsvPString(vo.c) vo.hsva=oc.toHsvaString(vo.c) vo.hsvap=oc.toHsvaPString(vo.c) }, }, }) </script> </body> </html>