Можно ли настроить компоненты vue?

Question

Можно ли настроить vue компоненты, которые есть у квазара? Я хочу использовать компонент выбора цвета vue из структуры квазара (этот https://quasar.dev/vue-components/color-picker), но я хотел удалить заголовок и сохранить ввод шестнадцатеричного цвета.

Я знаю, что существует версия компонента без заголовка, но эта версия также удаляет цветной ввод.

Вот изображение, которое иллюстрирует

Я хочу сохранить зеленую часть и удалить красную часть

Answer 1

Вы можете полностью скрыть заголовок и добавить пользовательский заголовок, который показывает значение текущего цвета.

<link href="https://cdn.jsdelivr.net/npm/quasar@1.8.3/dist/quasar.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.8.3/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <div class="q-pa-md">
    <div class="container">
      <div class="custom-header">{{hex}}</div>
      <q-color no-header  v-model="hex" dark class="my-picker" ></q-color>
 
    </div>
  </div>
</div>
<script>
new Vue({
  el: '#q-app',
  data () {
    return {
      hex: '#FF00FF'
    }
  }
})
</script>
<style>
.my-picker{
   width: 150px 
}

  
.container  {
  width: 180px; 
  position: relative;
}
 
.custom-header {
  text-align: center;
  background: transparent;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10000
}
  
</style>

codepen