w-component-vue
Version:
A simple component for vue(vue2).
293 lines (277 loc) • 10.7 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 -->
<!-- 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/res/data/dataAAPL.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataHousePriceArea.js"
></script>
<script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataFlare.js"></script>
<script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRain.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.81/dist/w-component-vue.umd.js"></script>
<style>
/* 組件所須全域樣式 */
.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-tooltip</span>
</div>
<div class="bk">
<div class="item">auto flipping in popup</div>
<w-popup v-model="WTooltip.bShow20a" @show="evShow" @hide="evHide">
<template v-slot:trigger>
<w-button-chip
:text="'show('+WTooltip.bShow20a+')'"
:border-radius="4"
@click="WTooltip.bShow20a=!WTooltip.bShow20a"
></w-button-chip>
</template>
<template v-slot:content>
<div style="padding:40px;">
<w-tooltip
v-model="WTooltip.bShow20b"
@show="evShow();expandItem()"
@hide="evHide"
>
<template v-slot:trigger>
<w-button-chip
:text="'show('+WTooltip.bShow20b+')'"
:border-radius="4"
@click="expandItem"
></w-button-chip>
</template>
<template v-slot:content>
<w-list-vertical
style="height:148px;"
:padding-style="{v:8,h:15}"
:item-text-color="'#fff'"
:item-text-color-hover="'#fff'"
:item-text-color-active="'#fff'"
:item-background-color="'transparent'"
:enable-active="false"
:items="WTooltip.itemsExpand"
></w-list-vertical>
</template>
</w-tooltip>
</div>
</template>
</w-popup>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
data: function() {
return {
WTooltip: {
bShow1: false,
bShow2: false,
bShow3: false,
bShow4: false,
bShow5: false,
bShow6: false,
bShow7: false,
bShow8: false,
bShow9: false,
bShow10: false,
bShow11: false,
bShow12: false,
bShow13: false,
bShow14: false,
bShow15: false,
bShow16a: false,
bShow16b: false,
bShow16c: false,
bShow16d: false,
bShow16e: false,
bShow16f: false,
bShow16g: false,
bShow16h: false,
bShow16i: false,
bShow16j: false,
bShow16k: false,
bShow16l: false,
bShow17: false,
bShow18: false,
bShow19a: false,
bShow19b: false,
bShow19c: false,
bShow20a: false,
bShow20b: false,
bShow21a: false,
bShow21b: false,
bShow22: false,
bShow23: false,
items: ["Item foo", "Item bar", "Item fizz", "Item buzz"],
itemsExpand: ["Item foo", "Item bar", "Item fizz", "Item buzz"],
text:
"Lorem ipsum met consectetur adipisicing elit 中文測試 aquis praesentium cumque magnam odio iure quidem",
textShort: "Lorem 中文測試",
textL1: "Lorem ipsum",
textL2: "Met consectetur",
textL3: "Aquis praesentium",
table:
'\n<table style="width:100%; font-size:0.7rem; border-collapse:collapse;">\n <thead>\n <tr>\n <th style="padding:2px 8px; text-align:left;">Dessert</th>\n <th style="padding:2px 8px; text-align:left;">Calories</th>\n <th style="padding:2px 8px; text-align:left;">Fat</th>\n <th style="padding:2px 8px; text-align:left;">Carbs</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">Frozen Yogurt</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">159</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">6</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">24</td>\n </tr>\n <tr>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">Ice cream sandwich</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">237</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">9</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">37</td>\n </tr>\n <tr>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">Eclair</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">262</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">16</td>\n <td style="padding:2px 8px; border-top:1px solid #ddd;">23</td>\n </tr>\n </tbody>\n </table>\n'
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
evShow: function() {
console.log("evShow");
},
evHide: function() {
console.log("evHide");
},
clickHide: function() {
let vo = this;
setTimeout(function() {
vo.WTooltip.bShow2 = false;
}, 200);
},
expandItem: function() {
let vo = this;
setTimeout(function() {
vo.WTooltip.itemsExpand = [
"Lorem ipsum dolor sit, amet consectetur",
"bar",
"fizz",
"buzz"
];
}, 1000);
setTimeout(function() {
vo.WTooltip.itemsExpand = [
"Item foo",
"Item bar",
"Item fizz",
"Item buzz"
];
}, 3000);
}
}
});
</script>
</body>
</html>