Настройте поле выбора, когда значение параметра больше, используя элемент пользовательского интерфейса - PullRequest
Новая
       6

Настройте поле выбора, когда значение параметра больше, используя элемент пользовательского интерфейса

1 голос
/ 15 апреля 2019

Отрегулируйте поле выбора, когда значение параметра больше, используя элемент ui

Как это возможно, пожалуйста, укажите

Не следует обрезать строку после выбора 

<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>


var Main = {
    data() {
      return {
        options: [{
          value: 'OptionFirstWithBigCharacter',
          label: 'OptionFirstWithBigCharacter'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

"OptionFirstWithBigCharacter" должен отображаться правильно

Ответы [ 2 ]

1 голос
/ 15 апреля 2019

Добавьте некоторые отступы к выбранному входу следующим образом: 

.el-select>.el-input {
      display: block;
      padding-right: 2px;
}


var Main = {
    data() {
      return {
        options: [{
          value: 'OptionFirstWithBigCharacter',
          label: 'OptionFirstWithBigCharacter'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");
.el-select>.el-input {
      display: block;
      padding-right: 8px;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>
0 голосов
/ 15 апреля 2019

Это интересный вопрос.

Очевидно, что решением будет вычислить ширину текста выбранного значения и настроить выделение на эту ширину, но это сложная задача.

Под капотом el-select использует элемент <input> для отображения выбранного элемента, а <input> не может регулировать его ширину в зависимости от его значения, поэтому нам потребуется использовать другой элемент, который может это сделать. Например, <span> - хороший выбор.

Вот что у меня есть: 

Vue.config.productionTip = false;

var Main = {
  data() {
    return {
      options: [{
        value: 'OptionFirstWithBigCharacter',
        label: 'OptionFirstWithBigCharacter'
      }, {
        value: 'Option2',
        label: 'Option2'
      }, {
        value: 'Option3',
        label: 'Option3'
      }, {
        value: 'Option4',
        label: 'Option4'
      }, {
        value: 'Option5',
        label: 'Option5'
      }],
      value: ''
    }
  },
  mounted() {
    // pass true to make input use its initial width as min-width
    this._addShadow();
  },
  methods: {
    _getElements() {
      // helper method to fetch input and its shadow span
      const input = this.$refs.resizeable.$el.querySelector('.el-input__inner');
      const span = input.previousSibling;;
      return { input, span };
    },
    _addShadow(useMinWidth = false) {
      // this method adds shadow span to input
      // we'll use this span to calculate text width
      const { input } = this._getElements();
      const span = document.createElement('span');
      span.classList.add('resizeable-shadow');
      input.parentNode.insertBefore(span, input);

      // copy font, padding and border styles from input
      const css = input.computedStyleMap();
      span.style.font = css.get('font');
      span.style.padding = css.get('padding');
      span.style.border = css.get('border');
      if (useMinWidth) {
        span.style.minWidth = `${input.getBoundingClientRect().width}px`;
      }
    },
    _adjustSize() {
      this.$nextTick(() => {
        const { input, span } = this._getElements();
        span.textContent = input.value;
        input.style.width = `${span.getBoundingClientRect().width}px`;
      });
    },
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");

span.resizeable-shadow {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: -99999px;
  top: -99999px;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
  <template>
  <el-select v-model="value" placeholder="Select"
             ref="resizeable" @change="_adjustSize">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

Код довольно прост, и я добавил несколько комментариев, поэтому не составит труда настроить его под свои нужды: переместить его в миксин, добавить поддержку множественного выбора и т. Д.

Поппер работает странно в SO-фрагменте, поэтому здесь работает jsfiddle .

...