datart-vue-carousel.iife.js

(function(){"use strict";var t='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1647421818069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M122.368 165.888h778.24c-9.216 0-16.384-7.168-16.384-16.384v713.728c0-9.216 7.168-16.384 16.384-16.384h-778.24c9.216 0 16.384 7.168 16.384 16.384V150.016c0 8.192-6.656 15.872-16.384 15.872z m-32.768 684.544c0 26.112 20.992 47.104 47.104 47.104h750.08c26.112 0 47.104-20.992 47.104-47.104V162.304c0-26.112-20.992-47.104-47.104-47.104H136.704c-26.112 0-47.104 20.992-47.104 47.104v688.128z" p-id="2511"></path><path d="M706.048 719.872h-389.12V292.864h389.12v427.008z m-330.752-57.856h272.384V350.72H375.296v311.296z" p-id="2512"></path><path d="M757.248 377.856h126.976v316.928h-126.976zM138.752 376.832h126.976v316.928H138.752z" p-id="2513"></path></svg>';function e({dHelper:e}){return{config:{datas:[{label:"dimension",key:"dimension",type:"group"},{label:"filter",key:"filter",type:"filter",allowSameField:true}],styles:[{label:"carousel.title",key:"carousel",comType:"group",rows:[{label:"carousel.interval",key:"interval",comType:"inputNumber",default:3e3,options:{min:0,step:1}}]}],settings:[{label:"viz.palette.setting.paging.title",key:"paging",comType:"group",rows:[{label:"viz.palette.setting.paging.pageSize",key:"pageSize",default:1e3,comType:"inputNumber",options:{needRefresh:true,step:1,min:0}}]}],i18ns:[{lang:"zh-CN",translation:{chartName:"[Experiment] 用户自定义Vue跑马灯",carousel:{title:"跑马灯",interval:"切换间隔(毫秒)"}}},{lang:"en-US",translation:{chartName:"[Experiment] Vue Carousel",carousel:{title:"Carousel",interval:"Interval(MS)"}}}]},isISOContainer:"demo-customize-line-chart",dependency:["https://cdn.jsdelivr.net/npm/vue@2.6.14"],meta:{id:"demo-vue-carousel",name:"chartName",icon:t,requirements:[{group:1}]},chartId:"vueCarousel",onMount(t,e){if("Vue"in e.window){e.document.getElementById(t.containerId).innerHTML=`<div id='${this.chartId}'></div>`;const i=e.window.Vue;this.chart=new i({el:`#${this.chartId}`,template:this.getTemplate(),data:{nowIndex:0,list:[],btnStyle:{display:"inline-block",margin:"0 20px",width:"10px",height:"10px",border:"1px solid #000",borderRadius:"50%"},actionBtnStyle:{display:"inline-block",margin:"0 20px",width:"10px",height:"10px",border:"1px solid #000",borderRadius:"50%",background:"#000"},setTime:3e3,timer:null},methods:{onClickBtn(t){this.nowIndex=t;this.initInterval()},initInterval(t=this.setTime){if(this.timer)clearInterval(this.timer);if(t)this.timer=setInterval((()=>{this.nowIndex+=1;if(this.nowIndex>=this.list.length)this.nowIndex=0}),t)},getImage(t){return t}},watch:{setTime:function(t){this.initInterval(t)},list:{handler:function(t){if(t.length){this.nowIndex=0;this.initInterval()}},deep:true}},mounted:function(){if(this.list.length)this.initInterval()}})}},onUpdated(t){if(!t.dataset||!t.dataset.columns||!t.config)return;const i=t.config.datas||[];const n=i.filter((t=>"group"===t.type)).flatMap((t=>t.rows||[]));const a=t.config.styles||[];const s=e.transformToDataSet(t.dataset.rows,t.dataset.columns,i);const[l]=e.getStyles(a,["carousel"],["interval"]);this.chart.$data.list=s.map((t=>t.getCell(n[0])));this.chart.$data.setTime=void 0!==l?l:3e3},onUnMount(){if(this.chart.$data.timer)clearInterval(this.chart.$data.timer);this.chart=null},onResize(){},getTemplate(){return`\n        <div style='padding-top: 2.5%;'>\n          <div\n            v-if='list.length'\n            v-show='index === nowIndex'\n            v-for='(item, index) in list'\n            style='text-align: center; height: 80%; width: 100%;'\n          >\n            <img :src='getImage(item)' style='max-height: 100%; max-width: 100%;' />\n          </div>\n          <div style='text-align: center; width: 100%; margin-top: 5%;'\n          >\n            <div\n              v-if='list.length'\n              v-for='(item, index) in list'\n              :style='index === nowIndex ? actionBtnStyle : btnStyle'\n              @click='onClickBtn(index)'\n            />\n          </div>\n        </div>\n      `}}}return e})();