颜色选择器 ​

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">主色</span>
        <div class="color-picker-demo__row">
          <div
            class="color-picker-demo__preview"
            :style="{ background: color1 }"
          />
          <div class="color-picker-demo__meta">
            <span>{{ color1 }}</span>
          </div>
          <el-color-picker v-model="color1" />
        </div>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">辅助色</span>
        <div class="color-picker-demo__row">
          <div
            class="color-picker-demo__preview"
            :style="{ background: color2 || 'var(--el-fill-color)' }"
          />
          <div class="color-picker-demo__meta">
            <span>{{ color2 || '暂未选择' }}</span>
          </div>
          <el-color-picker v-model="color2" />
        </div>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const color1 = ref('#409EFF')
const color2 = ref('')
</script>

<style scoped lang="scss">
.color-picker-demo__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.color-picker-demo__preview {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--el-border-color);
  box-shadow: inset 0 0 0 1px var(--el-bg-color);
}

.color-picker-demo__meta {
  display: grid;
  min-width: 0;

  span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--el-text-color-primary);
    word-break: break-all;
  }
}
</style>

<template>
  <el-color-picker v-model="color" show-alpha />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('rgba(19, 206, 102, 0.8)')
</script>

<template>
  <el-color-picker v-model="color" show-alpha :predefine="predefineColors" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
</script>

<template>
  <div class="demo-color-sizes">
    <el-color-picker v-model="color" size="large" />
    <el-color-picker v-model="color" />
    <el-color-picker v-model="color" size="small" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('#409EFF')
</script>

<style>
.demo-color-sizes .el-color-picker:not(:last-child) {
  margin-right: 16px;
}
</style>