You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
|
<div class="add-scene">
|
|
<FileLoader class="cover" @upload="getImg" @filename="setTitle" :key="key"></FileLoader>
|
|
<div class="meta">
|
|
<input v-model="title" placeholder="Title">
|
|
<textarea v-model="description" placeholder="Description"></textarea>
|
|
<button class="insert" @click="add">Add</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import FileLoader from '../components/FileLoader.vue'
|
|
import {ref} from 'vue'
|
|
|
|
const title = ref('')
|
|
const description = ref('')
|
|
const img = ref('')
|
|
const key = ref(0)
|
|
|
|
const emits = defineEmits(['add'])
|
|
|
|
|
|
const getImg = (e) => img.value = e
|
|
|
|
const setTitle = e => title.value = e
|
|
|
|
const add = () => {
|
|
emits('add', {
|
|
title: title.value,
|
|
description: description.value,
|
|
img: img.value}
|
|
)
|
|
reset()
|
|
}
|
|
|
|
const reset = () => {
|
|
title.value = ""
|
|
description.value = ""
|
|
img.value = ""
|
|
key.value += 1
|
|
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
|
|
.add-scene {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.add-scene .cover {
|
|
width: 320px;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.meta {
|
|
position: relative;
|
|
max-width: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
}
|
|
|
|
.meta input,
|
|
.meta textarea,
|
|
.meta button {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
font-family: sans-serif;
|
|
outline: none;
|
|
border: 1px solid rgba(125,125,125,0.5);
|
|
}
|
|
|
|
.description{
|
|
flex: 1;
|
|
}
|
|
|
|
.insert {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
</style>
|