Maison >interface Web >js tutoriel >Publier le contenu d'art-dialog-vue2.0, un plug-in de dialogue basé sur vue.js

Publier le contenu d'art-dialog-vue2.0, un plug-in de dialogue basé sur vue.js

不言
不言original
2018-07-11 14:53:092279parcourir

Cet article présente principalement le contenu de la version art-dialog-vue2.0, un plug-in de dialogue basé sur vue.js. Il a une certaine valeur de référence et peut désormais être partagé avec tous les amis dans le besoin. it

art-dialog-vue - Contrôle de dialogue Web classique et élégant

Avantages

  1. Prend en charge les boîtes de dialogue à bulles normales et 12 directions

  2. Prise en charge de la norme ARIA

  3. Orienté vers l'avenir : API basée sur la boîte de dialogue HTML5

  4. Prise en charge de la norme et de la boîte de dialogue modale boîtes

  5. Interface de programmation riche et conviviale

  6. Taille du contenu adaptable

Installation

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

introduction de l'url

<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>

Introduction modulaire

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

Utilisation de base

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();

Ce qui précède est l'intégralité du contenu de cet article, j'espère cela sera utile à tout le monde. Apprendre est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Compréhension approfondie de la méthode de test des expressions régulières JS et de ses pièges

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Analyse de la modularité JSArticle suivant:Analyse de la modularité JS