将 mixitup 与 Vue.js 2.0 组件一起使用
Using mixitup with Vue.js 2.0 Component
我正在尝试在 vue.js 上使用 mixitup，但每次 mixitup 目标都在容器中显示 0 个元素。(mixer.getStatu().totalShow)
这是我的完整 vue.js 组件代码
<template>
<section class="main-container object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="200">
<div class="container">
<div class="row">
<div class="main col-md-12">
<h1 class="page-title text-center">Fiziki Gerçekleşme Görselleri</h1>
<div class="separator"></div>
<div class="text-center" v-show="!showMap">
<p><span class="glyphicon glyphicon-refresh"></span> Harita yükleniyor...</p>
</div>
<highmaps :options="options" ref="map" v-if="showMap"></highmaps>
<div class="filters text-center" id="control_buttons" v-show="showControlButtons">
<p v-show="refreshButtons"><span class="glyphicon glyphicon-refresh"></span> Yükleniyor...</p>
<button class="btn btn-white control" data-filter="all">Tümü</button>
<button type="button" class="btn btn-white control"
v-for="h in hospitals"
:data-filter="setDataFilterClass(h.id)"
@click="mixitUpFilter(setDataFilterClass(h.id))">{{h.hospital_name}}</button>
</div>
</div>
</div>
</div>
<div class="gray-bg section" v-show="showControlButtons">
<div class="mixitup-container">
<slot v-for="h in hospitals">
<div v-for="photo in h.photos" :class="setFilterClass(h.id)"></div>
</slot>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>
</section>
</template>
<script>
import VueHighcharts from 'vue-highcharts'
Vue.use(VueHighcharts, { Highcharts })
import mixitup from 'mixitup'
export default{
name:'physicalimagesmap',
data(){
var self = this;
return {
mapDataUrl:'/report/hospital-city-map-data',
mapHcKeyDataUrl:'/report/hospital-city-detail-by-hckey',
mapType:{'map_statu':'yatak'},
hospitalsData:[],
mixitFilters:[],
options:{
lang:{
downloadJPEG: 'JPEG Olarak İndir',
downloadPDF: 'PDF Olarak İndir',
downloadPNG: 'PNG Olarak İndir',
downloadSVG: 'SVG Olarak İndir',
printChart: 'Grafiği Yazdır'
},
title : {
text : ''
},
subtitle : {
text : ''
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
legend: {
title: {
text: 'Yatak Sayısı (Toplam)',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
layout: 'vertical',
align: 'right',
floating: true,
valueDecimals: 0,
valueSuffix: '',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14,
x:0,
y:20
},
colorAxis: {
dataClasses: [{
from: 0,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
},
exporting: {
chartOptions: {
colorAxis: {
dataClasses: [
{
from: 1,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
}
}
},
credits:{
enabled:false
},
series:[{
animation: {
duration: 1000
},
data : [],
mapData: Highcharts.maps['countries/tr/tr-all'],
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.properties) {
return this.point.properties['name'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
joinBy: ['hc-key'],
name: 'Yatak Sayısı',
cursor: 'pointer',
point:{
events:{
click:function(e){
self.hcKey = e.point['hc-key'];
self.refreshButtons = true;
self.getCityHospitalData();
console.log(mixer.getState().totalShow);
}
}
}
}]
},
showMap:false,
hcKey:'',
showControlButtons:false,
hospitals:{},
refreshButtons:false
}
},
methods:{
setMap(){
var self = this;
axios.post(this.mapDataUrl,this.mapType)
.then(function (response) {
self.options.series[0].data = response.data
self.showMap = true;
});
},
getCityHospitalData(){
var self = this
if(this.hcKey!==''){
axios.post(this.mapHcKeyDataUrl,{'hcKey':this.hcKey})
.then(function (response) {
self.hospitals = response.data.hospitals
self.showControlButtons = true
self.refreshButtons = false
mixer.forceRefresh()
}).catch(function(error){
console.log(error);
});
}
},
setDataFilterClass(hospitalId){
return '.hospital-image-'+hospitalId
},
setFilterClass(hospitalId){
return 'mix hospital-image-'+hospitalId
},
mixitUpFilter(filterClass){
mixer.filter(filterClass)
}
},
mounted(){
this.setMap()
window.mixer = mixitup($('.mixitup-container'))
}
}
</script>
我正在使用 ajax(axios) 获取控件和容器元素。因此它们是动态创建的。
但是 mixitup 不显示容器元素和控制按钮。
我也尝试 mixer.destroy() mixer.forceRefresh() 但它不起作用。
如有任何想法和帮助，我们将不胜感激。
谢谢
你的设置肯定有点复杂，但我设置了一个示例 repo 只是为了确保 Vue.js 和 MixItUp 可以很好地协同工作，因为我也需要一起使用它们。
https://github.com/jordanboston/mixitup-vue-example
这只是取自 Kunk Labs 站点的一个基本示例。我正在使用 npm i -S mixitup 选项并且它运行良好，至少对于像这样的基本示例而言是这样。
希望对您有所帮助。
我正在尝试在 vue.js 上使用 mixitup，但每次 mixitup 目标都在容器中显示 0 个元素。(mixer.getStatu().totalShow)
这是我的完整 vue.js 组件代码
<template>
<section class="main-container object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="200">
<div class="container">
<div class="row">
<div class="main col-md-12">
<h1 class="page-title text-center">Fiziki Gerçekleşme Görselleri</h1>
<div class="separator"></div>
<div class="text-center" v-show="!showMap">
<p><span class="glyphicon glyphicon-refresh"></span> Harita yükleniyor...</p>
</div>
<highmaps :options="options" ref="map" v-if="showMap"></highmaps>
<div class="filters text-center" id="control_buttons" v-show="showControlButtons">
<p v-show="refreshButtons"><span class="glyphicon glyphicon-refresh"></span> Yükleniyor...</p>
<button class="btn btn-white control" data-filter="all">Tümü</button>
<button type="button" class="btn btn-white control"
v-for="h in hospitals"
:data-filter="setDataFilterClass(h.id)"
@click="mixitUpFilter(setDataFilterClass(h.id))">{{h.hospital_name}}</button>
</div>
</div>
</div>
</div>
<div class="gray-bg section" v-show="showControlButtons">
<div class="mixitup-container">
<slot v-for="h in hospitals">
<div v-for="photo in h.photos" :class="setFilterClass(h.id)"></div>
</slot>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>
</section>
</template>
<script>
import VueHighcharts from 'vue-highcharts'
Vue.use(VueHighcharts, { Highcharts })
import mixitup from 'mixitup'
export default{
name:'physicalimagesmap',
data(){
var self = this;
return {
mapDataUrl:'/report/hospital-city-map-data',
mapHcKeyDataUrl:'/report/hospital-city-detail-by-hckey',
mapType:{'map_statu':'yatak'},
hospitalsData:[],
mixitFilters:[],
options:{
lang:{
downloadJPEG: 'JPEG Olarak İndir',
downloadPDF: 'PDF Olarak İndir',
downloadPNG: 'PNG Olarak İndir',
downloadSVG: 'SVG Olarak İndir',
printChart: 'Grafiği Yazdır'
},
title : {
text : ''
},
subtitle : {
text : ''
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
legend: {
title: {
text: 'Yatak Sayısı (Toplam)',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
layout: 'vertical',
align: 'right',
floating: true,
valueDecimals: 0,
valueSuffix: '',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14,
x:0,
y:20
},
colorAxis: {
dataClasses: [{
from: 0,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
},
exporting: {
chartOptions: {
colorAxis: {
dataClasses: [
{
from: 1,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
}
}
},
credits:{
enabled:false
},
series:[{
animation: {
duration: 1000
},
data : [],
mapData: Highcharts.maps['countries/tr/tr-all'],
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.properties) {
return this.point.properties['name'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
joinBy: ['hc-key'],
name: 'Yatak Sayısı',
cursor: 'pointer',
point:{
events:{
click:function(e){
self.hcKey = e.point['hc-key'];
self.refreshButtons = true;
self.getCityHospitalData();
console.log(mixer.getState().totalShow);
}
}
}
}]
},
showMap:false,
hcKey:'',
showControlButtons:false,
hospitals:{},
refreshButtons:false
}
},
methods:{
setMap(){
var self = this;
axios.post(this.mapDataUrl,this.mapType)
.then(function (response) {
self.options.series[0].data = response.data
self.showMap = true;
});
},
getCityHospitalData(){
var self = this
if(this.hcKey!==''){
axios.post(this.mapHcKeyDataUrl,{'hcKey':this.hcKey})
.then(function (response) {
self.hospitals = response.data.hospitals
self.showControlButtons = true
self.refreshButtons = false
mixer.forceRefresh()
}).catch(function(error){
console.log(error);
});
}
},
setDataFilterClass(hospitalId){
return '.hospital-image-'+hospitalId
},
setFilterClass(hospitalId){
return 'mix hospital-image-'+hospitalId
},
mixitUpFilter(filterClass){
mixer.filter(filterClass)
}
},
mounted(){
this.setMap()
window.mixer = mixitup($('.mixitup-container'))
}
}
</script>
我正在使用 ajax(axios) 获取控件和容器元素。因此它们是动态创建的。
但是 mixitup 不显示容器元素和控制按钮。
我也尝试 mixer.destroy() mixer.forceRefresh() 但它不起作用。
如有任何想法和帮助，我们将不胜感激。
谢谢
你的设置肯定有点复杂，但我设置了一个示例 repo 只是为了确保 Vue.js 和 MixItUp 可以很好地协同工作，因为我也需要一起使用它们。
https://github.com/jordanboston/mixitup-vue-example
这只是取自 Kunk Labs 站点的一个基本示例。我正在使用 npm i -S mixitup 选项并且它运行良好，至少对于像这样的基本示例而言是这样。
希望对您有所帮助。