ylst-h5/src/views/Design/components/ActionCompoents/OptionAction.vue

<template>
  <div class="option-action">
    <template v-for="(item, index) in data" :key="index">
      <div class="flex align-center option-action-container">
        <slot name="item" :element="item" :index="index"></slot>
        <span v-if="active" class="flex">
          <van-icon name="close" @click="deleteOption(index)"></van-icon>
          <van-icon name="more-o" @click="openOptionActionModel(item, index)"></van-icon>
        </span>
      </div>
    </template>
  </div>
  <!--  操作项弹窗-->
  <van-action-sheet v-model:show="show">
    <template #description>
      <div class="flex flex-start">操作选项</div>
    </template>
    <van-cell-group :border="false" class="ml10">
      <van-cell title="固定置底" :border="false">
        <template #right-icon>
          <van-switch
            v-model="activeOption.is_fixed"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
          ></van-switch>
        </template>
      </van-cell>
      <van-cell title="设为其他项" :border="false">
        <template #right-icon>
          <van-switch
            v-model="activeOption.is_other"
            class="option-action-sheet-switch"
            size="0.5rem"
            :active-value="1"
            :inactive-value="0"
          ></van-switch>
        </template>
      </van-cell>
      <van-divider></van-divider>
      <van-cell title="下移选项" :border="false" @click="optionMove('down')"></van-cell>
      <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
    </van-cell-group>
  </van-action-sheet>
</template>
<script setup>
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        stem: ''
      };
    }
  },
  active: {
    type: Boolean,
    default: false
  }
});
// const emit = defineEmits(['update:data']);
const show = ref(false);
const activeOption = ref({});
const activeIndex = ref(-1);
const element = ref(props.data);

// emit('update:data');
/**
 * @name 打开model弹窗
 * @created_date 2025/3/4
 * @description
 **/
const openOptionActionModel = (item, index) => {
  show.value = true;
  activeOption.value = item;
  activeIndex.value = index;
};

// 上下移动
const optionMove = (action) => {
  switch (action) {
    case 'up':
      if (activeIndex.value === 0) {
        show.value = false;
        return;
      }
      // 向上移动
      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
      activeIndex.value -= 1;
      break;
    case 'down':
      if (activeIndex.value === element.value.length) {
        show.value = false;
        return;
      }
      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
      activeIndex.value += 1;
      break;
  }
};

// 删除当前选项

const deleteOption = (index) => {
  showConfirmDialog({
    title: '提示',
    message: '是否删除选项？'
  })
    .then(() => {
      // on confirm
      element.value.splice(index, 1);
    })
    .catch(() => {
      // on cancel
    });
};
</script>
<style scoped lang="scss">
.ml10 {
  margin-left: 10px;
}

.option-action {
  font-size: 20px;

  & .option-action-container {
    font-size: 20px;

    & .van-icon + .van-icon {
      margin-left: 5px;
    }
  }
}
</style>