Vue.js+bulma로 대화상자 보이기 시도
15157 단어 BulmaJavaScriptVue.js
목표
대화 상자를 표시하려면 JavaScript 프레임워크Vue.js와 CSS 프레임워크bulma를 사용하십시오.
견본
Vue.js에bulmadialog-component 구성 요소를 추가합니다.
그리고 언제든지 부모 측에서 구성 요소를 실행하는 방법 showDialog.
다음 속성이 있는 객체가 매개변수로 지정됩니다.
구성 요소 끝
IE11로 이동합니다.
bulma_dialog.js
/**
* bulma + vue.jsでダイアログを表示します。
* html: vue.jsの管理下に以下を追加します
* <bulmadialog-component ref="dialog"></bulmadialog-component>
* js:Vue.jsを作成するときにコンポーネントを追加する
* components: {
'bulmadialog-component': BulmaDialog,
},
* js:Vue.jsの親のメソッドにて以下を実行
* this.$refs.dialog.showDialog({
title:'わっふるる',
//contents:'わっふるぼでぃ０\nsadfasfd',
html : 'あたえたｔ<br>awrawtあたえたｔ<br>',
buttons : [
{
caption : 'はい',
callback : function () {
console.log('はい');
}
},
{
caption : 'いいえ',
callback : function () {
console.log('いいえ');
}
}
]
});
*/
// eslint-disable-next-line no-unused-vars
const BulmaDialog = {
/* eslint-disable max-len */
template: (function() {/*
<div v-bind:class="{ 'is-active': isShow }" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{data.title}}</p>
</header>
<div >
</div>
<section v-if="data.html" v-html="data.html" class="modal-card-body"></section>
<section v-else class="modal-card-body">{{data.contents}}</section>
<footer class="modal-card-foot" style="justify-content: flex-end;">
<button v-for="btnObj in data.buttons" type="button" class="button" @click="btnObj.callback(); isShow = false;">{{btnObj.caption}}</button>
</footer>
</div>
</div>
</div>
*/}).toString().match(/\/\*([^]*)\*\//)[1],
/* eslint-enable */
data: function() {
return {
isShow: false,
data: {
title: '',
body: '',
html: '',
buttons: [],
},
};
},
methods: {
showDialog: function(data) {
this.isShow = true;
this.data.title = data.title;
this.data.contents = data.contents;
this.data.html = data.html;
this.data.buttons = data.buttons;
},
},
};
사용처
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/phptest/codeview/js/bulma_dialog.js"></script>
</head>
<body>
<div id="app">
<bulmadialog-component ref="dialog"></bulmadialog-component>
<button class="button is-primary" @click="test1">ダイアログA</button>
<button class="button is-primary" @click="test2">ダイアログB</button>
</div>
<script>
var app = new Vue({
el: '#app',
components: { //Scopedが使える
'bulmadialog-component': BulmaDialog,
},
data: function() {
return {
}
},
methods: {
test1 : function () {
this.$refs.dialog.showDialog({
title:'確認（TEXT)',
contents: "ふんぐるい むぐるうなふ くとぅるう るるいえ うがふなぐる ふたぐん<br>Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn",
buttons : [
{
caption : 'はい',
callback : function () {
console.log('test1 はい');
}
},
{
caption : 'いいえ',
callback : function () {
console.log('test2 いいえ');
}
}
]
});
},
test2 : function () {
this.$refs.dialog.showDialog({
title:'確認（HTML)',
html: "ふんぐるい むぐるうなふ くとぅるう るるいえ うがふなぐる ふたぐん<br>Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn",
buttons : [
{
caption : 'YES',
callback : function () {
console.log('Yes');
}
},
{
caption : 'No',
callback : function () {
console.log('No');
}
}
]
});
}
}
})
</script>
</body>
</html>
참고 자료
Safari도 틀리지 않는 Javascript의 투명한 문서 작성
https://qiita.com/ampersand/items/c6c773ba7ae9115856d0
메모
Bulma 자체는 IE를 부분적으로 지원하기 때문에 템플릿 문자로 IE를 포기하는 것이 좋다
Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:
Bulma 자체는 IE를 부분적으로 지원하기 때문에 템플릿 문자로 IE를 포기하는 것이 좋다
Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:
Reference
이 문제에 관하여(Vue.js+bulma로 대화상자 보이기 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mima_ita/items/5046d273b1da1715e299텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
