element-ui 的color-picker組件樣式修改

一、版本："element-ui": "2.4.11"

   1.原本的样式

    

2.需要實現類似編輯工具欄的樣式

    

3. 修改方法为覆盖element-ui的原本样式，代码如下

<template>
  <div class="dashboard-container">

    <div class="color-picker font-color-picker" >
      <el-color-picker v-model="color" ></el-color-picker>
    </div>
    <div class="color-picker back-color-picker">
      <el-color-picker v-model="color"></el-color-picker>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: { },
  data() {
    return {
      color:'#181515'
    }
  },

  computed: {
    ...mapGetters([
    ])
  },
  created() {

  }
}
</script>
<style lang="scss">
  .color-picker{
      .el-color-picker__icon {
        display: none !important;
      }

      .el-icon-arrow-down {
        display: none !important;
      }
      .el-color-picker__color-inner {
        position: relative !important;
        height: 20% !important;
        bottom: 0px;
        display: block !important;
      }
  }
  .font-color-picker{
    .el-color-picker__color::before {
      content: 'A';
      color: #181515;
      font-size: 17px;
    }
  }
  .back-color-picker{
    .el-color-picker__color::before {
      display: block;
      height: 80%;
      content: '';
      background-image: url('../../assets/beijingyanse.svg');
      background-size: 100% 100%;
    }
  }
</style>