-
Notifications
You must be signed in to change notification settings - Fork 342
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(color-picker): color-picker component * feat(color-picker): color-picker component * style(color-picker): 修复lint问题 * fix(color-picker): 使用抽离后的const文件, bem问题修复, 文件路径问题修复, demo文档修复 * test(color-picker): 更新color-picker test 文件 * chore: update common Co-authored-by: Uyarn <uyarnchen@gmail.com>
- Loading branch information
Showing
61 changed files
with
9,422 additions
and
890 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <div class="item"> | ||
| <h5>默认（单色 + 线性渐变）</h5> | ||
| <t-color-picker v-model="color1" format="CSS" /> | ||
| </div> | ||
| <div class="item"> | ||
| <h5>仅单色模式</h5> | ||
| <t-color-picker v-model="color2" format="CSS" :color-modes="['monochrome']" /> | ||
| </div> | ||
| <div style="width: 100%"></div> | ||
| <div class="item"> | ||
| <h5>仅线性渐变模式</h5> | ||
| <t-color-picker v-model="color3" format="CSS" :color-modes="['linear-gradient']" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color1: 'red', | ||
| color2: '#0052d9', | ||
| color3: 'linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .item { | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| margin-right: 20px; | ||
| } | ||
| .item h5 { | ||
| font-weight: normal; | ||
| margin-bottom: 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <t-color-picker-panel v-model="color" format="RGBA" :enable-alpha="true" @change="handleChange" /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: 'red', | ||
| }; | ||
| }, | ||
| methods: { | ||
| handleChange(value) { | ||
| console.log(value); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <t-color-picker-panel | ||
| v-model="color" | ||
| @change="handleChange" | ||
| @palette-bar-change="handlePaletteChange" | ||
| @recent-colors-change="handleRecentColorsChange" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: '#0052d9', | ||
| }; | ||
| }, | ||
| methods: { | ||
| handleChange(value, context) { | ||
| console.log(value, context); | ||
| }, | ||
| handlePaletteChange(context) { | ||
| console.log('色相面板改变', context); | ||
| }, | ||
| handleRecentColorsChange(value) { | ||
| console.log('最近使用颜色改变', value); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <div> | ||
| <h6>预设最近使用色</h6> | ||
| <t-color-picker-panel | ||
| v-model="color" | ||
| :recent-colors="[ | ||
| 'red', | ||
| 'green', | ||
| 'yellow', | ||
| 'blue', | ||
| 'purple', | ||
| 'linear-gradient(to right, #fa709a 0%, #fee140 100%)', | ||
| 'linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)', | ||
| 'linear-gradient(120deg, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)', | ||
| ]" | ||
| /> | ||
| </div> | ||
| <div> | ||
| <h6>完全不显示最近使用色</h6> | ||
| <t-color-picker-panel v-model="color" :recent-colors="null" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: 'red', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
| <style scoped> | ||
| .tdesign-demo-block-row { | ||
| align-items: flex-start; | ||
| } | ||
| h6 { | ||
| margin-bottom: 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <t-color-picker v-model="color" disabled /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: 'red', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <t-color-picker-panel v-model="color" disabled /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: '#0052d9', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <div> | ||
| <h6>自定义系统色</h6> | ||
| <t-color-picker-panel v-model="color" :swatch-colors="systemColors" /> | ||
| </div> | ||
| <div> | ||
| <h6>完全不显示系统色</h6> | ||
| <t-color-picker-panel v-model="color" :swatch-colors="null" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: '#0052d9', | ||
| systemColors: ['red', 'green', 'yellow', 'blue', 'purple'], | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .tdesign-demo-block-row { | ||
| align-items: flex-start; | ||
| } | ||
| h6 { | ||
| margin-bottom: 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div class="tdesign-demo-block-row"> | ||
| <t-color-picker v-model="color" /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| color: '#0052d9', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| [ | ||
|
|
||
| { | ||
| "name": "enableAlpha", | ||
| "type": "Boolean", | ||
| "defaultValue": false, | ||
| "options": [] | ||
| }, | ||
|
|
||
| { | ||
| "name": "disabled", | ||
| "type": "Boolean", | ||
| "defaultValue": false, | ||
| "options": [] | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.