Стилизация выбранного значения в Vue Выбор - PullRequest
Новая
       3

Стилизация выбранного значения в Vue Выбор

2 голосов
/ 05 марта 2020

Я использую vue выберите. В выпадающем списке есть метки (не только текст). Можно ли также иметь метку для выбранного значения? 

                            <div class="form-group row">
                                <label for="project_status_id"  class="col-sm-3 col-form-label">Projekt Status</label>
                                <div class="col-sm-9">
                                    <v-select  :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id"  v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
                                        <template v-slot:option="option" >
                                            <div v-html="option.status_label" class="mb-1">
                                            </div>
                                        </template>
                                    </v-select>
                                    <template v-if="$v.form.project_status_id.$error">
                                        <p class="text-danger" v-if="!$v.form.project_status_id.required">
                                            Projekt - Status ist erforderlich!
                                        </p>
                                    </template>
                                </div>
                            </div>

enter image description here

1 Ответ

0 голосов
/ 05 марта 2020

Предполагая, что вы хотите HTML из status_label, также предполагая, что status_label является строкой шаблона или аналогичной, затем используйте слот selected-option с содержимым слота, совпадающим с вашим опционным слотом без class присоединен.

Ключевая часть в приведенном ниже примере, как уже упоминалось, слот selected-option: 

<!-- Using OP's `option` key -->
<template v-slot:selected-option="option">
  <div v-html="option.status_label"></div>
</template>

Примером ниже является вилка Vue -Выберите пример Codepen с изменениями для ответа. 

Vue.config.productionTip = false;
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
  el: '#app',
  data: {
    options: [
      {
        name: `<span style="padding: 4px; background: green; border-radius: 0.25rem; color: white;">Foo</span>`
      },
      {
        name: `<span style="padding: 4px; background: orange; border-radius: 0.25rem; color: white;">Bar</span>`
      },
      {
        name: `<span style="padding: 4px; background: red; border-radius: 0.25rem; color: white;">Baz</span>`
      }
    ]
  }
});
body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600">

<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" label="label">
    <template v-slot:option="option" >
      <div v-html="option.name" style="padding: 2px 0;"></div>
    </template>
    <template v-slot:selected-option="option">
      <div v-html="option.name"></div>
    </template>
  </v-select>
</div>
...