w-component-vue
Version:
A simple component for vue(vue2).
488 lines (474 loc) • 14.3 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>w-component-vue</title>
<!-- @babel/polyfill -->
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- extractHtml已自動添加@babel/polyfill與vue -->
<!-- vuetify -->
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
></script>
<!-- fontawesome -->
<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
rel="stylesheet"
/>
<!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<!-- google, 各組件使用mdi/js故不需引用 -->
<link
_href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
_href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<!-- data -->
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataAAPL.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.27/dist/w-component-vue.umd.js"></script>
<style>
.v-application--wrap {
/* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
width: 100svw;
max-width: 100svw;
font-family: inherit;
background: #fff;
}
/* 組件所須全域樣式 */
.item {
/* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
border-left: 3px solid #ffba75;
margin: 5px 5px 8px 0px;
padding: 3px 3px 5px 10px;
font-size: 0.9rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.head1 {
padding: 0px 0px 20px 0px;
font-size: 2.5rem;
}
.bkh {
/* 寬 */
padding: 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkh {
padding: 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkh {
padding: 5px;
}
}
.bk {
/* 寬 */
display: inline-block;
vertical-align: top;
padding: 0px 80px 60px 0px;
}
@media screen and (max-width: 1000px) {
/* 中窄 */
.bk {
display: block;
padding: 0px 0px 50px 0px;
}
}
.cpitem {
transition: all 0.3s;
padding: 5px 15px;
cursor: pointer;
}
.cpitem-white {
background: #fff;
}
.cpitem-white:hover {
background: #eee;
}
.cpitem-black {
background: #333;
}
.cpitem-black:hover {
background: #555;
}
</style>
</head>
<body
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
>
<v-app id="app" class="bkh" style="font-family:inherit;">
<div class="head1">
<span
style="cursor:pointer;"
title="open for copy link to view component"
onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
>w-segments-vertical</span>
</div>
<div class="bk">
<div class="item">textWithPopup & slot text-popup</div>
<w-segments-vertical
:items="WSegmentsVertical.items"
:text-with-popup="true"
>
<template v-slot:text-popup="props">
<div style="padding:5px 0px; max-width:400px;">
<div style="padding:10px 20px; background:#666;">
<span style="color:#fff;">{{props.item.text}}</span>
</div>
<div style="padding:5px;">
<div style="padding:5px 10px; font-size:0.8rem;">
<span style="color:#888;">Start year:</span>
<span
style="color:#f26;"
>{{props.item.valueStart}}</span>
</div>
<div style="padding:5px 10px; font-size:0.8rem;">
<span style="color:#888;">End year:</span>
<span
style="color:#f26;"
>{{props.item.valueEnd}}</span>
</div>
</div>
<div style="border-top:1px solid #ddd;"></div>
<div style="padding:5px;">
<div style="padding:5px 10px; font-size:0.8rem;">
<span
style="color:#444;"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div
style="padding:5px 10px; font-size:0.8rem; text-align:right;"
>
<a
style="color:#5b29c5;"
href="https://www.google.com/"
target="_blank"
>read more</a>
</div>
</div>
</div>
</template>
</w-segments-vertical>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WSegmentsVertical: {
items: [
{
valueStart: 1979,
valueEnd: 1985,
text: "Myriel",
type: "Audience",
icon: "mdi-stack-overflow"
},
{
valueStart: 1986,
valueEnd: 1992,
text: "Napoleon",
type: "Audience",
icon: "mdi-book-music-outline"
},
{
valueStart: 1995,
valueEnd: 2000,
text: "MlleBaptistine",
type: "Conversions",
icon: "mdi-charity"
},
{
valueStart: 2001,
valueEnd: 2007,
text: "MmeMagloire",
type: "Management",
icon: "mdi-lightbulb-group-outline"
},
{
valueStart: 2009,
valueEnd: 2012,
text: "CountessDeLo",
type: "Conversions",
icon: "mdi-message-cog-outline"
},
{
valueStart: 2013,
valueEnd: 2015,
text: "Geborand",
type: "Actions",
icon: "mdi-gesture-double-tap"
},
{
valueStart: 2017,
valueEnd: 2018,
text: "Champtercier",
type: "Actions",
icon: "mdi-pencil-outline"
},
{
valueStart: 2018,
valueEnd: 2020,
text: "Cravatte",
type: "Management",
icon: "mdi-lightbulb-on-outline"
}
],
itemsConti: [
{
valueStart: 1979,
valueEnd: 1985,
text: "Myriel",
type: "Audience",
icon: "mdi-stack-overflow"
},
{
valueStart: 1985,
valueEnd: 1992,
text: "Napoleon",
type: "Audience",
icon: "mdi-book-music-outline"
},
{
valueStart: 1992,
valueEnd: 2000,
text: "MlleBaptistine",
type: "Conversions",
icon: "mdi-charity"
},
{
valueStart: 2000,
valueEnd: 2007,
text: "MmeMagloire",
type: "Management",
icon: "mdi-lightbulb-group-outline"
},
{
valueStart: 2007,
valueEnd: 2012,
text: "CountessDeLo",
type: "Conversions",
icon: "mdi-message-cog-outline"
},
{
valueStart: 2012,
valueEnd: 2015,
text: "Geborand",
type: "Actions",
icon: "mdi-gesture-double-tap"
},
{
valueStart: 2015,
valueEnd: 2018,
text: "Champtercier",
type: "Actions",
icon: "mdi-pencil-outline"
},
{
valueStart: 2018,
valueEnd: 2020,
text: "Cravatte",
type: "Management",
icon: "mdi-lightbulb-on-outline"
}
],
itemsDepth: [
{
depthStart: 0,
depthEnd: 0.6,
kind: "Sand"
},
{
depthStart: 1,
depthEnd: 1.4,
kind: "Clay"
},
{
depthStart: 1.6,
depthEnd: 2.4,
kind: "Silt"
},
{
depthStart: 2.7,
depthEnd: 3.2,
kind: "Sand"
},
{
depthStart: 3.5,
depthEnd: 4.7,
kind: "Clay"
},
{
depthStart: 5,
depthEnd: 5.3,
kind: "Silt"
},
{
depthStart: 5.6,
depthEnd: 6,
kind: "Sand"
},
{
depthStart: 6.7,
depthEnd: 7.2,
kind: "Clay"
}
],
itemLayers: [
{
depthStart: 0,
depthEnd: 2.3,
code: "106",
description: "Gray Clay"
},
{
depthStart: 2.3,
depthEnd: 5.3,
code: "106",
description: "Brownish Yellow Clay"
},
{
depthStart: 5.3,
depthEnd: 9.2,
code: "224",
description: "Gray Medium Sand"
},
{
depthStart: 9.2,
depthEnd: 14.4,
code: "106",
description: "Grayish Brown Clay"
},
{
depthStart: 14.4,
depthEnd: 32.4,
code: "106",
description: "Gray Clay"
},
{
depthStart: 32.4,
depthEnd: 37.1,
code: "106",
description: "Gray Clay with Fine Sand"
},
{
depthStart: 37.1,
depthEnd: 41.2,
code: "106",
description: "Gray Clay"
},
{
depthStart: 41.2,
depthEnd: 45.1,
code: "225",
description: "Gray Fine Sand"
},
{
depthStart: 45.1,
depthEnd: 46.7,
code: "106",
description: "Gray Clay"
}
]
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
getSegmentBackgroundColor: function(item) {
// console.log('getSegmentBackgroundColor', item)
let kp = {
Audience: "#ffb13e",
Conversions: "#a2cf70",
Management: "#4ac2fd",
Actions: "#9f77ff"
};
let c = kp[item.type];
return c;
},
getSegmentBackgroundIcon: function(item) {
// console.log('getSegmentBackgroundIcon', item)
let kp = window.dataCivilSoilCodeIcon;
let bgicon = kp[item.code];
// console.log('bgicon', bgicon)
return bgicon;
},
getSegmentBorderColor: function(item) {
// console.log('getSegmentBorderColor', item)
let kp = {
Audience: "#FF9800",
Conversions: "#8BC34A",
Management: "#039BE5",
Actions: "#651FFF"
};
let c = kp[item.type];
return c;
},
clickText: function(msg) {
console.log("clickText", msg);
},
clickSegment: function(msg) {
console.log("clickSegment", msg);
}
}
});
</script>
</body>
</html>