<template>
  <div class="view">
    <input v-model="val" @input="doInput" />
    <button ref="btn" :style="{ backgroundColor: val }"></button>
  </div>
</template>
<script lang='js'>
import { defineComponent ,ref,onMounted,watch} from "vue";
import ColorsPicker from 'colors-picker';

export default defineComponent({
  name: "UiColor",
   props: {
    modelValue: {
      type: Object,
    },
  },
  setup(props,context) {
    let val=ref(props.modelValue||"black");
    let btn=ref(null);

    onMounted(()=>{
        ColorsPicker(btn.value, val.value,'输入颜色').then( color=> {
            val.value=color;
             context.emit("update:modelValue", color);
        });
    });

    watch(() => props.modelValue,color => {
        val.value=color;
    });

    return {
        val,
        btn,
        doInput(){
            context.emit("update:modelValue", val.value);
        }
    };
  },
});
</script>

<style lang="css" scoped>
.view {
  display: inline-block;
  position: relative;
}
.view > input {
  line-height: 26px;
  height: 26px;
  border-radius: 5px;
  outline: none;
  vertical-align: top;
}
.view > button {
  position: absolute;
  height: 20px;
  width: 20px;
  right: 3px;
  top: 3px;
  cursor: pointer;
  border-radius: 5px;
}
</style>
