I'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app.
But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title class="justify-center">{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
The problem with v-img is that it renders the image as background (using the CSS style background-image) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.
Related
I have a problem with <v-dialog> that appears everywhere in my Vue.js application using Vuetify.js.
Every <v-dialog> is loading twice on the page. You can see it by looking at how it appears:
If I close one dialog the other dialog stays visible and works exactly like the first. It seems like Vue is generating two instances of it.
The code of the dialog isn't the issue, I think:
<v-dialog
v-model="dialog"
persistent
hide-overlay
no-click-animation
>
<v-card>
<v-card-title>Text</v-card-title>
<v-card-text>
<p class="subtitle-1">Some more text</p>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
depressed
>
Next
<v-icon right>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
The v-model is declared in data():
export default {
data() {
return {
dialog: true,
};
},
}
Any help is appreciated! Thanks.
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
Here, I have used vuetify to create buttons which pop up dialog box that contains buttons with different colors and I want to use buttons to change the background color of navigation and menu bar but due to my limited knowledge on vue and vuetify I am not able to change my background color. Can anyone help me???
My code is here:
<template>
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px" class="pa-md-4 mx-lg-auto">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Theme</v-btn>
</template>
<div class="text-center">
<v-btn v-for="(item) in colors" :color="item" dark large class="ma-2" style="width:100px;">
<span class="text-truncate" style="width:120px;">
{{item.replace(/-/g, '')}}
</span>
</v-btn>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" text #click="dialog = false">Save</v-btn>
</v-card-actions>
</div>
</v-dialog>
</v-row>
</template>
<script>
export default {
data(){
return{
colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
dialog: false
}
},
} </script>
To do this you actually use themes that you setup in vuetify.js and you can assign different colors to the different values for example primary: '#c3c3c3' and define different themes within your app. It comes with light and dark theme but you can also add/remove themes programmatically.
It's quite a bit of code so I will post the links on where directions can be found here.
https://vuetifyjs.com/en/customization/theme/#custom-theme-variants
And the actual usage can be found here:
https://vuetifyjs.com/en/customization/theme/#usage
I have a Vuetify dialog that I am displaying when the page loads, actually a second or so after so that the animation displays to reveal the modal dialog. The dialog has some text and an image. Problem is, the dialog displays, then the text pops in and after a delay (while the image downloads) the image then displays and the dialog expands to it's proper size.
How can I get the image to load into memory and be available before the dialog displays? I want the appearance to be a single smooth transition. Right now it comes in in chunks.
<template>
<div>
<v-dialog v-model="dialog" eager persistent max-width="500">
<v-card>
<v-card-title class="headline green lighten-2 white--text" primary-title>
<h3>Congratulations!</h3>
</v-card-title>
<v-card-text>
<div class="mt-4 mx-0 headline font-italic font-weight-bold green--text">
You just received a
<span class="text-no-wrap">pay raise!</span>
</div>
<div class="mt-2 mb-3 subtitle-1">Your Pay-Per-Mile has just increased.</div>
<v-row align="center" justify="center">
<v-img
src="#/assets/Thank-you-notes-for-job-well-done.jpg"
max-height="440"
max-width="450"
></v-img>
</v-row>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green" text #click="stop()">Keep it coming</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
...
setTimeout(() => {
this.dialog = true;
}, 2000);
Turns out to have been much easier than I thought. It felt like the image was defaulting to lazy loading, which apparently it does. all I had to do was at the eager property to the image and now the image loads as part of the entire dialog.