w-component-vue
Version:
A simple component for vue(vue2).
634 lines (617 loc) • 18.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-group-tags</span>
</div>
<div class="bk" style="display:block;">
<div class="item">enableNodata</div>
<w-group-tags v-model="WGroupTags.empty" :enable-nodata="true"></w-group-tags>
<div
style="padding-left:5px; font-size:0.9rem; color:#ea6;"
>binding: empty</div>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WGroupTags: {
strings: [
"Dashboard",
"Schedule",
"Profile",
"History",
"Map",
"聯絡方式"
],
stringActive: "Dashboard",
objects: [
{
id: "id-Dashboard",
text: "Dashboard"
},
{
id: "id-Schedule",
text: "Schedule"
},
{
id: "id-Profile",
text: "Profile"
},
{
id: "id-History",
text: "History"
},
{
id: "id-Map",
text: "Map"
},
{
id: "id-contact",
text: "聯絡方式"
}
],
objectsText: [
{
id: "id-Dashboard",
value: "cmDashboard"
},
{
id: "id-Schedule",
value: "cmSchedule"
},
{
id: "id-Profile",
value: "cmProfile"
},
{
id: "id-History",
value: "cmHistory"
},
{
id: "id-Map",
value: "cmMap"
},
{
id: "id-contact",
value: "cm聯絡方式"
}
],
objectsIcon: [
{
id: "id-Dashboard",
text: "Dashboard",
icon: "fab fa-accessible-icon"
},
{
id: "id-Schedule",
text: "Schedule",
icon: "fab fa-asymmetrik"
},
{
id: "id-Profile",
text: "Profile",
icon: "fas fa-baby"
},
{
id: "id-History",
text: "History",
icon: "fas fa-balance-scale"
},
{
id: "id-Map",
text: "Map",
icon: "fas fa-blender"
},
{
id: "id-contact",
text: "聯絡方式",
icon: "fas fa-hands-helping"
}
],
objectsTooltip: [
{
id: "id-Dashboard",
text: "Dashboard",
tooltip: "Dashboard for tooltip"
},
{
id: "id-Schedule",
text: "Schedule",
tooltip: "Schedule for tooltip"
},
{
id: "id-Profile",
text: "Profile",
tooltip: "Profile for tooltip"
},
{
id: "id-History",
text: "History",
tooltip: "History for tooltip"
},
{
id: "id-Map",
text: "Map",
tooltip: "Map for tooltip"
},
{
id: "id-contact",
text: "聯絡方式",
tooltip: "聯絡方式 for tooltip"
}
],
objectsSlotText: [
{
id: "id-Dashboard",
text: "Dashboard",
slotTextKind: "Efficacy",
slotTextLevel: "High"
},
{
id: "id-Schedule",
text: "Schedule",
slotTextKind: "Efficacy",
slotTextLevel: "Slow"
},
{
id: "id-Profile",
text: "Profile",
slotTextKind: "Basic",
slotTextLevel: "None"
},
{
id: "id-History",
text: "History",
slotTextKind: "Basic",
slotTextLevel: "None"
},
{
id: "id-Map",
text: "Map",
slotTextKind: "Efficacy",
slotTextLevel: "High"
},
{
id: "id-contact",
text: "聯絡方式",
slotTextKind: "Basic",
slotTextLevel: "None"
}
],
objectsSlotTextActive: {
id: "id-Dashboard",
text: "Dashboard",
slotTextKind: "Efficacy",
slotTextLevel: "High"
},
objectsColor: [
{
id: "id-Dashboard",
text: "Dashboard",
iconColor: "pink accent-3",
iconColorHover: "pink accent-3",
iconColorActive: "white",
textColor: "pink accent-3",
textColorHover: "pink accent-3",
textColorActive: "white",
borderColor: "pink accent-3",
borderColorHover: "pink accent-3",
borderColorActive: "pink accent-3",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "pink accent-3"
},
{
id: "id-Schedule",
text: "Schedule",
iconColor: "pink accent-3",
iconColorHover: "pink accent-3",
iconColorActive: "white",
textColor: "pink accent-3",
textColorHover: "pink accent-3",
textColorActive: "white",
borderColor: "pink accent-3",
borderColorHover: "pink accent-3",
borderColorActive: "pink accent-3",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "pink accent-3"
},
{
id: "id-Profile",
text: "Profile",
iconColor: "pink accent-3",
iconColorHover: "pink accent-3",
iconColorActive: "white",
textColor: "pink accent-3",
textColorHover: "pink accent-3",
textColorActive: "white",
borderColor: "pink accent-3",
borderColorHover: "pink accent-3",
borderColorActive: "pink accent-3",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "pink accent-3"
},
{
id: "id-History",
text: "History",
iconColor: "purple darken-1",
iconColorHover: "purple darken-1",
iconColorActive: "white",
textColor: "purple darken-1",
textColorHover: "purple darken-1",
textColorActive: "white",
borderColor: "purple darken-1",
borderColorHover: "purple darken-1",
borderColorActive: "purple darken-1",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "purple darken-1"
},
{
id: "id-Map",
text: "Map",
iconColor: "purple darken-1",
iconColorHover: "purple darken-1",
iconColorActive: "white",
textColor: "purple darken-1",
textColorHover: "purple darken-1",
textColorActive: "white",
borderColor: "purple darken-1",
borderColorHover: "purple darken-1",
borderColorActive: "purple darken-1",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "purple darken-1"
},
{
id: "id-contact",
text: "聯絡方式",
iconColor: "purple darken-1",
iconColorHover: "purple darken-1",
iconColorActive: "white",
textColor: "purple darken-1",
textColorHover: "purple darken-1",
textColorActive: "white",
borderColor: "purple darken-1",
borderColorHover: "purple darken-1",
borderColorActive: "purple darken-1",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "purple darken-1"
}
],
objectsColorActive: {
id: "id-Dashboard",
text: "Dashboard",
iconColor: "pink accent-3",
iconColorHover: "pink accent-3",
iconColorActive: "white",
textColor: "pink accent-3",
textColorHover: "pink accent-3",
textColorActive: "white",
borderColor: "pink accent-3",
borderColorHover: "pink accent-3",
borderColorActive: "pink accent-3",
backgroundColor: "white",
backgroundColorHover: "white",
backgroundColorActive: "pink accent-3"
},
suggestsStrings: ["Apple", "Orange", "Banana"],
suggestsObjects: [
{
id: "id-Apple",
text: "Apple",
kind: "Fruit"
},
{
id: "id-Monkey",
text: "Monkey",
kind: "Animal"
},
{
id: "id-Tulip",
text: "Tulip",
kind: "Plant"
}
],
suggestsObjectsName: [
{
id: "id-Apple",
name: "Apple",
kind: "Fruit"
},
{
id: "id-Monkey",
name: "Monkey",
kind: "Animal"
},
{
id: "id-Tulip",
name: "Tulip",
kind: "Plant"
}
],
empty: []
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
genName: function() {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
""
);
let radix = chars.length;
let len = 4;
let uuid = [];
for (let i = 0; i < len; i++)
uuid[i] = chars[0 | (Math.random() * radix)];
return uuid.join("");
},
ckBtn: function(msg) {
console.log("ckBtn", msg);
},
ckBtnAddString: function() {
console.log("ckBtnAddString");
let name = this.genName();
this.WGroupTags.strings.push(name);
},
ckBtnAddObj: function() {
console.log("ckBtnAddObj");
let name = this.genName();
this.WGroupTags.objects.push({ id: "id-" + name, text: name });
},
ckBtnAddObjText: function() {
console.log("ckBtnAddObjText");
let name = this.genName();
this.WGroupTags.objectsText.push({ id: "id-" + name, value: name });
},
ckBtnAddObjIcon: function() {
console.log("ckBtnAddObjIcon");
let name = this.genName();
this.WGroupTags.objectsIcon.push({
id: "id-" + name,
text: name,
icon: "fas fa-hands-wash"
});
},
ckBtnAddObjTooltip: function() {
console.log("ckBtnAddObjTooltip");
let name = this.genName();
this.WGroupTags.objectsTooltip.push({
id: "id-" + name,
text: name,
tooltip: name + " for tooltip"
});
},
ckBtnAddObjSlotText: function() {
console.log("ckBtnAddObjSlotText");
let name = this.genName();
this.WGroupTags.objectsSlotText.push({
id: "id-" + name,
text: name,
slotTextKind: "Basic",
slotTextLevel: "None"
});
},
ckBtnClose: function(msg) {
console.log("ckBtnClose", msg);
},
ckBtnClosePm: function(msg) {
console.log("ckBtnClosePm", msg);
alert("pm.resolve() for close");
msg.pm.resolve();
//msg.pm.reject()
},
ckBtnItem1: function(msg) {
console.log("ckBtnItem1", msg);
},
ckBtnItem2: function(msg) {
console.log("ckBtnItem2", msg);
},
ckBtnModProg: function(msg) {
console.log("ckBtnModProg", msg);
//lock
msg.setProg(0); //先設定prog為0使按鈕自動上鎖禁止高頻觸發
try {
// if (Math.random() < 0.5) { //隨機添加出錯
// throw new Error('Whoops!')
// }
setTimeout(function() {
//模擬呼叫api時至少等1s才有反應能setProg, 若沒先設定prog為0按鈕不會上鎖
let n = 0;
let t = setInterval(function() {
n += 0.5;
msg.setProg(n);
if (n >= 100) {
//vo.WButtonChip.prog = null //當prog>=100時會由內部自動設定為null
clearInterval(t);
}
}, 10);
}, 1000);
} catch (err) {
//unlock
msg.setProg(null);
}
},
ckBtnModLoading: function(msg) {
console.log("ckBtnModLoading", msg);
msg.setLoading(true);
setTimeout(function() {
msg.setLoading(false);
}, 2000);
},
ckInputAddForObject: function(msg) {
console.log("ckInputAddForObject", msg);
this.WGroupTags.objects.push(msg);
},
ckInputAddForString: function(msg, key) {
console.log("ckInputAddForString", msg, key);
this.WGroupTags.strings.push(msg[key]);
}
}
});
</script>
</body>
</html>