Vue.JS开源:vue-dialog - vue 对话框组件

ghsa8425 3年前
   <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>