w-component-vue
Version:
A simple component for vue(vue2).
319 lines (303 loc) • 9.53 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 -->
<!-- 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/res/data/dataAAPL.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataHousePriceArea.js"
></script>
<script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataFlare.js"></script>
<script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRain.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.81/dist/w-component-vue.umd.js"></script>
<style>
/* 組件所須全域樣式 */
.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-drawer</span>
</div>
<div class="bk" v-if="filterCaseCat==='afloat'">
<div
class="item"
>afloat & mode & dragDrawerWidth & drawerWidthMin & drawerWidthMax</div>
<div style="padding-bottom:10px;">
<w-button-chip
:text="'show('+WDrawer.bShow116+')'"
:border-radius="4"
@click="WDrawer.bShow116=!WDrawer.bShow116"
></w-button-chip>
</div>
<w-drawer
style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
v-model="WDrawer.bShow116"
:afloat="true"
:mode="'from-right'"
:drag-drawer-width="true"
:drawer-width-min="150"
:drawer-width-max="300"
>
<template v-slot:drawer>
<!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
<w-list-vertical
style="height:100%; background:#fff;"
:items="WDrawer.listItems"
:item-active.sync="WDrawer.listItemActive"
></w-list-vertical>
</template>
<template v-slot:content>
<div style="height:100%; overflow-y:auto;">
<div
style="padding:10px; font-size:1.2rem;"
>{{WDrawer.title}}</div>
<div
style="padding:0px 10px 10px 10px; font-size:0.9rem;"
>{{WDrawer.content}}</div>
</div>
</template>
</w-drawer>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
data: function() {
return {
filterCaseCat: "basic", //當前選中分類, 預設第一類
filterCaseCatActive: { name: "basic" }, //WListHorizontal 的 itemActive
filterCaseCats: [
{ name: "basic" },
{ name: "drag" },
{ name: "mode" },
{ name: "afloat" },
{ name: "afloatByFix" },
{ name: "autoSwitch" }
],
WDrawer: {
drawerWidth: 300,
title: "Article Title",
content:
"Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from lib, the necessary styles are automatically imported for you.",
listItems: [
{
text: "Interpreting",
icon: "fas fa-american-sign-language-interpreting"
},
{
text: "Search",
icon: "fas fa-search"
},
{
text: "Binoculars",
icon: "fas fa-binoculars"
},
{
text: "Building",
icon: "fa-regular fa-building"
},
{
text: "Tachometer-alt",
icon: "fas fa-tachometer-alt"
},
{
text: "Chess-king",
icon: "fas fa-chess-king"
},
{
text: "Calendar",
icon: "fas fa-calendar-alt"
},
{
text: "chart",
icon: "fas fa-chart-bar"
},
{
text: "Cloud-meatball",
icon: "fas fa-cloud-meatball"
},
{
text: "Cubes",
icon: "fas fa-cubes"
},
{
text: "Dungeon",
icon: "fas fa-dungeon"
}
],
listPkgs: [
{
text: "Balance",
icon: "fas fa-balance-scale"
},
{
text: "Connection",
icon: "fas fa-bezier-curve"
},
{
text: "Issue",
icon: "fa-solid fa-box-tissue"
}
],
listItemActive: {
text: "Search",
icon: "fas fa-search"
},
listPkgActive: {
text: "Balance",
icon: "fas fa-balance-scale"
},
bShow101: false,
bShow102: false,
bShow103: false,
bShow104: false,
bShow105: false,
bShow106: false,
bShow107a: false,
bShow107b: false,
bShow108: false,
bShow109: false,
bShow110: false,
bShow111: false,
bShow112: false,
bShow113: false,
bShow114: false,
bShow115: false,
bShow116: false,
bShow117: false,
bShow118: false,
bShow119: false,
bShow120: false,
bShow121: false,
bShow122: false,
bShow123: true,
bAfloat123: false
},
actions: [{}]
};
},
mounted: function() {
return {};
},
computed: {},
methods: {}
});
</script>
</body>
</html>