Comment form-create génère-t-il dynamiquement des composants vue ? (exemple de code)-js tutoriel-php.cn

Comment form-create génère-t-il dynamiquement des composants vue ? (exemple de code)

不言

Libérer： 2019-01-18 10:28:51

avant

3524 Les gens l'ont consulté

Le contenu de cet article explique comment form-create génère dynamiquement des composants vue ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Exemple

Comment form-create génère-t-il dynamiquement des composants vue ? (exemple de code)

let rule = [
  {
    type:&#39;row&#39;,
    children:[
      {
        type:&#39;i-col&#39;,
        props:{
          span:12
        },
        children:[
          formCreate.maker.input(&#39;商品名称&#39;,&#39;goods_name&#39;,&#39;iphone&#39;),
          formCreate.maker.number(&#39;商品加个&#39;,&#39;goods_price&#39;,8688)
        ]
      },
      {
        type:&#39;i-col&#39;,
        props:{
          span:12
        },
        children:[
          formCreate.maker.dateTime(&#39;创建时间&#39;,&#39;create_at&#39;),
          formCreate.maker.radio(&#39;是否显示&#39;,&#39;is_show&#39;).options([
            {value:1,label:&#39;显示&#39;},
            {value:0,label:&#39;不显示&#39;}
          ])
        ]
      }
    ]
  }
]

Copier après la connexion

maker.create

Générer des composants personnalisés en créant un DOM virtuel

Générer

Maker

let rule = [
  formCreate.maker.create(&#39;i-button&#39;).props({
    type:&#39;primary&#39;,
    field:&#39;btn&#39;
    loading:true
  })
]
$f = formCreate.create(rule);

Copier après la connexion

Le code ci-dessus permet de générer dynamiquement un composant de bouton de chargement maker iview

Json

< via le générateur

🎜>

let rule = [
  {
    type:&#39;i-button&#39;,
    field:&#39;btn&#39;
    props:{
        type:&#39;primary&#39;,
        field:&#39;btn&#39;,
        loading:true
    }
  }
]
$f = formCreate.create(rule);

Copier après la connexion

Le code ci-dessus génère dynamiquement un composant bouton

via la méthode json iview

Modification

Vous pouvez modifier dynamiquement les éléments de configuration du composant des deux manières suivantes

Modifiez les règles de génération des composants via la règle

rule[0].props.loading = false;

Copier après la connexion

Obtenez les règles de génération des composants via la méthode

et modifiez $f.component()

$f.component().btn.props.loading = false;

Copier après la connexion

maker.template

via le modèle La façon de générer des composants personnalisés, la méthode

est un alias de la méthode maker.createTmp

Generate

Maker

let rule = [
  formCreate.maker.template(&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,new Vue({
    data:{
      loading:true,
      text:&#39;正在加载中...&#39;
    }
  }))
]

Copier après la connexion

Le code ci-dessus est passé dynamiquement via le générateur

Générer un composant bouton maker de chargement iview

Json

let rule = [
  {
    type:&#39;template&#39;,
    template:&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,
    vm:new Vue({
      data:{
        loading:true,
        text:&#39;正在加载中&#39;
      }
    })
  }
]
$f = formCreate.create(rule);

Copier après la connexion

Le code ci-dessus consiste à générer dynamiquement un composant bouton

via la méthode Json iview

modification

Vous pouvez modifier dynamiquement la valeur à l'intérieur du composant

des deux manières suivantes vm

Obtenez le

du composant personnalisé via rule et modifiez vm

rule[0].vm.text = &#39;加载完毕&#39;;
rule[0].vm.loading = false;

Copier après la connexion

Obtenez le

du composant personnalisé via la méthode $f.component() et modifiez le vm

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!