# 組件`cap4-text` ---- ### 引入 ```js import Cap4Text from 'cap4-pc-ui/lib/cap4-text'; import 'cap4-pc-ui/lib/cap4-text/css/cap4-text.css'; ``` ### 依賴 * 圖標依賴于 cap4字體庫 ### 基礎用法 <template> <div class="demo-block"> <cap4-text v-model="value" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" ></cap4-text> </div> </template> <script> export default { data() { return { value: '', value1: '', value2: '', leftSpan: '文本', leftSpan1: '氣溫', leftSpanWidth: 50, rightSpan: '℃', disabled: true, inputBgColor: '#f3f6fa', type: 'number' }; }, methods: { validate(str, rules) { if (str < -50 || str > 50 ) { return '氣溫值應該在-50℃到50℃之間'; } } } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-text v-model="value" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" ></cap4-text> </div> </template> <script> export default { data() { return { value: '', leftSpan: '選擇', leftSpanWidth: 50 }; } }; </script> ``` ::: ### 不可輸入狀態 <template> <div class="demo-block"> <cap4-text v-model="value1" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :disabled="disabled" :inputBgColor="inputBgColor" ></cap4-text> </div> </template> ::: demo ```html <template> <div class="demo-block"> <cap4-text v-model="value" :leftSpan="leftSpan" :leftSpanWidth="leftSpanWidth" :disabled="disabled" :inputBgColor="inputBgColor" ></cap4-text> </div> </template> <script> export default { data() { return { value: '', leftSpan: '選擇', leftSpanWidth: 50, disabled: true, inputBgColor: '#f3f6fa' }; } }; </script> ``` ::: ### 帶驗證提示 <template> <div class="demo-block"> <cap4-text v-model="value2" :leftSpan="leftSpan1" :rightSpan="rightSpan" :leftSpanWidth="leftSpanWidth" :type="type" :validate="validate" ></cap4-text> </div> </template> ::: demo ```html <template> <div class="demo-block"> <cap4-text v-model="value" :leftSpan="leftSpan" :rightSpan="rightSpan" :leftSpanWidth="leftSpanWidth" :type="type" :validate="validate" ></cap4-text> </div> </template> <script> export default { data() { return { value: '', leftSpan: '氣溫', leftSpanWidth: 50, rightSpan: '℃', type: 'number' }; }, methods: { validate(str, rules) { if (str < -50 || str > 50 ) { return '氣溫值應該在-50℃到50℃之間'; } } } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |value | 值 (必填)) | [String, Number] | — | — | |leftSpan | 左側文本 (選填)) | String | — | — | |leftSpanWidth | 左側文本寬度 (選填)) | [String, Number] | — | 100 | |rightSpan | 右邊側文本 (選填)) | String | — | — | |rightSpanWidth | 右側文本寬度 (選填)) | [String, Number] | — | 100 | |width | 文本框高度 (選填)) | [String, Number] | — | 200 | |height | 文本框高度 (選填)) | [String, Number] | — | 30 | |disabled | 不可輸入狀態 (選填)) | Boolean | — | false | |type | 類型 (選填)) | String | — | 'text' | |validate | 驗證 (選填)) | Function | — | — | |validateWidth | 驗證文本寬度 (選填)) | [Number, String] | — | — | |rules | 規則 (選填)) | Array | — | — | |inputBgColor | 文本框背景色 (選填)) | String | — | — | |hideLeftColon | 隱藏左文本冒號 (選填)) | Boolean | — | false |