Vue.JS开源:vue-dialog - vue 对话框组件
ghsa8425
8年前
<h2>vue-dialog</h2> <p>This is yet another vue dialog component.</p> <h2>Install</h2> <p>Use npm to download code:</p> <pre> <code class="language-javascript">npm install hsy-vue-dialog -S</code></pre> <p>then import it into your project, add below code into your main.js :</p> <pre> <code class="language-javascript">import Dialog from 'hsy-vue-dialog' Vue.use(Dialog)</code></pre> <h2>Usage</h2> <pre> <code class="language-javascript"><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> <h2>Props</h2> <table> <thead> <tr> <th>Prop</th> <th>Description</th> <th>Type</th> <th>Accepted Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>value</td> <td>whether dialog is visible or not</td> <td>Boolean</td> <td>--</td> <td>false</td> </tr> </tbody> </table> <h2>Screenshot</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/b6e70a1307275988062da5ba08830b93.png"> <img src="https://simg.open-open.com/show/91315bb9142fda1793bebbf8a1445af5.png"></p> <p> </p> <p> </p> <p> </p>