개요

Vue.js 개발 시 자주 사용하는 Vue-multiselect 선택 상자의 라이브러리
기본 상태로 사용하면

이렇게 영어로 자리 표시자 등을 표준적으로 설정했다.
propsn에서 값을 설정하면 변경할 수 있기 때문에 문제가 없지만 여러 곳에서 사용하면 그 설정을 모두 설정하는 것이 번거롭다.그리고 때로는 잊어버리기도 하고...
그래서 저는 제작 초기에 라이브러리의 디스플레이 등 구성 요소를 설정하면 된다고 생각합니다.
실제 설치 시 필기.

환경

Vue.js 2.6.10

Vue-multiselect 2.1.4

라이브러리 배포

다음 명령으로 설치 가능

npm install vue-multiselect --save

사용법이 이런 느낌이에요.

<template>
  <div id="app">
    <h1>Vue-multiselect</h1>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";

export default {
  name: "app",
  components: {
    Multiselect
  },
  data() {
    return {
      value: undefined,
      options: ["data1", "data2", "data3"]
    };
  }
};
</script>

<style>
</style>

이대로 가면 최초의 이미지처럼 자리 표시자 같은 게 영어로 나와요.
Props로 변경할 수 있지만 사용하는 곳에서 모두 설정하는 것은 번거롭습니다...

태그 설정 유니버설 (어셈블리)

다음 구성 요소를 만들어서 응용 프로그램에서 사용하면 됩니다.
customSelect.vue

<template>
  <div>
    <multiselect
      :options="options"
      v-model="selected"
      :multiple="multiple"
      :disabled="disabled"
      :placeholder="_settings.placeholder"
      :selectLabel="_settings.selectLabel"
      :deselectLabel="_settings.deselectLabel"
      :selectedLabel="_settings.selectedLabel"
      @select="select"
      @remove="remove"
    >
      <template slot="noResult">
        <span>{{ _settings.noDataLabel }}</span>
      </template>
      <template slot="noOptions">
        <span>{{ _settings.noDataLabel }}</span>
      </template>
    </multiselect>
  </div>
</template>

<script>
// Library import
import multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";
const defaultSettings = {
  placeholder: "",
  selectLabel: "",
  deselectLabel: "",
  selectedLabel: "",
  noDataLabel: "対象データがありません"
};

export default {
  props: {
    value: {
      type: null
    },
    options: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Object,
      default: undefined
    }
  },
  components: {
    multiselect
  },
  data() {
    return {
      _settings: undefined
    };
  },
  created() {
    this._settings = Object.assign({}, defaultSettings, this.settings);
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    select(selectedOption, id) {
      this.$emit("select", selectedOption, id);
    },
    remove(selectedOption, id) {
      this.$emit("remove", selectedOption, id);
    }
  }
};
</script>

<style>
</style>

하면, 만약, 만약...

자리 표시자의 탭 등은 구성 요소의 설정입니다.
이렇게 되면 프로필에서 설정을 전달함으로써
호출된 곳에 따라 자리 표시자의 라벨을 바꿀 수도 있다.

총결산

부품 어셈블리화를 사용하는 것은 Vue입니다.js의 설치는 비교적 기본적일 수 있습니다
나는 반드시 사용하는 장면이 나타날 것이라고 생각하기 때문에 손실이 없다는 것을 기억해라.
또한 이 프로그램 라이브러리Vue-multiselect는 사용이 편리하고 기능이 풍부하여 추천할 만하다.