Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-07-11 14:53:09
original
2224 Les gens l'ont consulté

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目录下
Copier après la connexion

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>
Copier après la connexion

Introduction modulaire

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

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();
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!