frank-color v0.0.7

frank-color

颜色选择器

Installing

Using npm:

$ npm install frank-color

note

frank-color暴露的ColorPicker组件 弹框使用了element-plus的el-popover

演示图片

Use case

On demand

We can import components we actually need, making the project smaller than otherwise.

全局导入样式

$  import 'frank-color/dist/laiiva-color-picker.css'

Import Directly

<template>
  <color-picker v-model:color="color"></color-picker>
  <!-- 或者使用插槽的方式 -->
  <!-- <color-picker v-model:color="colors"><button>使用插槽</button></color-picker> -->
</template>
<script>
import { ColorPicker } from 'frank-color';

export default {
  components: {
    ColorPicker,
  },
  setup() {
    //纯色
    const color = ref('#194D33A8');
    //渐变色
      //const color = ref({direction:'90deg',gradient:[{color: '#ffffff', position: '0%'},{color: '#000000',position: '100%'}]})

    //color 要跟selectType值匹配，  比如 color是纯色 selectType传0，   color是渐变 selectType传1

    return {
      color
    }
  }
}
</script>

Install on Demand Globally

import { createApp } from 'vue';
import App from '@/App.vue';
import { ColorPicker, create } from 'frank-color';

const app = createApp(App);
app.use(create({
  components: [ColorPicker],
}));
app.mount('#app');

Fully import

import { createApp } from 'vue';
import App from '@/App.vue';
import VueColor from 'frank-color';

const app = createApp(App);

app.use(VueColor);
app.mount('#app');

Props