wordpress-theme-aksrt/assets/admin/src/components/floating/FloatMoreButtonsEditor.vue

<template>
  <div class="float-more-editor">
    <n-collapse :default-expanded-names="[]" accordion>
      <n-collapse-item
        v-for="(btn, index) in modelValue"
        :key="index"
        :name="index"
      >
        <template #header>
          <span class="float-more-editor__head">
            <IconValue v-if="btn.icon" :value="btn.icon" />
            <span>{{ btn.desc || `按钮 ${index + 1}` }}</span>
          </span>
        </template>
        <template #header-extra>
          <n-button
            size="tiny"
            quaternary
            type="error"
            :disabled="modelValue.length <= 1"
            @click.stop="remove(index)"
          >
            <template #icon><i class="fa fas fa-trash-alt" /></template>
          </n-button>
        </template>

        <n-form label-placement="left" label-width="110" class="jio-form">
          <n-form-item label="按钮简介">
            <n-input :value="btn.desc" @update:value="patch(index, { desc: $event })" />
          </n-form-item>
          <n-form-item label="按钮图标">
            <FaIconPicker :model-value="btn.icon" placeholder="选择图标" @update:model-value="patch(index, { icon: $event || '' })" />
          </n-form-item>
          <n-form-item v-if="!btn.hover" label="按钮链接">
            <div class="float-more-editor__link">
              <n-input
                :value="btn.link.url"
                placeholder="https://"
                @update:value="patch(index, { link: { ...btn.link, url: $event } })"
              />
              <n-checkbox
                :checked="btn.link.target === '_blank'"
                @update:checked="patch(index, { link: { ...btn.link, target: $event ? '_blank' : '' } })"
              >
                新窗口打开
              </n-checkbox>
            </div>
          </n-form-item>
          <n-form-item label="悬浮内容">
            <div class="float-more-editor__block">
              <div class="float-more-editor__subtitle">鼠标移到此处时显示内容</div>
              <n-input
                type="textarea"
                :value="btn.hover"
                :autosize="{ minRows: 2, maxRows: 8 }"
                @update:value="patch(index, { hover: $event })"
              />
              <div class="float-more-editor__desc">设置此处后，按钮链接将失效<br>支持HTML代码，请注意代码规范及标签闭合</div>
            </div>
          </n-form-item>
          <n-form-item v-if="btn.hover" label="悬浮内容宽度">
            <div class="float-more-editor__block">
              <n-input-number
                :value="btn.hover_width"
                :min="50"
                :max="500"
                :step="10"
                style="width: 180px;"
                @update:value="patch(index, { hover_width: $event ?? 200 })"
              >
                <template #suffix>PX</template>
              </n-input-number>
              <div class="float-more-editor__desc">移动端宽度最大240px</div>
            </div>
          </n-form-item>
        </n-form>
        <FloatBtnCommonFields :model-value="btn" @update:model-value="replace(index, $event)" />
      </n-collapse-item>
    </n-collapse>

    <div class="float-more-editor__footer">
      <n-button size="small" type="primary" @click="add">
        <template #icon><i class="fa fas fa-plus" /></template>
        添加按钮
      </n-button>
      <span class="float-more-editor__desc">此处内容至少保留一个，如一个都无需显示请关闭PC端和移动端显示即可</span>
    </div>
  </div>
</template>

<script setup>
import FaIconPicker from '@/components/form/FaIconPicker.vue'
import IconValue from '@/components/form/IconValue.vue'
import FloatBtnCommonFields from './FloatBtnCommonFields.vue'
import { defaultMoreButton } from './floating-defaults.js'

const props = defineProps({
  modelValue: { type: Array, required: true },
})
const emit = defineEmits(['update:modelValue'])

function replace(index, value) {
  const next = props.modelValue.slice()
  next.splice(index, 1, value)
  emit('update:modelValue', next)
}

function patch(index, partial) {
  replace(index, { ...props.modelValue[index], ...partial })
}

function add() {
  emit('update:modelValue', [...props.modelValue, defaultMoreButton()])
}

function remove(index) {
  if (props.modelValue.length <= 1) return
  const next = props.modelValue.slice()
  next.splice(index, 1)
  emit('update:modelValue', next)
}
</script>

<style scoped>
.float-more-editor__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.float-more-editor__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.float-more-editor__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.float-more-editor__subtitle,
.float-more-editor__desc {
  font-size: 12px;
  color: var(--n-text-color-3);
}

.float-more-editor__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
</style>