element-ui二次封装下拉菜单(支持选中图片)

最新推荐文章于 2023-02-24 10:28:01 发布

来陪人家玩游戏嘛

最新推荐文章于 2023-02-24 10:28:01 发布

阅读量465

点赞数

分类专栏： vue 文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/gongliming_qd/article/details/122436723

版权

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用Vue实现的边框样式选择器组件。该组件允许用户通过下拉菜单选择不同的边框样式，并实时预览所选样式的视觉效果。支持多种边框虚线和实线样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式效果

在这里插入图片描述

代码

<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>