w-component-vue
Version:
A simple component for vue(vue2).
702 lines (672 loc) • 19.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-explorer</span>
</div>
<div class="bk">
<div class="item">treeItemRippleColor</div>
<w-explorer
style="width:600px; height:250px;"
:items="WExplorer.fps"
:tree-item-ripple-color="'rgba(130, 180, 255, 0.4)'"
></w-explorer>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WExplorer: {
bShowTree: true,
treeWidth: 275,
funSortTree: null,
fps: [
{
type: "file",
path: "/Applications/Calendar.app",
size: "256.5mb",
tester: "Perter",
priority: "L4"
},
{
type: "file",
path: "/Applications/Chrome.app",
size: "496.7mb",
tester: "Chloe",
priority: "L4"
},
{
type: "file",
path: "/Applications/Webstorm.app",
size: "128.6mb",
tester: "Adrian",
priority: "L4"
},
{
type: "folder",
path: "/Applications/Webs",
size: "",
tester: "",
priority: ""
},
{
type: "file",
path: "/Applications/Webs/web_infors.json",
size: "92.2kb",
tester: "Carl",
priority: "L3"
},
{
type: "file",
path: "/Applications/Webs/Shareco/shareco-s1.txt",
size: "5.4kb",
tester: "Charissa",
priority: "L4"
},
{
type: "file",
path: "/Applications/Webs/Shareco/shareco-s2.txt",
size: "7.3kb",
tester: "Dexter",
priority: "L4"
},
{
type: "folder",
path: "/Applications/Webs/Guess",
size: "",
tester: "",
priority: ""
},
{
type: "file",
path: "/Applications/Webs/Guess/guess-s3.txt",
size: "21.6kb",
tester: "Ashley",
priority: "L4"
},
{
type: "file",
path: "/Applications/Webs/Guess/guess-s4.txt",
size: "82.7kb",
tester: "Dwight",
priority: "L4"
},
{
type: "file",
path: "/Applications//Systems/Regulator.ini",
size: "2.5kb",
tester: "Laura",
priority: "L5"
},
{
type: "file",
path: "/Applications/Systems/Regulator/vers/1-settings.st",
size: "56.2kb",
tester: "Mavis",
priority: "L5"
},
{
type: "file",
path: "/Applications/Systems/Regulator/vers/2-settings.st",
size: "87.2kb",
tester: "Geraint",
priority: "L5"
},
{
type: "file",
path: "/Applications/Systems/Regulator/vers/3-settings.st",
size: "224.2kb",
tester: "Penelope",
priority: "L5"
},
{
type: "file",
path: "/Applications/Systems/Regulator/vers/10-settings.st",
size: "72.7kb",
tester: "Heman",
priority: "L5"
},
{
type: "file",
path: "/Applications/Systems/Regulator/vers/111-settings.st",
size: "91.2kb",
tester: "Tessa",
priority: "L5"
},
{
type: "file",
path: "/Applications//Systems/device1.iso",
size: "1.2gb",
tester: "Una",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device2.iso",
size: "1.3gb",
tester: "Jasper",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device3.iso",
size: "1.1gb",
tester: "Violet",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device4.iso",
size: "1.7gb",
tester: "Perter",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device5.iso",
size: "2.0gb",
tester: "Winifred",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device6.iso",
size: "1.7gb",
tester: "Lance",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device7.iso",
size: "2.1gb",
tester: "Marvin",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device8.iso",
size: "1.5gb",
tester: "Nat",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device9.iso",
size: "1.8gb",
tester: "Nahum",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device10.iso",
size: "1.6gb",
tester: "Nicholas",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device11.iso",
size: "1.2gb",
tester: "Ralph",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device12.iso",
size: "2.2gb",
tester: "Rudolph",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device13.iso",
size: "1.9gb",
tester: "Rory",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device14.iso",
size: "1.2gb",
tester: "Jacqueline",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device15.iso",
size: "1.7gb",
tester: "Kathy",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device16.iso",
size: "1.1gb",
tester: "Melinda",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device17.iso",
size: "1.9gb",
tester: "Sharon",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device18.iso",
size: "1.2gb",
tester: "Philippa",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device19.iso",
size: "1.5gb",
tester: "Thelma",
priority: "L2"
},
{
type: "file",
path: "/Applications//Systems/device20.iso",
size: "1.4gb",
tester: "Stewart",
priority: "L2"
},
{
type: "file",
path: "/Documents/design-simple/src/index.txt",
size: "6.7kb",
tester: "Steve",
priority: "L1"
},
{
type: "file",
path: "/Documents/design-simple/src/bootstrap.txt",
size: "251.7kb",
tester: "Theobald",
priority: "L1"
},
{
type: "file",
path: "/Documents/design-material/src/btn.txt",
size: "241.2b",
tester: "Padraic",
priority: "L1"
},
{
type: "file",
path: "/Documents/design-material/src/card.txt",
size: "4.7kb",
tester: "Napoleon",
priority: "L1"
},
{
type: "file",
path: "/Documents/design-material/src/window.txt",
size: "7.2kb",
tester: "Lionel",
priority: "L1"
},
{
type: "file",
path: "/Downloads/October.pdf",
size: "16.9kb",
tester: "Olive",
priority: "L1"
},
{
type: "file",
path: "/Downloads/November.pdf",
size: "94.5kb",
tester: "Molly",
priority: "L1"
},
{
type: "file",
path: "/Downloads/Tutorial.html",
size: "22.7kb",
tester: "Melanie",
priority: "L1"
},
{
type: "folder",
path: "/Uploads",
size: "",
tester: "",
priority: ""
},
{
type: "file",
path: "/Videos/Tutorials/Basic layouts.mp4",
size: "862.7mb",
tester: "Lindsay",
priority: "L3"
},
{
type: "file",
path: "/Videos/Tutorials/Advanced techniques.mp4",
size: "626.5mb",
tester: "Jarvis",
priority: "L3"
},
{
type: "file",
path: "/Videos/Tutorials/All about app.mp4",
size: "796.2mb",
tester: "Gaston",
priority: "L3"
},
{
type: "file",
path: "/Videos/Intro.mov",
size: "852.8mb",
tester: "Dermot",
priority: "L3"
},
{
type: "file",
path: "/Videos/Conference introduction.avi",
size: "676.7mb",
tester: "Hector",
priority: "L3"
},
{
type: "folder",
path: "/Videos/Empty",
size: "",
tester: "",
priority: ""
}
]
},
actions: [
{
mode: "eleclick",
selector: 'span[class="v-chip__content"]'
}
]
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
ckItem: function(msg) {
console.log("ckItem", msg);
},
ckFolder: function(msg) {
console.log("ckFolder", msg);
},
ckFile: function(msg) {
console.log("ckFile", msg);
},
toggleTreeFoldersByFun: function(ind, toUnfolding) {
console.log("toggleTreeFoldersByFun", ind, toUnfolding);
let vo = this;
//toggleTreeFoldersByFun
vo.$refs.ref_toggleTreeFoldersByFun.toggleTreeFoldersByFun(rows => {
console.log("toggleTreeFoldersByFun rows", rows);
return {
row: rows[ind],
toUnfolding
};
});
},
toggleTreeFoldersAll: function(toUnfolding, toLevel) {
console.log("toggleTreeFoldersAll", toUnfolding, toLevel);
let vo = this;
//toggleTreeFoldersAll
vo.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(
toUnfolding,
toLevel
);
},
ckTriggerClickTreeFolderById: function(treeItemId) {
console.log("ckTriggerClickTreeFolderById", treeItemId);
let vo = this;
//triggerClickTreeFolderById
vo.$refs.we_triggerClickTreeFolderById.triggerClickTreeFolderById(
treeItemId
);
},
ckTriggerClickTreeFolderByFun: function(text) {
console.log("ckTriggerClickTreeFolderByFun", text);
let vo = this;
//triggerClickTreeFolderByFun
vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderByFun(
msg => {
console.log("cb msg", msg);
//find and triggerClickTreeFolderById
for (let k = 0; k < msg.treeItemsSpread.length; k++) {
let v = msg.treeItemsSpread[k];
// console.log(v)
if (v.text === text) {
console.log("find and click", v);
// vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderById(v.id)
// break
return v;
}
}
return null;
}
);
},
ckFunSortTree: function(m) {
console.log("ckFunSortTree", m);
let vo = this;
//fun
let fun = rs => {
console.log("rs", rs);
rs.reverse();
return rs;
};
//funSortTree
if (m === "default") {
vo.WExplorer.funSortTree = null;
} else {
vo.WExplorer.funSortTree = fun;
}
},
getFolderInfor: function(props) {
console.log("getFolderInfor", props);
let kfd = 0;
let kfl = 0;
for (let i = 0; i < props.items.length; i++) {
let v = props.items[i];
let t = v.data._type;
if (t === "folder") {
kfd++;
} else if (t === "file") {
kfl++;
}
}
return `There are ${kfd} folder(s) and ${kfl} file(s) in this folder`;
},
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 = "new-" + id;
let dataNew = {
// id: '',
text,
type: "folder",
// path: '',
size: "test",
tester: "test",
priority: "test"
};
resolve(dataNew);
});
};
//targetInd
let targetInd = msg.rowItem.index;
//operateItem
msg.operateItem(targetInd, msg.opItem.key, fun);
},
changeItem: function(msg) {
console.log("changeItem", msg);
}
}
});
</script>
</body>
</html>