Home > Web Front-end > JS Tutorial > body text

Release content of art-dialog-vue2.0, a dialog plug-in based on vue.js

不言
Release: 2018-07-11 14:53:09
Original
2238 people have browsed it

This article mainly introduces the release content of the dialog plug-in art-dialog-vue2.0 based on vue.js. It has a certain reference value. Now I share it with you. Friends in need can refer to it

art-dialog-vue——Classic, elegant web dialog box control

Advantages

  1. Supports normal and 12-direction bubble dialog boxes

  2. Support ARIA standard

  3. Future-oriented: API based on HTML5 Dialog

  4. Support standard and modal dialog boxes

  5. Rich and friendly programming interface

  6. Adaptable content size

Installation

 npm install art-dialog-vue //插件文件在plugin目录下
Copy after login

url introduction

<script src="plugin/dist/static/css/dialog.min.css"></script>
<script src="plugin/dist/static/js/dialog.js"></script>
<script>
    Vue.use(Dialog.default)//使用插件,注意以url引入时use的参数是Dialog.default
</script>
Copy after login

Modular introduction

import Dialog from 'art-dialog-vue' //esm
const Dialog = require('art-dialog-vue').default //RequireJS,非esm形式要加.default
Vue.use(Dialog)//使用插件
Copy after login

Basic use

const d = Vue.dialog({
    title: 'art-dialog-vue',
    content: {
              template: '<p>{{name}},欢迎使用</p>',
              data() {
                  return {
                      name: 'hello'
                }
              }
    },
    button: [
     {
         id: '1',
         value: '确定',
         callcack() {      
            //do something                                      
            return false;//返回false 表示弹窗不关闭
        }
     },
     {
         id: '2',
         value: '取消',
         callcack() {      
            //do something                                      
            return false;//返回false 表示弹窗不关闭
        }
     },
    ]
});
d.show();
Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's learning, more Please pay attention to the PHP Chinese website for related content!

Related recommendations:

In-depth understanding of the test method and its pitfalls of JS regular expressions

The above is the detailed content of Release content of art-dialog-vue2.0, a dialog plug-in based on vue.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template