# 組件名`cap4-color` ---- ### 引入 ```js import Cap4Color from 'cap4-pc-ui/lib/cap4-color'; import 'cap4-pc-ui/lib/cap4-color/css/cap4-color.css'; ``` ### 基礎用法 <template> <div class="demo-block" style="position:relative;"> <cap4-color v-model="color" :leftSpan="leftSpan"></cap4-color> </div> </template> <script> export default { data() { return { leftSpan: '請選擇顏色', color: '#999999' }; } }; </script> ::: demo ```html <template> <div class="demo-block" style="position:relative;"> <cap4-color v-model="color" :leftSpan="leftSpan"></cap4-color> </div> </template> <script> export default { data() { return { leftSpan: '請選擇顏色', color: '#999999' }; } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |value | 顏色 (選填)) | String | — | '' | |leftSpan | 左文本 (選填)) | String | — | | |rightSpan | 右文本 (選填)) | String | — | |