Vue.js 3.x LabeledSwitchForm コンポーネント
要求
- Checkbox タグのラベル付きコンポーネント
- v-model 対応
- 再利用可能なコンポーネントとする。
コード
- LabeledSwitchForm.js
import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0'; import SwitchForm from '/_export/code/vuejs/vue3/switch_form?codeblock=0'; const LabeledSwitchForm = { 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> <switch-form :value="value" @update:value="updateValue" :errors="errors" :control-wrapper-classes="controlWrapperClasses" :control-wrapper-styles="controlWrapperStyles" :control-classes="controlClasses" :control-styles="controlStyles" :control-error-class="controlErrorClass" :message-wrapper-classes="messageWrapperClasses" :message-wrapper-styles="messageWrapperStyles" :message-error-class="messageErrorClass" > </switch-form> </labeled-form> `, components: { labeledForm: LabeledForm, switchForm: SwitchForm }, props: { value: { type: Boolean }, errors: { type: Array, default: [] }, labelText: { type: String }, formWrapperClasses: { type: Array, default: [] }, formWrapperStyles: { type: Object, default: {} }, labelWrapperClasses: { type: Array, default: [] }, labelWrapperStyles: { type: Object, default: {} }, controlWrapperClasses: { type: Array, default: [] }, controlWrapperStyles: { type: Object, default: {} }, controlClasses: { type: Array, default: [] }, controlStyles: { type: Object, default: {} }, messageWrapperClasses: { type: Array, default: [] }, messageWrapperStyles: { type: Object, default: {} }, 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 LabeledSwitchForm;
Props
value
- type: Boolean
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
テーブルライクなレイアウト