# 组件`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 |