quasar-framework - 是否可以自定义 vue 组件？

Question

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

我知道该组件有一个“无标题”版本，但该版本也删除了颜色输入。

这里有一张图片来举例说明

我想保留绿色部分并删除红色部分

标签： quasar-framework

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>

密码笔