mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 09:21:25 +08:00
71e5f5976c
* feat:add color-picker component * fix:update pickr version * style : fix style issue * feat:add disabled props * style:fix style issues * feat:add config and format props * style:fix code style issues * feat:add i18n * feat:add type * feat:add opacity and hue props * feat:add test * feat(color-picker): add tests
120 lines
3.4 KiB
Vue
120 lines
3.4 KiB
Vue
<template>
|
|
<a-config-provider :locale="locale">
|
|
<div>
|
|
<a-radio-group :value="locale" @change="changeLocale">
|
|
<a-radio-button key="en" :value="enUS">
|
|
English
|
|
</a-radio-button>
|
|
<a-radio-button key="cn" :value="zhCN">
|
|
中文
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<div><h4>v-model: <input v-model="color" type="text"></h4><a-color-picker v-model="color" style="width:130px" @show="changeHandler" /></div>
|
|
<div><h4>v-model:{{ color }}</h4><a-color-picker v-model="color" style="width:130px" @show="changeHandler" /></div>
|
|
<div><h4>备选颜色</h4><a-color-picker :config="config1" /></div>
|
|
<div><h4>多种输入格式</h4><a-color-picker :config="config2" :get-popup-container="node=>node.parentNode" /></div>
|
|
<div>
|
|
<button @click="config2.components.preview = !config2.components.preview">
|
|
修改config
|
|
</button>
|
|
</div>
|
|
<div><h4>多种尺寸</h4><a-color-picker size="large" /></div>
|
|
<div><a-color-picker size="small" /></div>
|
|
<div><h4>切换禁用</h4><a-color-picker :disabled="disabled" /></div>
|
|
<div>
|
|
<button @click="disabled = !disabled">
|
|
切换
|
|
</button>
|
|
</div>
|
|
<div><h4>切换格式 [color:{{ color2 }}]</h4><a-color-picker v-model="color2" :locale="zhCN" :format="format" /></div>
|
|
<div>
|
|
<button @click="format = 'HEX'">
|
|
HEX
|
|
</button>
|
|
<button @click="format = 'RGBA'">
|
|
RGBA
|
|
</button>
|
|
<button @click="format = 'HSVA'">
|
|
HSVA
|
|
</button>
|
|
<button @click="format = 'HSLA'">
|
|
HSLA
|
|
</button>
|
|
<button @click="format = 'CMYK'">
|
|
CMYK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</a-config-provider>
|
|
</template>
|
|
|
|
<script>
|
|
import enUS from 'ant-design-vue/../components/locale/en_US';
|
|
import zhCN from 'ant-design-vue/../components/locale/zh_CN';
|
|
export default {
|
|
name: 'Demo',
|
|
data () {
|
|
return {
|
|
color:'#ccc',
|
|
color2:'#ccc',
|
|
disabled:false,
|
|
format:'',
|
|
locale: enUS,
|
|
enUS,
|
|
zhCN,
|
|
config1:{
|
|
swatches: [
|
|
'rgba(244, 67, 54, 1)',
|
|
'rgba(233, 30, 99, 0.95)',
|
|
'rgba(156, 39, 176, 0.9)',
|
|
'rgba(103, 58, 183, 0.85)',
|
|
'rgba(63, 81, 181, 0.8)',
|
|
'rgba(33, 150, 243, 0.75)',
|
|
'rgba(3, 169, 244, 0.7)',
|
|
'rgba(0, 188, 212, 0.7)',
|
|
'rgba(0, 150, 136, 0.75)',
|
|
'rgba(76, 175, 80, 0.8)',
|
|
'rgba(139, 195, 74, 0.85)',
|
|
'rgba(205, 220, 57, 0.9)',
|
|
'rgba(255, 235, 59, 0.95)',
|
|
'rgba(255, 193, 7, 1)',
|
|
],
|
|
},
|
|
config2:{
|
|
components: {
|
|
// Main components
|
|
preview: true,
|
|
opacity: true,
|
|
hue: true,
|
|
interaction: {
|
|
hex: true,
|
|
rgba: true,
|
|
hsla: true,
|
|
hsva: true,
|
|
cmyk: true,
|
|
input: true,
|
|
clear: true,
|
|
save: true,
|
|
},
|
|
strings: {
|
|
save: 'Save',
|
|
clear: 'Clear',
|
|
cancel: 'Cancel',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
methods:{
|
|
changeHandler(...arg){
|
|
arg;
|
|
// console.log(arg);
|
|
},
|
|
changeLocale(e) {
|
|
const localeValue = e.target.value;
|
|
this.locale = localeValue;
|
|
},
|
|
},
|
|
};
|
|
</script>
|