w-component-vue
Version:
A simple component for vue(vue2).
570 lines (551 loc) • 20.5 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-json-view</span>
</div>
<div class="bk">
<div class="item">toggleItemsByFun</div>
<div>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(0, true)"
>show(rows[0])</v-btn>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(0, false)"
>hide(rows[0])</v-btn>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(6, true)"
>show(rows[6])</v-btn>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(6, false)"
>hide(rows[6])</v-btn>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(9, true)"
>show(rows[9])</v-btn>
<v-btn
style="margin:0px 5px 5px 0px;"
small
@click="toggleItemsByFun(9, false)"
>hide(rows[9])</v-btn>
</div>
<w-json-view
ref="ref_toggleItemsByFun"
style="width:350px; border:1px solid #ddd;"
:data="WJsonView.data3"
:view-height-max="WJsonView.viewHeightMaxSync"
></w-json-view>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WJsonView: {
viewHeightMaxSync: 400,
keywords: "ci uadn",
data1: {
squadName: "Super hero squad",
homeTown: "Metro City",
formed: 2016,
secretBase: "Super tower",
active: true,
arrayEmpth: [],
members: [
{
name:
"There are many variations of passages of Lorem Ipsum available",
age: 29,
secretIdentity: "Dan Jukes",
powers: [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
name: "Madame Uppercut",
age: 39,
secretIdentity: "Jane Wilson",
powers: [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
name: "Eternal Flame",
age: 1000000,
secretIdentity: "Unknown",
powers: [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
},
data2: {
cookie:
'username-localhost-8888="2|1:0|10:1624431350|23:username-localhost-8888|44:ZmMxYzkwOGI0ODYxNDY1M2ExY2VhOGE3MmFhNWE4M2Y=|f8840028a36433a4e69e67f7eae6d188994203da2f54fe8af55d3e815f5cad0f',
homeTown: "Metro City",
formed: 2016,
secretBase: "Super tower",
active: true,
arrayEmpth: [],
members: [
{
name:
"There are many variations of passages of Lorem Ipsum available",
age: 29,
secretIdentity: "Dan Jukes",
powers: [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
name: "Madame Uppercut",
age: 39,
secretIdentity: "Jane Wilson",
powers: [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
name: "Eternal Flame",
age: 1000000,
secretIdentity: "Unknown",
powers: [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
},
data3: [
"squadName",
123,
45.678,
"Super hero squad",
"[system::callfunc]abc",
{
homeTown: "Metro City",
formed: 2016,
powers: [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
],
members: {
name: "Molecule Man",
age: 29,
secretIdentity: "Dan Jukes"
}
}
],
data4: (function(a) {
a /= 200;
a = Math.max(a, 1);
let b = {
ph1_a: 123,
ph1_b: 45.67,
ph1_c: "123.456",
ph1_d:
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
ph1_e: !0,
ph1_g: "[system::callfunc]abc",
ph1_h: [],
ph1_j: {},
ph1_k: {
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
},
ph1_l: [
123,
45.67,
"123.456",
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
!0,
!1,
"[system::callfunc]abc",
{
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
}
],
ph1_z: {
ph2_a: 123,
ph2_b: 45.67,
ph2_c: "123.456",
ph2_d:
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
ph2_e: !0,
ph2_g: "[system::callfunc]abc",
ph2_h: [],
ph2_j: {},
ph2_k: {
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
},
ph2_l: [
123,
45.67,
"123.456",
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
!0,
!1,
"[system::callfunc]abc",
{
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
}
],
ph2_z: {
ph3_a: 123,
ph3_b: 45.67,
ph3_c: "123.456",
ph3_d:
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
ph3_e: !0,
ph3_g: "[system::callfunc]abc",
ph3_h: [],
ph3_j: {},
ph3_k: {
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
},
ph3_l: [
123,
45.67,
"123.456",
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
!0,
!1,
"[system::callfunc]abc",
{
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
}
],
ph3_z: {
ph4_a: 123,
ph4_b: 45.67,
ph4_c: "123.456",
ph4_d:
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
ph4_e: !0,
ph4_g: "[system::callfunc]abc",
ph4_h: [],
ph4_j: {},
ph4_k: {
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
},
ph4_l: [
123,
45.67,
"123.456",
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
!0,
!1,
"[system::callfunc]abc",
{
a: 321,
b: 76.54,
c: "654.321",
d: "321 zyx",
e: !0,
f: [],
g: {}
}
],
ph4_z: {
ph5_a: 123,
ph5_b: 45.67,
ph5_c: "123.456",
ph5_d:
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
ph5_e: !0,
ph5_f: !1,
ph5_g: "[system::callfunc]abc",
ph5_h: [],
ph5_j: {},
ph5_l: [
123,
45.67,
"123.456",
"Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.",
!0,
!1,
"[system::callfunc]abc",
{ a: 321, b: 76.54, c: "654.321", d: "321 zyx" }
]
}
}
}
}
};
let c = [];
for (let d = 0; d < a; d++) c.push(b);
return c;
})(20000) //9000000 100000 50000 20000 10000 5000 1000 100 10
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
changeViewItems: function(msg) {
console.log("changeViewItems", msg);
},
changeHeightOfItems: function(msg) {
console.log("changeHeightOfItems", msg);
},
funFilter: function(item, kws) {
console.log("funFilter", item, kws);
if (!item.text) {
//若無text則跳出, 若要偵測父層節點得要針對key額外處理
return false;
}
let c = String(item.text).toLowerCase();
let b = false;
for (let i = 0; i < kws.length; i++) {
let kw = kws[i];
b = b || c.indexOf(kw) >= 0;
}
return b;
},
toggleItemsByFun: function(ind, toUnfolding) {
console.log("toggleItemsByFun", ind, toUnfolding);
let vo = this;
//toggleItemsByFun
vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
console.log("toggleItemsByFun rows", rows);
return {
row: rows[ind],
toUnfolding
};
});
},
toggleItemsAll: function(toUnfolding) {
console.log("toggleItemsAll", toUnfolding);
let vo = this;
//toggleItemsAll
vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
}
}
});
</script>
</body>
</html>