w-component-vue
Version:
A simple component for vue(vue2).
261 lines (245 loc) • 10.1 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.25/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-confirm</span>
</div>
<div class="bk">
<div class="item">scrollable (slot content)</div>
<v-btn
depressed
small
elevation="2"
@click="WConfirm.bShow15=!WConfirm.bShow15"
>Show({{WConfirm.bShow15}})</v-btn>
<w-confirm
:show.sync="WConfirm.bShow15"
:title="WConfirm.title"
@click-no="clickEvent('click-no')"
@click-yes="clickEvent('click-yes')"
>
<template v-slot:content>
<div
style="padding:30px 20px 10px 20px; font-size:1.5rem;"
>Cupiditate anim officia</div>
<div style="padding:10px 20px; font-size:0.9rem;">
Deserunt mollit amet sunt sed. Mollit dolor est in voluptate blanditiis in. Tempor sint consequat quod mollitia ad qui dolore pariatur. Laborum dolorum amet eos sint. Nulla ullamco similique elit eos. Est nulla eu proident exercitation vero.
<br />
<br />In laboris odio dolor voluptatum deleniti pariatur in. Et excepteur est ad omnis corrupti. Quos dolore aliqua corrupti. Dolores soluta commodo similique est quos. Amet et molestias est vero cupiditate dolorum proident fugiat. Aliquip omnis vero laboris ea dolore voluptatum corrupti.
<br />
<br />Possimus facere excepteur qui praesentium. Non expedita accusamus quis dolore. Elit omnis aliqua voluptate culpa. Laborum placeat non facilis est elit. Provident animi at fugiat labore eiusmod harum.
<br />
<br />Atque facere aliqua qui iusto mollit enim. Et cumque et omnis. Anim irure id at do duis. Fugiat aute culpa nobis ad irure quod et. Assumenda elit est exercitation sunt est laborum nulla fugiat.
<br />
<br />Tempor eiusmod deserunt ducimus iusto cumque adipisicing consequat ex. Deleniti et officia qui esse similique harum. Molestias pariatur laborum cupidatat sint rerum. Deserunt do sit mollit ad animi distinctio soluta. Eos vero aliqua cupiditate sunt id.
<br />
<br />Quis voluptas in excepteur optio voluptas. Enim animi non nisi eu ex obcaecati at. Cumque aliquip et at soluta sunt. Cupidatat mollit nostrud veniam dolor eos. Placeat qui adipisicing voluptas quas laboris odio voluptate. In atque sint expedita eos nobis irure.
<br />
<br />Sed quo officia excepteur est. Minim libero dolore in fuga. Soluta optio expedita culpa omnis consequat adipisicing mollitia ut. Consectetur magna ut sed accusamus. Facilis quas facilis ut ea sed dolor placeat non. Omnis provident reprehenderit est et.
<br />
<br />Nihil dolorum odio aute sit corrupti cumque. Tempore at laboris quis est impedit ea. Nihil expedita commodo est tempor sint. Ut excepturi aute tempor ut laboris cumque. Similique vero aliqua at in culpa consequat sunt.
<br />
<br />Est et cupiditate praesentium facilis dolores sit. Deserunt ducimus amet veniam assumenda. Laborum excepturi enim proident tempor sunt dolorum atque aliquip. Irure deleniti magna ullamco ipsum eligendi et nihil.
<br />
<br />Reprehenderit omnis anim enim dignissimos dolor obcaecati occaecat. Id cupiditate et corrupti labore proident omnis est. Dolor obcaecati id est sit. Qui dolorum aliquip et occaecat labore pariatur cupidatat. Quo nobis expedita amet dignissimos qui.
<br />
<br />Accusamus in animi pariatur ducimus tempor. Et dignissimos in deserunt est dignissimos. Rerum impedit et est quod. Id ex ea laborum aliquip ipsum amet. Ut dolor est blanditiis incididunt minus magna culpa. Labore aute aute optio facere cumque. Cum minus eos culpa dolore enim.
</div>
</template>
</w-confirm>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WConfirm: {
bShow1: false,
bShow2: false,
bShow3: false,
bShow4: false,
bShow5: false,
bShow6: false,
bShow7: false,
bShow8: false,
bShow9: false,
bShow10: false,
bShow11: false,
bShow12: false,
bShow13: false,
bShow15: false,
bShow14: false,
title: "Confirm",
content: "Do you agree to upload the information?",
contentExtensive:
"Est aliqua irure deserunt excepteur. Ullamco do blanditiis nobis aute exercitation. Possimus in optio quod at. Dolores dolorum dolores eu excepteur proident. Quas distinctio sunt dolor amet lorem nostrud deserunt. Dolor molestias exercitation deserunt ut est aute occaecat dolore. Quod ut laboris dolores mollitia vero non corrupti?"
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {
clickEvent: function(data) {
console.log(data);
}
}
});
</script>
</body>
</html>