В этой статье мы реализуем кое-что забавное. Мы будем реализовывать функцию перетаскивания в Vuejs. Я знаю, что существует множество библиотек, которые помогут вам это настроить, но всегда полезно понять, как это работает под капотом.
Поскольку это очень маленькое приложение, мы не будем использовать Vue CLI, мы будем использовать тег скрипта Vuejs. Это также дает нам все возможности, которые дает нам интерфейс командной строки.
Готовые к использованию шаблоны Vue
Если вы создаете веб-приложение на Vue, я бы рекомендовал оформить заказ на готовые к использованию шаблоны vue для загрузки и использования в вашем проекте. Поскольку они поставляются с красивыми интерфейсами, а также их легко настраивать. Они могут сэкономить вам много времени, которое вам нужно потратить на создание пользовательского интерфейса для вашего приложения. Сделайте заказ лучшие шаблоны vue от WrapPixel. WrapPixel известен тем, что предоставляет высококачественные административные панели управления в Vue, Angular, React и Bootstrap Frameworks.
Мы начнем с создания каталога нашего проекта. Мы создадим папку в каталоге рабочего стола. Здесь мы будем настраивать наше приложение.
В основном нам понадобятся всего два файла: файл index.html и файл main.js. Все наши коды шаблонов попадут в файл index.html, а все наши коды Vuejs попадут в файл main.js.
Vue Drag and Drop Загрузка изображения
Для этого откройте свой терминал и введите следующее:
cd desktop && mkdir vuedragndrop && cd vuedragndrop
touch index.html && touch main.js
code .Эта команда создаст эти файлы внутри нашего каталога и откроет каталог в коде VS.
Мы начнем с изменения нашего файла index.html, добавив пользовательский шаблон html 5, а затем добавим теги сценария Vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="main.js"></script>
</body>
</html>Мы начинаем с определения шаблона HTML 5 и добавления тега сценария Vuejs в тег заголовка, это немедленно инициализирует Vuejs при загрузке страницы. Затем мы создаем div с идентификатором app, здесь мы будем писать весь наш код Vuejs. Вы должны запустить свое приложение на живом сервере. Вы можете использовать NPM для установки любого live-сервера по вашему выбору.
После этого нам нужно создать экземпляр Vuejs в нашем main.js файле:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Мы используем метод new Vue() для создания экземпляра Vuejs и определения свойства данных message, на которое мы ссылаемся в нашем index.html файле.
Мы создадим простой пользовательский интерфейс, в котором будет отображаться точка перетаскивания. Добавьте следующую разметку внутри div с идентификатором app:
<div id="app"> <div class="container"> <h4>Drag and Drop here</h4> </div> {{message}} </div>And then add this styles in the head tag:<style> .container { width: 350px; height: 350px; border: 2px dotted gray } .container h4 { text-align: center; font-family: sans-serif; } </style>
После этого вы получите такой результат:
Добавить свойство данных
Теперь нам нужно добавить свойство данных, которое будет содержать наши файлы, которые были помещены в коробку. Для этого добавьте ниже к свойству data в экземпляре Vue:
files: [],После этого мы добавим событие @drop, которое выберет наши файлы, а также атрибут v-cloak, который используется для сокрытия {{tags}} перед загрузкой приложения.
Теперь наш div должен выглядеть так:
<div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
<h4>Drag and Drop here</h4>
</div>Нам нужно определить метод addFile в нашем экземпляре Vue. Для этого мы создадим объект методов в экземпляре Vue, который будет содержать все наши методы Vuejs:
addFile(e) {
let files = e.dataTransfer.files;
[...files].forEach(file => {
this.files.push(file);
console.log(this.files)
});
}После этого откройте консоль и попробуйте перетащить файл внутри коробки. При этом в поле будут записаны сведения о файле.
Что мы можем сделать, так это отобразить выбранные изображения внутри поля с помощью тега <li>. Давайте добавим эту функцию, изменив коды:
<div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
<h4>Drag and Drop here</h4>
<li v-for="(file,id) in files" :key="id" class="list-group-item mb-3 border-top">
{{ file.name }} ({{ file.size }} kb)
<button>Remove</button>
</div>Теперь, если вы перетащите файл, вы получите имя и размер файла.
Удаление изображений из Vuejs Drag and Drop
Мы также можем добавить метод, который удалит файл из массива files, добавив метод к кнопке удаления:
<button @click="removeFile(file)">Remove</button>А затем создайте метод removeFile внутри объекта методов:
removeFile(file) {
this.files = this.files.filter(f => {
return f != file;
});
},Теперь вы можете удалить любой файл из массива files.
Давайте сделаем дополнительный шаг, создав фильтр Vuejs, который будет форматировать сторону каждого файла. Создайте объект фильтра и добавьте этот метод:
filters: {
kb(val) {
return Math.floor(val / 1024);
}
},В основном это будет делить размер нашего файла на 1024, чтобы получить фактический размер. Чтобы использовать фильтр Vuejs, вы должны передать канал для его использования, выполнив следующие действия:
{{ file.name }} ({{ file.size | kb }} kb)
Стилизация нашего Vue Drag and Drop с помощью Bootstrap
Чтобы наш пользовательский интерфейс выглядел лучше, мы можем добавить загрузочный CSS CDN, а также шрифты Google в наше приложение. Давайте изменим наш HTML-заголовок на это:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag and Drop</title>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
font-family: "Kumbh Sans", sans-serif;
}
.wrapper {
width: 350px;
height: 350px;
border: 2px dotted gray;
}
</style>
</head>После добавления этого мы теперь можем изменить нашу разметку на это:
<body>
<div id="app">
<nav class="navbar navbar-light bg-info">
<div class="container">
<a class="navbar-brand" href="#">Vue Drag and Drop</a>
</div>
</nav>
<div class="container">
<div class="row mt-4">
<div class="col-md-6 offset-md-3">
<div
class="wrapper px-2"
v-cloak
@drop.prevent="addFile"
@dragover.prevent
>
<h4 class="mt-3 text-center">Drag and Drop here</h4>
<ul class="list-group">
<li class="list-group-item" v-for="(file,id) in files">
{{ file.name }} ({{ file.size | kb }} kb)
<button
class="btn btn-danger btn-sm float-right"
@click="removeFile(file)"
>
x
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src=" main.js"></script>
</body>Теперь ваше приложение должно выглядеть так:
