-
Notifications
You must be signed in to change notification settings - Fork 1
/
test-sfc.html
66 lines (66 loc) · 2.28 KB
/
test-sfc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>SearchableSelect SFC</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<style type="text/css">
.form-select:after {
position:absolute;
right:17px;
top:50%;
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #99a0b0 transparent transparent transparent;
margin-top:-5px;
}
</style>
<body>
<header>
Vue.js Component: searchable select & input
</header>
<a href="https://github.com/darai0512/searchable-select-vue" style="position: absolute; right: 0; top: 0;">
<img src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
</a>
<div id="app"></div>
<script>
Vue.config.devtools = true;
httpVueLoader.httpRequest = function(url) {
return fetch(url).then((res) => {
return res.text();
}).then((text) => {
return text.replace('export default', 'module.exports =');
}).catch((err) => {
return Promise.reject(err.status);
});
}
new Vue({
el: '#app',
components: {
'searchable-select': httpVueLoader('SearchableSelect.vue')
},
render: (createElement) => createElement('searchable-select', {
class: {
'form-select': true,
},
props: {
placeholder: 'try me',
options: [
{value: 'test', text: 'test'},
{value: 'test2', text: 'これはtestです'},
{value: 'test3', text: 'test / テスト / てすと / TEST'},
{value: 'test4', text: 'これはてすとです'},
{value: 'test5', text: 'これはテストです'},
],
},
}),
});
</script>
<footer>
© created by <a href="https://github.com/darai0512" target="_blank">darai0512</a>