====== Vue.js 3.x LabeledTextareaForm コンポーネント ====== ===== 要求 ===== * textarea を実装するラベル付きコンポーネント * v-model 対応 * 再利用可能なコンポーネントとする。 * 指定可能な属性が異なるため、$attr をバインドするが、対応できない場合は別のコンポーネントとしてで作成する。 ===== コード =====


import LabeledForm from '/_export/code/vuejs/vue3/labeled_form?codeblock=0';
import TextareaForm   from '/_export/code/vuejs/vue3/textarea_form?codeblock=0';

const LabeledTextareaForm = {
  template: `
    
      
      
      
    
  `,
  components: {
    labeledForm: LabeledForm,
    textareaForm: TextareaForm
  },
  props: {
    value:                 { type: String },
    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 LabeledTextareaForm;

===== Props ===== ==== value ==== * type: String ==== 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 ===== ==== テーブルライクなレイアウト ====