vue自定义渐变颜色范围插件效果代码-html代码-BFW代码库

vue自定义渐变颜色范围插件效果代码

代码语言：html

所属分类：其他

代码描述：vue自定义渐变颜色范围插件效果代码，通过自定义vue颜色插件实现拖动滑竿实现颜色值之间的渐变范围多段输出。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Work+Sans:300");
    :root {
      --fg: #fff;
      --bg: #343338;
    }
    
    [v-cloak] {
      display: none;
    }
    
    .tools {
      flex: none;
      padding: 2rem;
      color: #fff;
    }
    .tools div {
      display: flex;
      position: relative;
    }
    .tools div + div {
      margin-top: 0.5em;
    }
    .tools .steps {
      position: absolute;
      top: 50%;
      left: 15vh;
      transform: translate(25%, -50%);
      padding: 0;
      margin: 0;
    }
    
    .colors {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 0.85em;
      height: 100vh;
      overflow: auto;
    }
    .colors .color {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 2rem;
      transition: 300ms linear;
    }
    
    .vertical-range {
      display: flex;
      align-items: center;
      width: 30vh;
      height: 30vh;
      transform: rotate(-90deg);
    }
    
    input {
      margin: 0;
      padding: 0 0.5em;
      font-size: inherit;
      font-family: inherit;
      border: none;
      width: 7em;
      outline: none;
      border-radius: 0 1em 1em 0;
      background: var(--fg);
      color: var(--bg);
      flex: 1;
    }
    input[type=color] {
      padding: 0;
      width: 2em;
      height: 2em;
      border-radius: 1em 0 0 1em;
    }
    input[type=color]::-moz-color-swatch {
      border: none;
      border-radius: 1em;
      transform: scale(0.75);
    }
    input[type=color]::-webkit-color-swatch {
      border: none;
      border-radius: 1em;
    }
    input[type=color]::-webkit-color-swatch-wrapper {
      padding: 0.25em;
      border-ra.........完整代码请登录后点击上方下载按钮下载查看