样式效果

代码

<template>
  <div>
    <el-dropdown
      trigger="click"
      style="width:80px"
      @visible-change="changeRotate"
      @command="borderStyle"
    >
      <div class="selectColor">
        <div class="borderStyleBox ">
          <svg
            width="40"
            height="1"
            class="svg-path-type"
          >
            <path
              d="M1,0h98"
              stroke-width="222"
              stroke="#DC143C"
              :stroke-dasharray="strokeDasharray"
            ></path>
          </svg>
        </div>
        <div
          class="el-icon-arrow-up change"
          ref="rotate"
        ></div>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          :command="item.id"
          v-for="item in strokeDasharrayOpitons"
          :key="item.id"
        >
          <div>
            <svg
              width="98"
              height="1"
              class="svg-path-type"
              v-html="item.className"
            >
              {{item.className}}
            </svg>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data () {
    return {
      strokeDasharray: '0',
      strokeDasharrayOpitons: [
        { id: '0', className: ` <path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="0">`, },
        { id: '8,2', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="8,2"></path>` },
        { id: '6,3', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="6,3"></path>` },
        { id: '4,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="4,4"></path>` },
        { id: '2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="2,4"></path>` },
        { id: '1', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="1"></path>` },
        { id: '8,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="8,4,2,4"></path>` },
        { id: '8,4,2,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="8,4,2,4,2,4"></path>` },
        { id: '8,4,8,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="8,4,8,4,2,4"></path>` },
        { id: '8,4,2,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="8,4,2,4,2,4"></path>` },
        { id: '10,4,2,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="10,4,2,4,2,4"></path>` },
        { id: '20,4,2,4', className: `<path d="M1,0h98" stroke-width="222" stroke="#DC143C" stroke-dasharray="20,4,2,4"></path>` },
      ],
    }
  },
  methods: {
    borderStyle (item) {
      this.strokeDasharray = item
      this.doActions('strokeDasharray', item)
    },
    changeRotate(row){
      if(row){
      this.$refs.rotate.className = "el-icon-arrow-up change rotate"
      }else{
      this.$refs.rotate.className = "el-icon-arrow-up change"
      }
    },
  },
  components: {

  }
}
</script>

<style scoped lang="less">
.selectColor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  .borderStyleBox{
    width: 48px;
    height: 20px;
    border-radius: 4px;
    margin: 0px 4px;
    display: flex;
    align-items: center;
  }
  .change{
    transition: all .5s;
    transform: rotate(180deg);
    margin-right: 10px !important;
    color:#dccfce ;
  }
  .rotate{
    transform: rotate(0deg);
  }
}
</style>