Vue.js를 사용한 한 단계의 kintone 개발
소개
kintone 사용자 정의에서,
· 데이터 바인딩을 사용하고 싶을 때
· 조금 정교한 UI를 만들고 싶을 때
그럴 때 편리한 것이 Vue.js입니다.
이번에는 그런 Vue.js를 사용한 원 랭크상의 개발 방법을 소개합니다.
이번에 사용하는 것
템플릿을 준비했습니다.
git clone https://github.com/tonio0720/kintone-apptemplate
cd kintone-apptemplate
npm i # パッケージのインストール
npm run build # ビルド処理
kintone 사용자 정의
자바스크립트
CSS
폴더 구성
|--.eslintrc.json
|--build
| |--main.css
| |--main.css.map
| |--main.js
| |--main.js.map
|--package.json
|--src
| |--app.js
| |--components
| | |--Button.vue
| |--style.scss
|--webpack.config.js
build/
빌드된 Javascript, CSS가 생성되는 위치.
여기에 생성 된
main.js, main.css를 kintone에 첨부하십시오.app.js
여기서 각 컴포넌트를 적절한 장소에 배치해 갑니다.
아래의 예에서는
Button.vue 를 리스트 화면의 헤더에 배치하고 있습니다.app.js
import locale from 'element-ui/lib/locale/lang/ja';
import Button from './components/Button.vue';
import './style.scss';
Vue.use(ELEMENT, { locale });
let vm1;
kintone.events.on('app.record.index.show', (event) => {
const headerMenuEl = kintone.app.getHeaderMenuSpaceElement();
if (vm1) {
vm1.$destroy();
vm1.$el.parentNode.removeChild(vm1.$el);
}
const el = document.createElement('div');
headerMenuEl.appendChild(el);
vm1 = new Vue({
el,
render: h => h(Button, {
props: { event }
})
});
return event;
});
components/Button.vue
Vue는 기본적으로 컴포넌트 단위로 생성되므로,
components/아래에 Vue 파일을 만듭니다.
htps : ///에멘 t. 네. 이오 / # / 엔 - S / 코 m 포넨 t / 인 s 치치
Element는 UI가 풍부하므로, 문서를 참고로 하면서 작성해 갑시다.
아래의 예입니다.
Button.vue
<template>
<div>
<el-button type="primary" @click="dialog = true">ボタン</el-button>
<el-dialog title="ダイアログ" :visible.sync="dialog" width="30%">
<el-form ref="form" :model="form" label-width="160px">
<el-form-item label="テキスト">
<el-input v-model="form.text"></el-input>
</el-form-item>
<el-form-item label="セレクト">
<el-select v-model="form.select">
<el-option label="セレクト1" value="1"></el-option>
<el-option label="セレクト2" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日時">
<el-col :span="11">
<el-date-picker type="date" v-model="form.date" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.time" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="スイッチ">
<el-switch v-model="form.switch"></el-switch>
</el-form-item>
<el-form-item label="チェックボックス">
<el-checkbox-group v-model="form.check">
<el-checkbox label="チェック1" name="check"></el-checkbox>
<el-checkbox label="チェック2" name="check"></el-checkbox>
<el-checkbox label="チェック3" name="check"></el-checkbox>
<el-checkbox label="チェック4" name="check"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="ラジオボタン">
<el-radio-group v-model="form.radio">
<el-radio label="ラジオ1"></el-radio>
<el-radio label="ラジオ2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="テキストエリア">
<el-input type="textarea" v-model="form.textarea"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog = false">キャンセル</el-button>
<el-button type="primary" @click="dialog = false">OK</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: [
'event'
],
components: {},
data() {
return {
dialog: false,
form: {
text: '',
select: '',
date: '',
time: '',
switch: '',
check: [],
radio: '',
textarea: ''
}
};
},
computed: {
},
watch: {
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
</style>
기타 파일
기본 괴롭히지 않아 OK입니다만, 취향에 맞게 커스터마이즈 해 주세요.
이렇게 할 수 있는
(여담) 킨톤에서 부트스트랩을 사용할 수 없는 이유
kintone에서 Bootstrap과 같은 CSS 프레임 워크를 사용하면 기존 레이아웃이 무너져 버리기도합니다.
원인은
box-sizing: border-box입니다.box-sizing이란?
예를 들어 CSS에서
width, height를 200px로 설정하면box-sizing: border-box 에서는 padding 또는 border 를 포함하여 200px 로 하지만,box-sizing: content-box 에서는 padding 또는 border 를 포함하지 않고 200px 로 한다.Bootstrap에서는
box-sizing: border-box 가 글로벌하게 적응해 버리기 때문에, 기존의 레이아웃이 무너져 버리는 것이군요.그 점 Element-ui는 CSS의 글로벌한 지정이 적고, 레이아웃이 무너지지 않기 때문에 편리하네요.
(여담 2) 공식 Vue 부품?
htps : // 기주 b. 코 m / 킨 토네 / ゔ 에 킨토 네코 m 포넨 t
kintone의 Github 리포지토리에 있는 vue-kintone-component라는 것이 신경이 쓰이네요.
사용하고 싶지만 문서가 보이지 않습니다 ...
Reference
이 문제에 관하여(Vue.js를 사용한 한 단계의 kintone 개발), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tonio0720/items/df74c42109f20d78a524텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
