Vue.js 3.x LabeledRadioForm コンポーネント
要求
- Radio タグのラベル付きコンポーネント
- v-model 対応
- 再利用可能なコンポーネントとする。
コード
- RadioCheckboxForm.js
import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import RadioForm from '/_export/code/vuejs/vue3/radio_form?codeblock=0'; const LabeledRadioForm = { template: ` <labeled-form :errors="errors" :label-text="labelText" :form-wrapper-classes="formWrapperClasses" :form-wrapper-styles="formWrapperStyles" :label-wrapper-classes="labelWrapperClasses" :label-wrapper-styles="labelWrapperStyles" :form-error-class="formErrorClass" :label-error-class="labelErrorClass" > <template #label v-if="!labelText"> <slot name="label"> </slot> </template> <radio-form :value="value" @update:value="updateValue" :options="options" :errors="errors" :control-wrapper-classes="controlWrapperClasses" :control-wrapper-styles="controlWrapperStyles" :control-classes="controlClasses" :control-styles="controlStyles" :option-classes="optionClasses" :option-styles="optionStyles" :control-error-class="controlErrorClass" :message-wrapper-classes="messageWrapperClasses" :message-wrapper-styles="messageWrapperStyles" :message-error-class="messageErrorClass" > </radio-form> </labeled-form> `, components: { labeledForm: LabeledForm, radioForm: RadioForm }, props: { value: { type: String }, options: { type: Array, default: [] }, errors: { type: Array, default: [] }, labelText: { type: String }, formWrapperClasses: { type: Array }, formWrapperStyles: { type: Object }, labelWrapperClasses: { type: Array, default: [] }, labelWrapperStyles: { type: Object, default: {} }, controlWrapperClasses: { type: Array, default: [] }, controlWrapperStyles: { type: Object, default: {} }, controlClasses: { type: Array }, controlStyles: { type: Object }, optionClasses: { type: Array }, optionStyles: { type: Object }, messageWrapperClasses: { type: Array }, messageWrapperStyles: { type: Object }, formErrorClass: { type: String, default: 'has-error' }, labelErrorClass: { type: String, default: 'text-danger' }, controlErrorClass: { type: String, default: 'is-invalid' }, messageErrorClass: { type: String, default: 'text-danger' }, }, setup(props, context) { function updateValue(v) { context.emit('update:value', v) } return { updateValue } } }; export default LabeledRadioForm;
Props
value
- type: String
options
- type: Array
- default: []
errors
- type: Array
- default: []
labelText
- type: String
formWrapperClasses
- type: Array
- default: []
formWrapperStyles
- type: Object
- default: {}
labelWrapperClasses
- type: Array
- default: []
labelWrapperStyles
- type: Object
- default: { paddingTop: '7px' }
controlWrapperClasses
- type: Array
- default: []
controlWrapperStyles
- type: Object
- default: {}
controlClasses
- type: Array
- default: []
controlStyles
- type: Object
- default: {}
messageWrapperClasses
- type: Array
- default: []
messageWrapperStyles
- type: Object
- default: {}
controlErrorClass
- type: String
- default: 'has-error'
messageErrorClass
- type: String
- default: 'text-danger'
formErrorClass
- type: String
- default: 'has-error'
labelErrorClass
- type: String
- default: 'text-danger'
Events
Demo
テーブルライクなレイアウト