ichiColor x Vue.js

ichiColor 与 Vue.js 结合完成色彩控件的示例 github.com/nullice/ichiColor

by nullice

HTML

<script src="https://nullice.github.io/ichiColor/demo/jssave/ichi-color.js"></script>
<div id="app">
  <sapn v-bind:style="{color:ichiColor.hex}">■</sapn>
  <br><span>RGB</span>
  <input v-model="ichiColor.rgb" type="text">
  <br><span>Hex</span>
  <input v-model="ichiColor.hex" type="text">
  <br><span>Hue</span>
  <input v-model="ichiColor.hsl.h" max="360" type="range">
</div>


<script>
  var vueApp = new Vue({
    el: '#app',
    data: {
      ichiColor: new IchiColor("#f00"),
    }
  })

</script>

CSS

/* 外观 CSS 样式与逻辑代码无关，可无视。 */

input {
  outline: none;
  -webkit-user-select: none;
  border: none;
  border-bottom: 1px solid #adadad;
  color: #292929;
  background: rgba(255, 255, 255, 0);
  padding: 4px 0px;
  margin: 4px 6px;
  width: 100px;
  min-width: 10px;
  font-family: "Microsoft YaHei", "Microsoft JhengHei", PingFang, "Hiragino Sans GB", "WenQuanYi Micro Hei", メイリオ, Meiryo, Helvetica, Arial, sans-serif;
  font-size: 13px;
}

body {
  padding: 64px 80px;
}

span {
  font-family: "Microsoft YaHei", "Microsoft JhengHei", PingFang, "Hiragino Sans GB", "WenQuanYi Micro Hei", メイリオ, Meiryo, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #292929;
}