Color颜色选择器
... 2021-8-5 Less than 1 minute
# Color颜色选择器
# 基础用法
通过将type属性的值指定为color
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Expand Copy Copy
# 默认值
value属性可以提供一个初始化的默认值
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
value:'rgba(71, 46, 46, 1)'
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 禁用状态
通过disabled属性指定是否禁用
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
disabled:true
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy Copy
# 颜色格式
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
colorFormat:"hex",
showAlpha:false
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 预定义颜色
<avue-form :option="option"></avue-form>
<script>
export default{
data() {
return {
option: {
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
predefine: [
'#ff4500',
'#ff8c00',
'#ffd700'
]
}
]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Expand Copy Copy