I am trying to clear the file lists as iview ui by default show file list. The problem is, user can upload file different times and ivew ui upload component keeps the old files in the list. I don't from where the list is coming. I saw there is a method clearFiles but not sure how to use it. There is no example in doc.
This is how I am using.
One thing, if I make :show-upload-list to false the list doesn't show but the progress bar also doesn't show. I want the progress bar to stay and list shouldn't show up.
<Upload
:multiple="false"
:show-upload-list="true"
:on-success="handleSuccess"
:format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
:max-size="21048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
type="drag"
:action="isFileUpload.url"
:data="isFileUpload.meta"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
Thank you.
You can add ref="upload" to vue component and clear file with this.$refs.upload.clearFiles()
<template>
<Upload
ref="upload"
:multiple="false"
:show-upload-list="true"
:on-success="handleSuccess"
:format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
:max-size="21048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
type="drag"
:action="isFileUpload.url"
:data="isFileUpload.meta"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</template>
<script>
export default {
...
methods: {
handleSuccess () {
this.$refs.upload.clearFiles()
}
}
...
}
</script>
Related
In my Vue/Vuetify app, I can conditionally hide elements depending on the screen size using the Vuetify display helper classes, e.g.
<!-- Show on medium width and above -->
<v-app-bar app height="74px" class="hidden-sm-and-down">
<button #click="logout" data-cy="logout">Log Out</button
</v-app-bar>
<!-- Show on small width and below -->
<v-app-bar app height="74px" class="hidden-md-and-up">
<button #click="logout" data-cy="logout">Log Out</button
</v-app-bar>
The element is hidden by setting the CSS property display: none. This causes the following Cypress command to fail
cy.get('[data-cy="logout"]').click()
With the error
cy.click() can only be called on a single element. Your subject contained 2 elements
So evidently Cypress doesn't ignore elemnts with display: none.
Is there a way I either remove these elements instead of hiding them, or alternatively tell Cypress to ignore hidden elements?
Add the data property "removeElement" to your data section.
Add a watcher for the Vuetify breakpoint attribute, and set the "removeElement" to true/false depending on when you need to remove/add the element.
watch: {
'$vuetify.breakpoint.width'(val) {
if (val < 425)
this.removeElement = true
else
this.removeElement = false
},
},
Update your template to use v-if="removeElement" instead of class=" .... "
The jquery :visible selector works, when the parent/ancestor has display: none.
Ref visibility
An element is considered hidden if:
...
Its CSS property (or ancestors) is display: none.
Test fiddle
/// <reference types="#cypress/fiddle" />
const test = {
html: `
<div>
<header style="display: none">
<button data-cy="logout">Button small</button>
</header>
<header>
<button data-cy="logout">Button medium</button>
</header>
</div>
`,
test: `
cy.get('[data-cy="logout"]:visible').click()
`
}
it('the test', () => {
cy.runExample(test)
})
I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
So, I wanted to bind style with the height of another element that I got from getHeight function, but I kept getting an error that said window is not defined.
Can someone please give me a solution?
Here is my source code:
<template>
<div class="container">
<p class="section-title">past event</p>
<div class="columns is-multiline">
<div
class="column is-one-third is-centered past-events"
v-for="(event, index) in events.slice(0, 2)"
:key="index"
>
<EventCard :event="event" />
</div>
<div class="column is-one-third is-centered">
<div class="link-box" :style="{ height: getHeight() }">
<nuxt-link to="/past-events">
<p style="color: #ffffff; cursor: pointer" class="see-all">
Lihat List Event Lainnya
</p>
</nuxt-link>
</div>
</div>
</div>
<a class="see-all-btn"> </a>
</div>
</template>
<script>
import EventCard from "~/components/EventCard.vue";
export default {
name: "PastEvents",
components: {
EventCard
},
props: ["events"],
data() {
return {};
},
mounted() {
this.getHeight();
},
methods: {
getHeight() {
const height = window.getComputedStyle(
document.querySelector(".past-events")
).height;
console.log(height);
return height + "px";
}
}
};
</script>
Nuxt uses server-sided rendering. This means that when your code is being executed on the server, it does not have something like window. After all, it is not a browser.
The easiest way around this is by wrapping anything that should not be pre-rendered to html, with something like vue-no-ssr. This particular library renders a dummy component on the server, then actually renders the component when it gets to the browser.
Yes window doesn't exist during the mounted lifecycle hook. I assume you're trying to place something based on its position?
In that case, you might be able to utilize CSS to do it for you. You can place elements using the View Height/View Width units. Combine that with CSS calc() and you might get the solution you need.
Example:
.element {
/* make element positon relative to the window */
position: fixed;
/* set position - note vw/vh are % of window */
/* this put the top of your element -200px from the bottom of your window */
top: calc(100vh - 200px);
}
If you're doing something more complex, using Javascript's element.getBoundingClientRect() will likely provide what you need. See this answer for more info.
I'm using nuxt-leaflet (with Vue2Leaflet) and I'm wondering how to display the tooltip of a specific marker after cliquing on a button ("Display tooltip") in my template vue file ?
<template>
<div>
<button #click="displayTooltipOfMarker(x)">Display tooltip</button>
<div id="map-wrap" style="height: 500px; width:100%">
<no-ssr>
<l-map :zoom="10" :center="positionInitiale">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :icon="customIcon" :lat-lng="positionMarqueurHome"></l-marker>
<l-marker
v-for="marker in marqueurs"
:key="marker.id"
:lat-lng.sync="marker.position"
#click="alert(marker)"
>
<l-popup :content="marker.tooltip"/>
<l-tooltip :content="marker.tooltip"/>
</l-marker>
</l-map>
</no-ssr>
</div>
</div>
</template>
Is it possible ?
To open/close Tooltip on external event (like button is your case) the folowing solution could be considered:
get access to Leaflet marker object via $refs attribute:
<l-marker
v-for="(marker, index) in markers"
:key="index"
ref="markersRef"
:lat-lng="marker.position"
>
<l-popup :content="marker.name"/>
</l-marker>
and save it into array:
mounted: function() {
this.$nextTick(() => {
this.markerObjects = this.$refs.markersRef.map(ref => ref.mapObject);
});
}
Once the external event is triggered (e.g. button click) the tooltip is getting displayed like this:
<button #click="displayTooltip(1)">Display</button>
displayTooltip(selectedIndex) {
this.markerObjects[selectedIndex].openTooltip();
}
Here is a demo for your reference
What I'm trying to do is to zoom an image on click, the idea is:
you click on an image
dialog of width=85vw opens up with the image you just clicked on inside of it (so the image is displayed almost fullscreen now)
I cannot think of a better way of "zooming" an image on click, but to open it in a modal dialog (if there's an easier way, please let me know).
Code:
<v-dialog v-model="dialog" max-width="85vw" >
<img :src="img1" alt="" width="100%" #click.stop="dialog=false">
</v-dialog>
<img :src="img1" width="500px" #click.stop="dialog = true">
<img :src="img2" width="500px" #click.stop="dialog = true">
<img :src="img3" width="500px" #click.stop="dialog = true">
export default {
data() {
img1: "../../src/assets/pexels-photo-373912.jpg",
img2: "../../src/assets/pexels-photo-373912.jpg",
img3: "../../src/assets/pexels-photo-373912.jpg"
}
}
The problem is, it's not opening any clicked image in a dialog, just the one you hard coded in there, in this example it will always open img1 no matter what image you click.
I don't know how to pass the :src into the dialog dynamically - the :src of the image you clicked.
P.S. v-dialog is a component from Vuetify.js library
Question:
Is there an obviously better way of doing it?
If not really, how do I make this method to work and display the image I clicked in the modal dialog?
You need a variable to hold which image is selected. When you click on an image, it should set the variable to the url for that image. When you click on the dialog image, it should unset the variable.
The dialog should show when the variable is set and otherwise be hidden.
For simplicity, I'm not using an actual dialog, just a div. It looks like you would use it for the dialog's v-model rather than using the v-if I use.
new Vue({
el: '#app',
data: {
selectedImage: null,
images: [
'http://via.placeholder.com/400x300?text=image%201',
'http://via.placeholder.com/600x400?text=image%202',
'http://via.placeholder.com/500x500?text=image%203'
]
},
methods: {
zoom(url) {
console.log("Zoom", url);
this.selectedImage = url;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-if="selectedImage" max-width="85vw">
<img :src="selectedImage" alt="" width="100%" #click.stop="selectedImage = null">
<hr>
</div>
<div v-for="url in images">
<img :src="url" width="100px" #click="zoom(url)">
</div>
</div>
to click distributed images across the page define a property and change it with click event
in template
<v-dialog v-model="dialog" max-width="60%" #keydown.esc="cancel">
<v-card>
<v-img :src="pic" alt="" contain/>
</v-card>
</v-dialog>
<v-img
src="require(#/assets/clinic/1.jpeg)"
alt=""
contain
#click="openPic(require('#/assets/clinic/1.jpeg'))"//this part is important you have to require image
/>
in script
data() {
return {
pic: "",
dialog: false
}
},
methods: {
openPic(image) {
this.dialog = true
this.pic = image
},
cancel() {
this.dialog = false
}
}