是否可以自定义 vue 组件？

Question

是否可以自定义quasar自带的vue组件？我想使用 quasar 框架中的颜色选择器 vue 组件（这个 https://quasar.dev/vue-components/color-picker），但我想删除 header 并保留十六进制颜色输入。

我知道组件有一个 "no header" 版本，但那个版本也删除了颜色输入。

Here an image to exemplify

我想保留绿色部分，去掉红色部分

Answer 1

您可以完全隐藏 header 并添加显示当前颜色值的自定义 header。

<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

是否可以自定义 vue 组件？

is it possible to customize the vue components?

quasar-framework