el-color-picker

<template>
  <el-color-picker
    size="small"
    @active-change="activeChange"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
    v-model="themeVal"
  ></el-color-picker>
</template>

<script>
import theme from "@/mixins/theme";

export default {
  name: "topTheme",
  mixins: [theme()],
  data() {
    return {
      chalk: ""
    };
  },
  methods: {
    activeChange(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped>
.theme-picker .el-color-picker__trigger {
  vertical-align: middle;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>