Vue.JS開源：vue-dialog - vue 對話框組件

ghsa8425 7年前發布 | 60K 次閱讀 Vue.js Vue.js開發

vue-dialog

This is yet another vue dialog component.

Install

Use npm to download code:

npm install hsy-vue-dialog -S

then import it into your project, add below code into your main.js :

import Dialog from 'hsy-vue-dialog'


Vue.use(Dialog)</code></pre> 
  
Usage
 
  
<button @click="visible = true">remove</button>


<hsy-dialog class="confirm" v-model="visible">
  <div slot="title">Remove</div>
  <div slot="body">
    <div>This operation is irreversible, are you sure?</div>
    <div>
      <button @click="handleYes">Yes</button>
      <button>No</button>
    </div>
  </div>
</hsy-dialog>


<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleYes() {
      alert('Yes')
      this.visible = false
    }
  }
}
</script></code></pre> 
  
Props
 
  
 
    
    
 
     Prop 
     Description 
     Type 
     Accepted Values 
     Default 
    
 
    
    
    
 
     value 
     whether dialog is visible or not 
     Boolean 
     -- 
     false 
    
 
    
  
 
  
Screenshot
 
  
 
 
  
 
 
  
 
 
  
 
 本文由用戶 ghsa8425 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！