w-component-vue
Version:
A simple component for vue(vue2).
228 lines (214 loc) • 9.47 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-alert</span>
</div>
<div class="bk">
<div class="item">textColor</div>
<v-btn
depressed
small
elevation="2"
@click="$alert(WAlert.text,{
textColor:'#f52'
})"
>Show</v-btn>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
return {
WAlert: {
number: 0,
text: "Test message",
textSuccess: "Success message",
textWarning: "Warging message",
textError: "Error message",
textInfor: "Infor message",
textCallAtEnd: "Waiting to call function",
icon:
'<svg style="width:24px; height:24px;" enable-background="new 0 0 512.006 512.006" viewBox="0 0 512.006 512.006" xmlns="http://www.w3.org/2000/svg"><g><path d="m281.491 149.016c-16.652 13.421-40.32 13.421-56.972 0-26.474-21.336-47.818-49.649-48.514-83.94 0-15.467 9.153-28.792 22.341-34.891-8.597-6.398-19.274-10.181-30.841-10.181-28.443 0-51.5 23.022-51.5 51.422 1.003 49.407 34.05 89.537 73.202 118.72 17.634 13.144 41.962 13.144 59.596 0 25.755-19.197 48.865-43.133 61.953-71.33-8.122 11.225-18.245 21.319-29.265 30.2z" fill="#c6e1f2"/><g fill="#ff5cf4"><g><path d="m336.005 212.284c-.002-.133 0 .134 0 0z"/><path d="m458.005 158.003c-12.874 0-24.711 4.543-34 12.116-9.289-7.573-21.126-12.116-34-12.116-29.776 0-54 24.351-54 54.281.699 34.774 20.17 67.932 56.3 95.127 9.332 7.023 20.516 10.536 31.7 10.535 11.184 0 22.368-3.512 31.7-10.536 36.13-27.195 55.601-60.352 56.3-95.126 0-29.93-24.224-54.281-54-54.281zm-26.355 117.449c-4.501 3.388-10.789 3.388-15.291 0-18.053-13.588-39.68-35.594-40.354-63.34.091-7.796 6.336-14.108 13.999-14.108 7.72 0 14 6.36 14 14.177 0 11.046 8.954 20 20 20s20-8.954 20-20c0-7.817 6.28-14.177 14-14.177 7.663 0 13.908 6.313 13.999 14.108-.673 27.746-22.3 49.752-40.353 63.34z"/></g><path d="m512.005 212.284c0 .134.003-.133 0 0z"/></g></g><g fill="#0023c4"><g><path d="m342.005 71.426c0 .135.003-.136 0 0z"/><g><path d="m96.005 71.426c-.003-.136 0 .135 0 0z"/><path d="m270.505.003c-20.208 0-38.484 8.397-51.5 21.878-13.016-13.48-31.292-21.878-51.5-21.878-39.425 0-71.5 32.04-71.5 71.422.995 49.016 29.093 95.879 81.249 134.755 12.292 9.161 27.021 13.742 41.751 13.742s29.459-4.581 41.751-13.742c52.156-38.876 80.254-85.739 81.249-134.755 0-39.382-32.074-71.422-71.5-71.422zm-33.654 174.107c-10.507 7.832-25.185 7.832-35.691 0-29.166-21.74-64.119-57.221-65.154-102.871.102-17.241 14.193-31.235 31.5-31.235 17.369 0 31.5 14.026 31.5 31.266 0 11.046 8.954 20 20 20s20-8.954 20-20c0-17.24 14.131-31.266 31.5-31.266 17.307 0 31.398 13.995 31.5 31.235-1.036 45.65-35.989 81.131-65.155 102.871z"/></g></g><path d="m505.795 382.441c-13.04-25.049-42.742-35.969-70.372-25.483-18.6 7.059-41.761 15.841-68.606 23.085 2.523-11.551 1.392-23.815-3.416-35.467-6.897-16.716-21.07-29.153-38.886-34.123-9.11-2.541-18.996-3.112-29.384-1.698-68.547 9.325-109.359-13.768-145.365-34.141-24.185-13.684-47.029-26.61-73.761-26.61-35 0-61.974 10.913-61.974 10.913-10.542 3.299-16.413 14.52-13.113 25.061 3.299 10.542 14.52 16.411 25.061 13.113 0 0 22.026-9.087 50.026-9.087 16.201 0 32.909 9.454 54.063 21.423 31.658 17.913 73.217 41.434 134.983 41.431 11.143 0 22.954-.767 35.472-2.469 4.888-.666 9.469-.459 13.246.593 4.216 1.176 9.834 4.013 12.655 10.849 2.188 5.302 2.297 10.262.325 14.744-2.419 5.5-7.933 10.056-15.523 12.832-11.284 4.126-26.242 6.575-43.286 6.588-12.936.009-38.527-2.044-54.853-6.334-10.686-2.809-21.619 3.577-24.426 14.26s3.578 21.619 14.26 24.426c30.083 7.657 65.303 7.646 65.583 7.643 77.44-.304 139.777-23.947 181.111-39.634 6.95-2.639 16.336-1.823 20.515 6.202l.183.351c3.752 7.208.99 16.179-6.158 19.998-47.298 25.268-107.339 51.098-194.038 51.098-76.199 0-146.387-29.405-191.849-54.072-19.994-10.849-36.906-13.928-48.264-13.928-10 0-15.147 1.693-15.147 1.693-8.547 2.274-14.853 10.044-14.853 19.307 0 11.046 8.954 20 20 20 1.783 0 6.314-.867 9-.857 5.584.022 16.185 1.345 30.187 8.943 49.533 26.876 126.335 58.914 210.925 58.914 95.524 0 161.22-28.216 212.886-55.817 26.396-14.103 36.62-47.187 22.793-73.747z"/></g></svg>'
},
actions: [
{
mode: "eleclick",
selector: "button"
}
]
};
},
mounted: function() {
try {
this.$alert = WAlert;
} catch (err) {}
},
computed: {},
methods: {
receiveCloseEvent: function() {
let vo = this;
vo.WAlert.number += 1;
let n = vo.WAlert.number;
vo.$alert(vo.WAlert.textCallAtEnd + " [" + n + "]").then(function() {
vo.$alert("Call function " + "[" + n + "]" + " at the end");
});
}
}
});
</script>
</body>
</html>