I am using vue-awesome-swiper component to create a nice images, the problem is when the next image comes in, a noisy gray overlay showing when loading the image.
I've tried to set lazy to false in my configuration but without avail.
Here is my swiper component content:
<div class="swiper-lazy c-slider__img" :data-background="require(`~/assets/images/${slide.image}`)">
<div class="c-slider__content h-container">
<div class="c-slider__content-block">
<h2 class="c-slider__heading">{{ slide.heading }}</h2>
<p class="c-slider__text">{{ slide.content }}</p>
<n-link
:to="localePath({ path: slide.url })"
class="c-slider__more"
>
Read More
<span class="c-slider__more-icon">
<app-icon
name="icon-arrow"
:width="21"
:height="8"
color="#fff"
/>
</span>
</n-link>
</div>
</div>
<div class="swiper-lazy-preloader"></div>
</div>
<script>
import AppIcon from '~/components/UI/AppIcon'
export default {
components: {
AppIcon
},
props: {
slides: {
type: Array,
default: () => []
}
},
data: () => ({
swiperOption: {
preloadImages: false,
lazy: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 5000
}
}
})
}
</script>
Related
I want to animate some cards using gsap for the following components in Vue.js 3.
<script setup lang="ts">
import gsap from 'gsap'
import { useTranslate } from '#/#core/composable/useTranslate'
import TimeLineItem from './TimeLineItem.vue'
interface ITimeLine {
icon: string
title: string
description: string
color: string
}
const timeLines = ref<ITimeLine[]>([
{
title: 'PadvishInstall',
description: 'timeline-welcome',
icon: 'material-symbols:looks-one-outline',
color: 'warning',
},
{
title: 'InsertingToken',
description: 'timeline-step1',
icon: 'ic:outline-looks-two',
color: 'error',
},
{
title: 'ContactInfo',
description: 'timeline-step2',
icon: 'ph:number-square-three-bold',
color: 'info',
},
])
const { translate } = useTranslate()
/**
* Functions
*/
const beforeEnter = (el: Element) => {
const he = el as HTMLElement
he.style.opacity = '0'
he.style.transform = 'translateX(100px)'
}
const enter = (el: Element, done: () => void) => {
const he = el as HTMLElement
gsap.to(el, {
opacity: 1,
x: 0,
duration: 0.8,
onComplete: done,
delay: Number((el as HTMLElement).dataset.index) * 0.5,
})
}
</script>
<template>
<VCard class="text-center" variant="text" title="card title">
<VCardText>
<transition-group
align="start"
justify="center"
truncate-line="both"
:density="$vuetify.display.smAndDown ? 'compact' : 'default'"
appears
#before-enter="beforeEnter"
#enter="enter"
tag="v-timeline"
>
<TimeLineItem
v-for="(item, index) in timeLines"
:key="index"
:data-index="index"
:title="translate(item.title)"
:description="translate(item.description)"
:icon="item.icon"
:color="item.color"
/>
</transition-group>
</VCardText>
</VCard>
</template>
TimeLineItem component :
<script setup lang="ts">
interface Props {
icon: string
title: string
description: string
color: string
}
const props = defineProps<Props>()
</script>
<template>
<VTimelineItem size="x-small" fill-dot>
<template #icon>
<div class="v-timeline-avatar-wrapper rounded-circle">
<VAvatar size="small">
<VIcon size="100" :icon="icon" :color="color" />
</VAvatar>
</div>
</template>
<VCard>
<VCardText>
<!-- 👉 Header -->
<div class="d-flex justify-space-between">
<h6 class="text-base font-weight-semibold mb-1 me-3">
{{ title }}
</h6>
</div>
<!-- 👉 Content -->
<p class="mb-1">
{{ description }}
</p>
</VCardText>
</VCard>
</VTimelineItem>
</template>
<style lang="scss" scoped>
.v-timeline-avatar-wrapper {
background-color: rgb(var(--v-theme-background));
}
</style>
For animating each element of v-timeline, I used transition-group and set the value of tag to v-timeline. But, when using transition-group, the Vue does not recognize the 'v-timeline' is a vuetify component and must render a component!.
This is a limitation of transition-group or can be considered as a bug in Vue.3?
I have used JQGrid to get the data from the controller which uses "GET". But, still I'm getting a blank table. I have also tried to apply breakpoints and check whether my variable "details" inside "Detail" Method getting value or not. It worked fine. I guess the problem is in returning the data in JSON format.
Controller
[HttpGet]
public JsonResult Detail()
{
IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
DBModel.Integrations row = db.GetIntegrationRow();
List<Integrations> details = new List<Integrations>
{
new Integrations
{
IntegrationName = row.IntegrationName,
CompanyEmail = row.CompanyEmail
}
};
return new JsonResult()
{
Data = details,
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
MaxJsonLength = Int32.MaxValue
};
HTML file
#using MCNIDev.CustomControls
#model MCNIDev.Models.ViewModel.Integrations
#{
ViewBag.Title = "Details";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicexb c-width" />
<title>Integrations</title>
</head>
#Styles.Render("~/Content/toasterCss")
#Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
.btn {
min-width: 80px !important;
}
</style>
<body>
#using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal", id = "frmManifestOrders" }))
{
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Integrations</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /.content-header -->
<section class="content">
<div class="container-fluid">
<div class="card card-block">
<div class="row table-responsive">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="tblSelectIntegrations"></table>
<div id="divSelect"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<hr />
<input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
</body>
</html>
#Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
Integrate.GetValue();
});
</script>
JQGrid File
var Integrate = function() {
function GetValue() {
$("#tblSelectIntegrations").jqGrid({
type: "GET",
url: "/Integrations/Detail",
datatype: "json",
async: false,
colNames: [
"First Name", "Email Address"
],
colModel: [
//{
// name: '',
// key: false,
// width: 30,
// editable: true,
// formatter: function () {
// return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
// }
//},
{ key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
{ key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
// { key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
],
pager: jQuery("#divSelect"),
rowNum: 1,
scroll: 0,
height: $(window).innerHeight() - 450,
width: "100%",
viewrecords: true,
caption: "Product",
emptyrecords: "No records to display",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
multiselect: false,
loadonce: false,
ajaxGridOptions: { cache: false },
gridComplete: function () {
},
}).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
GetValue: GetValue
};
}();
The issue lies in controller. I am trying to send data without telling JQGrid where to insert data.
var jsonData = new
{
rows = value
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Replace below code with above code
return new JsonResult()
{
Data = details,
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
MaxJsonLength = Int32.MaxValue
};
In my first code I've mentioned that add my data in the rows.
I am trying to pass a parameter to a function by looping through an the array items with v-for.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y"></h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
drawer: false
}),
methods: {
change(val) {
console.log(val);
this.$refs.y.innerText = val;
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
I want the parameter in items arrray to be passed to change(val) method giving each v-list-item a distinct event listener.
Then I want h1 with the ref="y" to change it's text based on the v-list-item I click. But so far I am getting the browser error of "Error in render: "TypeError: Cannot set property 'innerText' of undefined""
Instead of setting the innerText of the <h1> you could instead bind the innerText to a reactive variable. You could create a variable in data that could store the selected method and then bind that to the innerText using {{}} syntax. Doing it this way would be more inline with Vue best practices. Let me show you what I mean.
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y">{{ selectedMethod }}</h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:#click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
selectedMethod: '', // Initially blank
drawer: false
}),
methods: {
change(val) {
this.selectedMethod = val; // Update the value of selectedMethod
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
Hope this helps!
i can not filtred MyJson Data "InstallationsDefaultTypes" have you an idea please. How i can filter mythe nested JSON
i just using ng-class to filter it's possible?
Angular Controller :
$scope.GetDefaultByInstallation = function ()
{
$scope.installationsStates = [];
Object.keys($scope.installationsHelper).forEach(function (key)
{
var res = false;
angular.forEach($scope.installationsHelper[key].InstallationsDefautsTypes, function (value, key)
{
if (value.value == true)
{
res = true;
}
});
$scope.installationsStates.push({
name: $scope.installationsHelper[key].InstallationsDefautsTypes.name,
state: res
});
});
}
page.chtml : this is my page html
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 stateDefaut">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div ng-repeat="value in installationsHelper" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<span ng-class="{value.InstallationsDefautsTypes.value | filter : value.InstallationsDefautsTypes.name = "Delestage" ? 'mDefault' : 'mActive'}">
OUI
</span>
</div>
</div>
</div>
JSON:
scope.installationsStates = [ {
Installations: {
id: 1
},
InstallationsDefautsTypes :
{
Delestage:
{
name: "Delestage",
value : false,
id: 1
}
defaut command:
{
name: "defaut1",
value : false,
id: 1
}
}
defaultsInstallations: {
0: "defaut",
1:Delestage
}
}]
As per my understanding I made following example as per assumptions
<html ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div ng-controller="myController">
<div ng-repeat="value in installationsStates">
<span style="color: {{ value.InstallationsDefautsTypes.value ? 'red' : 'black' }};">
OUI
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myController', function($scope) {
$scope.installationsStates = [
{
Installations: {
id: 1
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 1
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 2
},
InstallationsDefautsTypes : {
name: "Delestage",
value : true,
id: 2
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 3
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 3
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
];
});
</script>
</body>
</html>
For better understanding about ng-repeat etc. please go though this link https://www.w3schools.com/angular/ng_ng-repeat.asp
Hope it helps
I've created a component and use it multiple times on one of my vue pages.
Now I wanna change the background-color for each use of this component.
This is my component:
<template>
<div class="project-card" :style="{backgroundColor: color}">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
name: 'ProjectCard',
props: {
title: String,
description: String
},
data: function() {
return {
color: "#000"
}
}
}
</script>
and this is my vue page, where I use the component:
<template>
<div class="projects">
<ProjectCard
title="Projekt 01"
description="Lorem Ipsum"
/>
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
/>
</template>
<script>
import ProjectCard from '#/components/ProjectCard.vue'
export default {
name: 'projects',
components: {
ProjectCard
}
}
</script>
Is it now possible to change the color data of the project-card component on my projects page, like I changed the text props?
Thanks for your help!
Pass color also as a prop:
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
color= "#000F"
/>
<ProjectCard
title="Projekt 02"
description="Lorem Ipsum"
color= "#00FF00"
/>
and in script:
<script>
export default {
name: 'ProjectCard',
props: {
title: String,
description: String,
color:String
},
data: function() {
return {
color: "#000"
}
}
}
</script>