60 lines
3.0 KiB
HTML
60 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Aurora Admin · ColorPicker（普通 H5）</title>
|
||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||
<link rel="stylesheet" href="ColorPicker.css" />
|
||
<style>body{margin:0;padding:24px;background:#F5F7FA;} .aa-panel{background:#fff;border:1px solid #E8ECF1;border-radius:8px;padding:16px;width:240px;}</style>
|
||
</head>
|
||
<body>
|
||
<div class="aa-panel">
|
||
<div class="aa-colorpicker" id="app"></div>
|
||
</div>
|
||
|
||
<script>
|
||
var PRESETS = ['#2F54EB','#1D39C4','#10239E','#F5222D','#FA8C16','#52C41A','#13C2C2','#722ED1',
|
||
'#EB2F96','#FAAD14','#A0D911','#1890FF','#2F54EB','#000000','#595959','#8C8C8C'];
|
||
var state = { hex: '#2F54EB', alpha: 1 };
|
||
|
||
function rgba(hex, a) {
|
||
var n = parseInt(hex.slice(1), 16);
|
||
return 'rgba(' + ((n>>16)&255) + ',' + ((n>>8)&255) + ',' + (n&255) + ',' + a + ')';
|
||
}
|
||
function render() {
|
||
var root = document.getElementById('app');
|
||
var swatches = PRESETS.map(function (c) {
|
||
return '<div class="aa-colorpicker-swatch ' + (c.toLowerCase() === state.hex.toLowerCase() ? 'is-active' : '') + '" style="background:' + c + '" data-hex="' + c + '"></div>';
|
||
}).join('');
|
||
root.innerHTML =
|
||
'<div class="aa-colorpicker-presets">' + swatches + '</div>' +
|
||
'<div class="aa-colorpicker-row">' +
|
||
'<div class="aa-colorpicker-preview" style="background:' + rgba(state.hex, state.alpha) + '"></div>' +
|
||
'<input type="color" class="aa-colorpicker-native" id="native" value="' + state.hex + '" />' +
|
||
'<input class="aa-colorpicker-hex" id="hex" value="' + state.hex.toUpperCase() + '" maxlength="7" />' +
|
||
'</div>' +
|
||
'<div class="aa-colorpicker-alpha">透明度' +
|
||
'<input type="range" id="alpha" min="0" max="100" value="' + Math.round(state.alpha*100) + '" />' +
|
||
'<span id="alval">' + Math.round(state.alpha*100) + '%</span>' +
|
||
'</div>';
|
||
|
||
root.querySelectorAll('.aa-colorpicker-swatch').forEach(function (el) {
|
||
el.addEventListener('click', function () { state.hex = el.dataset.hex; render(); });
|
||
});
|
||
document.getElementById('native').addEventListener('input', function (e) { state.hex = e.target.value; render(); });
|
||
document.getElementById('hex').addEventListener('input', function (e) {
|
||
var v = e.target.value;
|
||
if (/^#[0-9a-fA-F]{6}$/.test(v)) { state.hex = v; document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha); }
|
||
});
|
||
document.getElementById('alpha').addEventListener('input', function (e) {
|
||
state.alpha = e.target.value / 100;
|
||
document.getElementById('alval').textContent = e.target.value + '%';
|
||
document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha);
|
||
});
|
||
}
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|