InputBanners

mail@pastecode.io avatar
unknown
javascript
a month ago
2.3 kB
2
Indexable
Never
<div>
    <Draggable
      v-model="rows"
      ref="tree"
      virtualization
      :maxLevel="1"
      :watermark="false"
    >
      <template #default="{ node, stat }">
        <span v-if="stat.children.length" @click="stat.open = !stat.open">
          {{ stat.open ? "-" : "+" }}
        </span>
        <div class="w-full mb-5">
          <div class="flex w-full">
            <a
              @click="removeRow(stat)"
              class="block text-center py-3 px-3 justify-center"
            >
              <i
                class="fas text-grey-400 mr-2 text-sm fa-vector-square cursor-move"
              ></i>
            </a>
            <div class="flex-initial w-full mr-4">
              <input type="text" class="w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block" placeholder="Add to ALT image" v-model="node.title"
                    @change="save" />
              <div class="flex w-full gap-3 mb-4 mt-3">
                <div class="w-full">
                  <small class="text-xs"
                    >The recommended image ratio is 1920 x 1181 px and maximum
                    file size 1 mb</small
                  >
                  <acit-jazz-upload
                    class="mt-1 block w-full"
                    title="images"
                    folder="place-thumbnail"
                    name="images"
                    :limit="1"
                    filetype="image/*"
                    label="Banner"
                    v-model="node.image"
                    @uploaded="uploaded(stat)"
                  >
                  </acit-jazz-upload>
                </div>
              </div>
            </div>
            <a
              @click="removeContent(node)"
              class="block text-center py-3 px-3 justify-center cursor-pointer"
            >
              <i class="fas text-red-400 mr-2 text-sm fa-trash"></i>
            </a>
          </div>
        </div>
      </template>
    </Draggable>
    <div class="flex w-full px-12">
      <SecondaryButton @click="addRow" type="button" class="justify-center">
        <i class="fas text-white-400 mr-2 text-sm fa-plus"></i> Add New
        Banner</SecondaryButton
      >
    </div>
  </div>
Leave a Comment