V3-color-picker-teleport NPM

v3-color-picker

Vue3.0 原生颜色选择器，与浏览器自带几乎一样，支持 Vite2.0，可以实现将选择器添加到指定 Element，也能解决相对定位问题，npm 地址

安装

NPM

npm install v3-color-picker-teleport

或

yarn add v3-color-picker-teleport

使用（Vite 情况下同样使用）

// 全局注册组件、指令、方法
import { createApp } from "vue";
import V3ColorPicker from "v3-color-picker-teleport";
import App from "./App.vue";
const app = createApp(App);
app.use(V3ColorPicker);
app.mount("#app");
// 单个注册某个，以下三种方式均可在单个文件内使用
import { createApp } from "vue";
import { directive, colorEvent, V3ColorPicker } from "v3-color-picker-teleport";
import App from "./App.vue";
const app = createApp(App);
app.component("v3-color-picker", V3ColorPicker); // 只注册组件
app.directive("color", directive); // 只注册指令
app.config.globalProperties.colorEvent = colorEvent; // 只绑定方法
app.mount("#app");

<template>
  <div>
    <v3-color-picker v-model:value="color"></v3-color-picker>
    <div class="demo" v-color="colorOptions" :style="{backgroundColor: colorOptions.value}"></div>
    <div
      class="demo"
      @click="(event) => colorEvent(event, colorOptions)"
      :style="{backgroundColor: colorOptions.value}"
    ></div>
  </div>
</template>
<script>
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    name: "App",
    setup() {
      const color = Vue.ref("rgba(255,0,0,0.5)");
      const colorOptions = ref({
        value: "rgba(255,0,0,0.5)",
        btn: true,
        theme: "light",
        teleport: "选择器",
      });
      return { color, colorOptions };
    },
  });
</script>

<style>
  .demo {
    height: 100px;
    width: 100%;
  }
</style>

指令方式使用

<template>
  <div class="demo" v-color="colorOptions" :style="{backgroundColor: colorOptions.value}">
    指令方式使用
  </div>
</template>
<script>
  import { defineComponent, shallowRef } from "vue";

  export default defineComponent({
    name: "App",
    directives: {
      color: directive,
    },
    setup() {
      const colorOptions = ref({
        value: "rgba(255,0,0,0.5)",
        btn: true,
        theme: "light",
        teleport: "选择器",
      });
      return { colorOptions };
    },
  });
</script>
<style>
  .demo {
    height: 100px;
    width: 100%;
  }
</style>

方法方式使用

<template>
  <div class="demo" @click="onClick" :style="{backgroundColor: colorOptions.value}"></div>
</template>
<script>
  import { defineComponent, shallowRef } from "vue";
  import { colorEvent } from "v3-color-picker-teleport";

  export default defineComponent({
    name: "App",
    setup() {
      const colorOptions = ref({
        value: "rgba(255,0,0,0.5)",
        btn: true,
        theme: "light",
        teleport: "选择器",
      });
      function onClick(event) {
        colorEvent(event, colorOptions.value);
        event.preventDefault();
      }
      return { onClick };
    },
  });
</script>

组件方式使用

<template>
  <v3-color-picker v-model:value="color" btn></v3-color-picker>
  <v3-color-picker v-model:value="color" size="medium" theme="light"></v3-color-picker>
  <v3-color-picker v-model:value="color" size="small"></v3-color-picker>
  <v3-color-picker v-model:value="color" :width="300"></v3-color-picker>
</template>
<script>
  import { defineComponent, nextTick, ref, shallowRef } from "vue";
  import { V3ColorPicker } from "v3-color-picker-teleport";

  export default defineComponent({
    name: "App",
    components: {
      V3ColorPicker,
    },
    setup() {
      const color = ref("rgba(255,0,0,0.5)");
      return { color };
    },
  });
</script>

参数说明

方法使用参数

colorEvent(event, options)，event：事件对象，options：公共参数与方法参数

公共参数

属性	描述	类型	是否必填	默认值
value	初始颜色值	`string` \| `rbg` \| `hsl`	`false`	`#fff`
theme	主题	`dark` \| `light`	`false`	`dark`
height	颜色选择器区域高度	`number`	`false`	`150`
width	颜色选择器区域宽度	`number`	`false`	`233`
colors	预选颜色列表	`[string]`	`false`	`[]`
btn	是否显示按钮按钮	`boolean`	`false`	`false`
zIndex	菜单层级	`number`	`false`	`2`
teleport	插入节点位置	`element`	`false`	`body`