smartERPLite
Vue DocumentAppearance
Button #
Sample 위치
샘플 > 컴포넌트 > VmButton
VmButton #
기본 스타일의 버튼.
- Props:
없음 - Emits
click
(e: 'click', event: Event): void - Slots
- default 버튼 텍스트
- Example
<VmButton @click="addRow" >행추가</VmButton>
VmButtonQuery #
조회 텍스트와 스타일이 적용된 버튼
- Props:
없음 - Emits
click
(e: 'click', event: Event): void - Example
<VmButtonQuery @click="query" />
VmButtonSave #
저장 텍스트와 스타일이 적용된 버튼
- Props:
없음 - Emits
click
(e: 'click', event: Event): void - Example
<VmButtonSave @click="save" />
모달용 적용, 닫기 버튼 #
VmButtonApply #
팝업에서 적용 버튼
VmButtonClose #
팝업에서 닫기 버튼
Sample #
메뉴: 샘플 > 컴포넌트 > VmButton
src/views-sample/component/VmButtonSample.vue
<template>
<div class="sample">
<VmContainer col="1">
<VmCell>
<VmButton @click="addRow">행추가</VmButton><VmButton @click="addRow">행추가</VmButton>
</VmCell>
<VmCell>
<VmButtonQuery @click="query" /><VmButtonQuery @click="query" />
<VmButtonQuery @click="query" disabled/><VmButtonQuery @click="query" />
</VmCell>
<VmCell>
<VmButtonSave @click="save" /><VmButtonSave @click="save" />
</VmCell>
<VmCell>
<VmButton @click="customButton">일반 버튼</VmButton><VmButton @click="customButton">커스텀 버튼</VmButton>
</VmCell>
<VmCell>
<VmButton @click="customButton" disabled>비활성 버튼</VmButton><VmButton @click="customButton">커스텀 버튼</VmButton>
</VmCell>
</VmContainer>
</div>
</template>
<script setup lang="ts">
function addRow(e: Event) {
console.log('button addRow click', e)
}
function query(e: Event) {
console.log('button query click', e)
}
function save(e: Event) {
console.log('button save click', e)
}
function customButton(e: Event) {
console.log('button 일반 버튼 click', e)
}
</script>