w-component-vue
Version:
A simple component for vue(vue2).
352 lines (333 loc) • 13.6 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-popup</span>
</div>
<div class="bk">
<div class="item">in popup</div>
<w-popup v-model="WPopup.bShow19a" @show="evShow" @hide="evHide">
<template v-slot:trigger>
<v-btn
depressed
small
elevation="2"
>Show({{WPopup.bShow19a}})</v-btn>
</template>
<template v-slot:content>
<div style="padding:40px;">
<div
style="font-size:0.8rem; white-space:nowrap;"
>Here is 1st pupop.</div>
<w-popup
v-model="WPopup.bShow19b"
@show="evShow"
@hide="evHide"
>
<template v-slot:trigger>
<v-btn
depressed
small
elevation="2"
>Show({{WPopup.bShow19b}})</v-btn>
</template>
<template v-slot:content>
<div style="padding:40px;">
<div
style="font-size:0.8rem; white-space:nowrap;"
>Here is 2nd pupop.</div>
<div
style="font-size:0.7rem; white-space:nowrap; color:#f26;"
>It will close when click to the outside of the content of 1st pupop.</div>
<w-popup
style="margin-bottom:20px;"
v-model="WPopup.bShow19c"
@show="evShow"
@hide="evHide"
>
<template v-slot:trigger>
<v-btn
depressed
small
elevation="2"
>Show({{WPopup.bShow19c}})</v-btn>
</template>
<template v-slot:content>
<div
style="padding:10px 15px 0px 15px;"
>
<div
style="font-size:0.8rem; white-space:nowrap;"
>Here is 3rd pupop.</div>
<div
style="font-size:0.7rem; white-space:nowrap; color:#f26;"
>It will close when click to the outside of the content of 1st or 2st pupop.</div>
</div>
<v-list
style="background:transparent;"
>
<v-list-item
style="min-height:inherit; padding:5px 15px;"
:key="kitem"
@click="function(){}"
v-for="(item,kitem) in WPopup.items"
>Item {{item}}</v-list-item>
</v-list>
</template>
</w-popup>
</div>
</template>
</w-popup>
</div>
</template>
</w-popup>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WPopup: {
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: ["foo", "bar", "fizz", "buzz"],
itemsExpand: ["foo", "bar", "fizz", "buzz"],
itemsL: [
"Lorem ipsum",
"Met consectetur",
"Aquis praesentium",
"Quis praesentium"
],
text:
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.",
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.WPopup.bShow2 = false;
}, 200);
},
expandItem: function() {
let vo = this;
setTimeout(function() {
vo.WPopup.itemsExpand = [
"Lorem ipsum dolor sit, amet consectetur",
"bar",
"fizz",
"buzz"
];
}, 1000);
setTimeout(function() {
vo.WPopup.itemsExpand = ["foo", "bar", "fizz", "buzz"];
}, 3000);
}
}
});
</script>
</body>
</html>