[vuejs] el-dialog 샘플 예제 by jsfiddle

HTML 코드

<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script src="https://unpkg.com/element-ui"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<div id="app">
  <template>
    <div>
      <el-button @click="dialogVisible = true">다이얼로그 열기</el-button>
      <el-dialog
        :visible.sync="dialogVisible"
        title="Vue 2 다이얼로그">
        <span>다이얼로그 내용</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">취소</el-button>
          <el-button type="primary" @click="dialogVisible = false">확인</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
</div>

JAVASCRIPT 코드

new Vue({
  el: '#app',
  data: {
    message: 'Hello, World!',
    dialogVisible: false, // dialogVisible 추가
  },
});