Vuetify —— 使用v-color-picker组件

原创于 2022-01-25 23:04:51 发布 · 803 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了一个使用Vue实现的个性化设置页面，允许用户通过颜色选择器来自定义登录页面的字体颜色。展示的颜色可通过预览区域实时查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中的个性化设置页中，设置登录页的字体颜色，需要用户自己设置其颜色
在这里插入图片描述

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row>
        <v-col
          class="d-flex justify-center"
        >
          <v-color-picker v-model="color"></v-color-picker>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
          <v-sheet
            dark
            class="pa-4"
          >
            <pre>{{ showColor }}</pre>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    type: 'hex',
    hex: '#FF00FF',
  }),

  computed: {
    color: {
      get () {
        return this[this.type]
      },
      set (v) {
        console.log(v)
        this[this.type] = v
      },
    },
    showColor () {
      if (typeof this.color === 'string') return this.color

      return JSON.stringify(Object.keys(this.color).reduce((color, key) => {
        color[key] = Number(this.color[key].toFixed(2))
        return color
      }, {}), null, 2)
    },
  },
})