Vue3 ColorPicker Vietnamese

Demo project

You are visiting Vue3 ColorPicker Vietnamese now!

Install library

1npm install v3-colorpicker-vn

or

1yarn add v3-colorpicker-vn

How to use

in file main.ts

1import "v3-colorpicker-vn/dist/v3-colorpicker-vn.css";

in file App.vue

1<script setup lang="ts">
2  import { ref } from "vue";
3  import {
4    VuColorPicker,
5    VuColorCustom,
6    VuProgressInput,
7    VuColorPickerPick,
8    VuColorBg,
9    VuColorPickerBg
10  } from "v3-colorpicker-vn";
11
12  const progressValue = ref<number>(100);
13  const colorValue = ref<string>("#000000");
14  const colorBackground = ref<string>("linear-gradient(90deg, rgba(145, 133, 122, 1) 0%, rgba(242, 222, 204, 1) 100%)");
15</script>
16
17<template>
18  <div class="wrapper">
19    <div class="lib-item">
20      <div class="title">ColorPicker</div>
21      <VuColorPicker v-model:value="colorValue" />
22    </div>
23
24    <div class="lib-item">
25      <div class="title">ColorCustom</div>
26      <VuColorCustom v-model:value="colorValue" />
27    </div>
28
29    <div class="lib-item">
30      <div class="title">ColorBackground</div>
31      <VuColorBg v-model:value="colorBackground" />
32    </div>
33
34    <div class="lib-item">
35      <div class="title">ProgressInput</div>
36      <VuProgressInput v-model:value="progressValue" />
37      <div class="title">ColorPickerPick</div>
38      <VuColorPickerPick v-model:value="colorValue" />
39      <div class="title">
40        ColorPickerPick <br />
41        (option has more)
42      </div>
43      <VuColorPickerPick v-model:value="colorValue" :more="true" />
44      <div class="title">ColorPickerBg</div>
45      <VuColorPickerBg v-model:value="colorBackground" />
46
47      <div class="title">
48        ColorPickerBg <br />
49        (option has more)
50      </div>
51      <VuColorPickerBg v-model:value="colorBackground" :more="true" />
52    </div>
53  </div>
54
55  <div class="test-title">Color, Background display</div>
56  <div class="background">
57    <div :style="{ background: colorValue }"></div>
58    <div :style="{ background: colorBackground }"></div>
59  </div>
60
61  <div class="test-title">Code in view</div>
62  <img src="./assets/demo.png" alt="demo" width="1006px" />
63</template>

you can install it same as plugin in main.ts

1import ColorPicker from "v3-colorpicker-vn";
2
3app.use(ColorPicker);

or install some components of it

1import { ColorPicker } from "v3-colorpicker-vn";
2
3app.use(ColorPicker); // it's VuColorPicker

Screenshot

Contact

Lưu Công Quang Vũ From Vietnamese

• Email: vuluu040320@gmail.com
• Number Phone: +84898709170
• LinkTree: vuluu2k
• LinkedIn: vuluu2k