w-component-vue
Version:
A simple component for vue(vue2).
725 lines (698 loc) • 27.8 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-tree</span>
</div>
<div class="bk">
<div class="item">operatable & draggable</div>
<div
style="margin-bottom:5px; color:#f26; font-size:0.8rem;"
>* Disable show and hide nodes when using operatable or draggable</div>
<w-tree
style="width:350px; border:1px solid #ddd;"
:data.sync="WTree.option.items"
:draggable="true"
:operatable="true"
@click-operate-item="clickOperateItem"
@update:data="changeData"
@change-item="changeItem"
></w-tree>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WTree: {
viewHeightMaxSync: 400,
option: {
keywords: "abr care att",
selections: [
{ id: 5 },
{ id: 9 },
{ id: 18 }
//勾選id:18會自動再加入id:19
],
itemActive: {
id: 4
},
items: [
{
id: 1,
text: "Satisfied customers",
// text: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi',
avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
children: [
{
id: 2,
text: "Good food",
icon: "fas fa-utensils",
children: [
{
id: 3,
text: "Quality ingredients",
children: [
{
id: 4,
text: "Character",
key: "Genus",
msg:
"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."
},
{
id: 5,
text: "Fabric",
key: "Genus",
msg:
"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."
}
]
},
{
id: 6,
text: "Good recipe",
key: "Family",
msg:
"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."
}
]
},
{
id: 7,
text: "Good service",
icon: "fas fa-concierge-bell",
children: [
{
id: 8,
text: "Prompt attention",
key: "Order",
msg:
"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."
},
{
id: 9,
text: "Professional waiter",
key: "Order",
msg:
"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."
}
]
},
{
id: 10,
text: "Pleasant surroundings",
icon: "fas fa-camera-retro",
children: [
{
id: 11,
text: "Happy atmosphere",
key: "Class",
msg:
"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."
},
{
id: 12,
text: "Good table presentation",
key: "Class",
msg:
"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."
},
{
id: 13,
text: "Pleasing decor",
key: "Class",
msg:
"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."
}
]
}
]
},
{
id: 14,
text: "Others customers",
avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
children: [
{
id: 15,
text: "Conformance to requirements",
key: "Phylum"
},
{
id: 16,
text: "Fitness for use",
children: [
{
id: 17,
text: "Refers",
key: "Expanded",
msg:
"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."
}
]
},
{
id: 18,
text: "Need to care",
children: [
{
id: 19,
text: "Models",
key: "Disables",
msg:
"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."
}
]
}
]
}
]
},
optionKeys: {
items: [
{
sid: "s1",
name: "Applications :",
packages: [
{ sid: "s2", name: "Calendar : app" },
{ sid: "s3", name: "Chrome : app" },
{ sid: "s4", name: "Webstorm : app" }
]
},
{
sid: "s5",
name: "Documents :",
packages: [
{
sid: "s6",
name: "vuetify :",
packages: [
{
sid: "s7",
name: "src :",
packages: [
{ sid: "s8", name: "index : ts" },
{ sid: "s9", name: "bootstrap : ts" }
]
}
]
},
{
sid: "s10",
name: "material2 :",
packages: [
{
sid: "s11",
name: "src :",
packages: [
{ sid: "s12", name: "t-btn : ts" },
{ sid: "s13", name: "t-card : ts" },
{ sid: "s14", name: "t-window : ts" }
]
}
]
}
]
},
{
sid: "s15",
name: "Downloads :",
packages: [
{ sid: "s16", name: "October : pdf" },
{ sid: "s17", name: "November : pdf" },
{ sid: "s18", name: "Tutorial : html" }
]
},
{
sid: "s19",
name: "Videos :",
packages: [
{
sid: "s20",
name: "Tutorials :",
packages: [
{ sid: "s21", name: "Basic layouts : mp4" },
{ sid: "s22", name: "Advanced techniques : mp4" },
{ sid: "s23", name: "All about app : dir" }
]
},
{ sid: "s24", name: "Intro : mov" },
{ sid: "s25", name: "Conference introduction : avi" }
]
}
]
},
optionLocked: {
selections: [
{ id: 5 },
{ id: 9 },
{ id: 18 }
//勾選id:18會自動再加入id:19
],
items: [
{
id: 1,
text: "Satisfied customers",
avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
children: [
{
id: 2,
locked: true,
text: "Good food",
icon: "fas fa-utensils",
children: [
{
id: 3,
text: "Quality ingredients",
children: [
{
id: 4,
locked: true,
text: "Character",
key: "Genus",
msg:
"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."
},
{
id: 5,
text: "Fabric",
key: "Genus",
msg:
"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."
}
]
},
{
id: 6,
text: "Good recipe",
key: "Family",
msg:
"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."
}
]
},
{
id: 7,
text: "Good service",
icon: "fas fa-concierge-bell",
children: [
{
id: 8,
text: "Prompt attention",
key: "Order",
msg:
"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."
},
{
id: 9,
text: "Professional waiter",
key: "Order",
msg:
"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."
}
]
},
{
id: 10,
text: "Pleasant surroundings",
icon: "fas fa-camera-retro",
children: [
{
id: 11,
text: "Happy atmosphere",
key: "Class",
msg:
"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."
},
{
id: 12,
text: "Good table presentation",
key: "Class",
msg:
"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."
},
{
id: 13,
text: "Pleasing decor",
key: "Class",
msg:
"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."
}
]
}
]
},
{
id: 14,
text: "Others customers",
avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
children: [
{
id: 15,
text: "Conformance to requirements",
key: "Phylum"
},
{
id: 16,
text: "Fitness for use",
children: [
{
id: 17,
text: "Refers",
key: "Expanded",
msg:
"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."
}
]
},
{
id: 18,
text: "Need to care",
children: [
{
id: 19,
text: "Models",
key: "Disables",
msg:
"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."
}
]
}
]
}
]
},
optionLarge: {
selections: [],
items: (function(n) {
n /= 20;
let msg =
"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.";
let cItems =
'{"id":"{n+1}","text":"Satisfied customers","avatar":"https://cdn.vuetifyjs.com/images/lists/1.jpg","children":[{"id":"{n+2}","text":"Good food","icon":"fas fa-utensils","children":[{"id":"{n+3}","text":"Quality ingredients","children":[{"id":"{n+4}","text":"Character","key":"Genus","msg":"{msg}"},{"id":"{n+5}","text":"Fabric","key":"Genus","msg":"{msg}"}]},{"id":"{n+6}","text":"Good recipe","key":"Family","msg":"{msg}"}]},{"id":"{n+7}","text":"Good service","icon":"fas fa-concierge-bell","children":[{"id":"{n+8}","text":"Prompt attention","key":"Order","msg":"{msg}"},{"id":"{n+9}","text":"Professional waiter","key":"Order","children":[{"id":"{n+10}","text":"Others customers","avatar":"https://cdn.vuetifyjs.com/images/lists/2.jpg","children":[{"id":"{n+11}","text":"Conformance to requirements","key":"Phylum"},{"id":"{n+12}","text":"Fitness for use","children":[{"id":"{n+13}","text":"Refers","key":"Expanded","msg":"{msg}"}]},{"id":"{n+14}","text":"Need to care","children":[{"id":"{n+15}","text":"Models","key":"Disables","msg":"{msg}"}]}]}]}]},{"id":"{n+16}","text":"Pleasant surroundings","icon":"fas fa-camera-retro","children":[{"id":"{n+17}","text":"Happy atmosphere","key":"Class","msg":"{msg}"},{"id":"{n+18}","text":"Good table presentation","key":"Class","msg":"{msg}"},{"id":"{n+19}","text":"Pleasing decor","key":"Class","msg":"{msg}"},{"id":"{n+20}","text":"Special experience","key":"Class","msg":"{msg}"}]}]}';
function getOneObj(j) {
let t = cItems;
t = t.replace(new RegExp("{msg}", "g"), msg);
for (let i = 1; i <= 20; i++) {
t = t.replace("{n+".concat(i, "}"), "".concat(j + i));
}
return JSON.parse(t);
}
let rs = [];
for (let j = 0; j < n; j++) {
let r = getOneObj(j * 20);
rs.push(r);
}
return rs;
})(100000) //1000000, 100000, 1000
}
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
showSelection: function(selections) {
let ss = {};
for (let i = 0; i < selections.length; i++) {
let s = JSON.parse(JSON.stringify(selections[i]));
delete s.msg;
let id = parseInt(s.id, 10); //原本為字串, 轉成整數
ss[id] = s;
}
let t = [];
Object.keys(ss)
.sort(function(a, b) {
return a - b;
})
.forEach(function(key) {
t.push(ss[key]);
});
return t;
},
mouseenter: function(msg) {
console.log("mouseenter", msg);
msg.ele.style.transition = "all 0.3s";
msg.ele.style.background = "#f0f0f0";
//msg.ele.style.color = '#fff'
},
mouseleave: function(msg) {
console.log("mouseleave", msg);
msg.ele.style.background = "rgba(255, 255, 255, 0)";
//msg.ele.style.color = 'black'
},
click: function(msg) {
console.log("click", msg);
},
render: function(msg) {
console.log("render", msg);
},
clickActive: function(msg) {
console.log("clickActive", msg);
},
funActive: function(msg) {
console.log("funActive", msg);
return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
},
changeData: function(msg) {
console.log("changeData", msg);
},
changeSelections: function(msg) {
console.log("changeSelections", msg);
},
changeViewItems: function(msg) {
console.log("changeViewItems", msg);
},
changeHeightOfItems: function(msg) {
console.log("changeHeightOfItems", msg);
},
changeItem: function(msg) {
console.log("changeItem", msg);
},
funOperateItem: function(msg) {
console.log("funOperateItem", msg);
return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
},
clickOperateItem: function(msg) {
console.log("clickOperateItem", msg);
//fun, 僅處理並回傳新項目, 不處理其他項目
let fun = function() {
return new Promise(function(resolve, reject) {
let id = Math.floor(Math.random() * 1000);
let text = "node-" + id; //msg.rowItem.row.item.text + '-' + msg.opItem.key
let dataNew = {
id,
text
};
resolve(dataNew);
});
};
//targetInd
let targetInd = msg.rowItem.index;
//operateItem
msg.operateItem(targetInd, msg.opItem.key, fun);
},
modifyText: function(msg) {
console.log("modifyText", msg);
//setDataByPathAndValue
let setDataByPathAndValue = msg.props.setDataByPathAndValue;
//path add keyText
let path = msg.props.data.nk;
path.push(msg.props.keyText);
//value
let value = msg.value;
//data
let data = msg.data;
//setDataByPathAndValue
setDataByPathAndValue(data, path, value);
},
funFilter: function(item, kws) {
console.log("funFilter", item, kws);
let c = 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, toLevel) {
console.log("toggleItemsAll", toUnfolding, toLevel);
let vo = this;
//toggleItemsAll
vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding, toLevel);
}
}
});
</script>
</body>
</html>