|
|
@@ -1,6 +1,8 @@
|
|
|
-import { defineComponent, onMounted, onUnmounted } from "vue";
|
|
|
-import "@simonwep/pickr/dist/themes/nano.min.css"; // 'nano' theme
|
|
|
-import Pickr from "@simonwep/pickr";
|
|
|
+import { IconPicker } from "@/assets/icons";
|
|
|
+import iro from "@jaames/iro";
|
|
|
+import { css } from "@linaria/core";
|
|
|
+import { Input } from "ant-design-vue";
|
|
|
+import { defineComponent, onMounted } from "vue";
|
|
|
import { string } from "vue-types";
|
|
|
|
|
|
export default defineComponent({
|
|
|
@@ -11,65 +13,84 @@ export default defineComponent({
|
|
|
setup(props, { emit }) {
|
|
|
let pickr: any = null;
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- // initPicker();
|
|
|
- });
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- // pickr.destroyAndRemove();
|
|
|
- });
|
|
|
-
|
|
|
function initPicker() {
|
|
|
- pickr = Pickr.create({
|
|
|
- el: ".color-picker",
|
|
|
- container: ".color-container",
|
|
|
- theme: "nano",
|
|
|
- default: props.value,
|
|
|
- i18n: {
|
|
|
- "btn:save": "确定",
|
|
|
- },
|
|
|
- components: {
|
|
|
- preview: true,
|
|
|
- opacity: false,
|
|
|
- hue: true,
|
|
|
- interaction: {
|
|
|
- hex: false,
|
|
|
- rgba: false,
|
|
|
- input: true,
|
|
|
- save: true,
|
|
|
+ // @ts-ignore
|
|
|
+ pickr = new iro.ColorPicker("#boxPicker", {
|
|
|
+ width: 270,
|
|
|
+ boxHeight: 150,
|
|
|
+ color: props.value,
|
|
|
+ sliderSize: 16,
|
|
|
+ layout: [
|
|
|
+ {
|
|
|
+ component: iro.ui.Box,
|
|
|
},
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- pickr.on("init", () => {
|
|
|
- // console.log('Event: "init"', instance);
|
|
|
- pickr.show();
|
|
|
- });
|
|
|
-
|
|
|
- pickr.on("change", (color: any) => {
|
|
|
- // const hexa = color.toHEXA().toString();
|
|
|
- // state.colorList[state.index] = hexa;
|
|
|
- // emit("change", hexa);
|
|
|
+ {
|
|
|
+ component: iro.ui.Slider,
|
|
|
+ options: {
|
|
|
+ sliderType: "hue",
|
|
|
+ id: "hue-slider",
|
|
|
+ handleSvg: "#handle",
|
|
|
+ handleProps: { x: -3, y: -3 },
|
|
|
+ handleRadius: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: iro.ui.Slider,
|
|
|
+ options: {
|
|
|
+ sliderType: "alpha",
|
|
|
+ handleSvg: "#handle",
|
|
|
+ handleProps: { x: -3, y: -3 },
|
|
|
+ handleRadius: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
});
|
|
|
|
|
|
- pickr.on("save", (color: any) => {
|
|
|
- // pickr.hide();
|
|
|
- // const hexa = color.toHEXA().toString();
|
|
|
- // state.colorList[state.index] = hexa;
|
|
|
- // emit("change", hexa);
|
|
|
+ pickr.on("color:change", function (color: any) {
|
|
|
+ console.log(color.hex8String);
|
|
|
+ emit("change", color.hex8String);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- const show = () => {
|
|
|
- pickr.show();
|
|
|
- };
|
|
|
+ onMounted(() => {
|
|
|
+ initPicker();
|
|
|
+ });
|
|
|
+
|
|
|
return () => {
|
|
|
return (
|
|
|
- <div class="h-250px">
|
|
|
- <div class="color-picker"></div>
|
|
|
- <div class="color-container"></div>
|
|
|
+ <div class={styles}>
|
|
|
+ <svg style="display:none;">
|
|
|
+ <circle
|
|
|
+ fill="#fff"
|
|
|
+ id="handle"
|
|
|
+ cx="8"
|
|
|
+ cy="8"
|
|
|
+ r="6"
|
|
|
+ // stroke-width="1"
|
|
|
+ // stroke="#fff"
|
|
|
+ ></circle>
|
|
|
+ </svg>
|
|
|
+ <div class="ColorPicker" id="boxPicker"></div>
|
|
|
+ <div class="mt-15px flex items-center justify-between">
|
|
|
+ <Input
|
|
|
+ readonly
|
|
|
+ value="#fff"
|
|
|
+ class="mr-10px bg-dark-300 h-36px"
|
|
|
+ bordered={false}
|
|
|
+ />
|
|
|
+ <IconPicker class="text-36px bg-dark-300 rounded-2px" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
+const styles = css`
|
|
|
+ .IroBox {
|
|
|
+ border-radius: 6px !important;
|
|
|
+ }
|
|
|
+ /* .IroHandle {
|
|
|
+ box-shadow: 0 0 3px #f00;
|
|
|
+ } */
|
|
|
+`;
|
