效果

主要使用点击给当前元素添加class

创建一个Float组件

<template>
  <div class="float">
    <div class="title">{{ title }}</div>
    <div class="right-input-wrap">
        <div class="alignMode" v-for="(item,index) in 3" :key="index">
      <span @click="checkAtv(index)" :class="[cIndex === index?'active':'','align'+(index+1)]"><em></em><em></em><em></em><em></em></span>
    </div>
    </div>
  </div>
</template>

js部分

<script>
export default {
  name: "float",
  components: {},
  props: {
    title: {
      type: String,
      default: "标题",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    prop: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cIndex: 1
    };
  },
  computed: {
  },
  watch: {},
  methods: {
    checkAtv(index){
        this.cIndex = index;
        console.log(index)
        if(index == 0){
           this.$emit("update", "left", this.prop);
        }else if(index == 1){
        this.$emit("update", "none", this.prop);
        }else if(index == 2){
        this.$emit("update", "right", this.prop);
        }
    }
  },
  created() {},
  mounted() {},
  beforeMount() {},
};
</script>

样式部分

<style lang="less"  scoped>
.alignMode span.active {
    background: #daebff;
}
.alignMode em:first-child,.alignMode em:nth-child(3) {
    width: 8px;
}
.alignMode em:nth-child(2),  .alignMode em:nth-child(4) {
    width: 100%;
}
.alignMode em:first-child, .alignMode em:nth-child(3) {
    width: 8px;
}
.alignMode em:nth-child(2), .alignMode em:nth-child(4) {
    width: 100%;
}
.alignMode .align1 {
    text-align: left;
}
.alignMode .align2 {
    text-align: center;
}
.alignMode .align3 {
    text-align: right;
}
.alignMode em {
    display: inline-block;
    vertical-align: top;
    border-top: 1px solid #333;
    margin: 1px 0;
}
.alignMode span {
    display: inline-block;
    width: 13px;
    height: 13px;
    padding: 5px;
    border-radius: 50%;
    line-height: 0;
    margin: 0 2px;
    cursor: pointer;
}
.float {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  .left-text {
    font-size: 12px;
    color: #888;
  }
  .right-input-wrap {
    display: flex;
    flex: 1;
    justify-content: end;
    // padding-right: 10px;
    .radio {
      margin-right: 10px;
      .text {
        font-size: 12px;
      }
    }
  }
}
</style>

使用组件

引入组件（路径自己找）

import FloatVue from "../../input2/Float.vue";

export default {
  name: "home",
  components: {
    FloatVue
  },

使用

<FloatVue title="对齐方式" @update="propsStyle.float = $event" :value="propsStyle.float" ></FloatVue>