vuejs:vue3:labeled_switch_form

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;
  • type: Boolean
  • type: Array
  • default: []
  • type: String
  • type: Array
  • default: []
  • type: Object
  • default: {}
  • type: Array
  • default: []
  • type: Object
  • default: { paddingTop: '7px' }
  • type: Array
  • default: []
  • type: Object
  • default: {}
  • type: Array
  • default: []
  • type: Object
  • default: {}
  • type: Array
  • default: []
  • type: Object
  • default: {}
  • type: String
  • default: 'has-error'
  • type: String
  • default: 'text-danger'
  • type: String
  • default: 'has-error'
  • type: String
  • default: 'text-danger'

  • vuejs/vue3/labeled_switch_form.txt
  • 最終更新: 2021/07/17 17:27
  • by admin