Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use form-create to dynamically generate vue custom components and nested form components", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use form-create to dynamically generate vue custom components and nested form components" bar!

Dynamically generate vue custom components and nested form components using form-create

[github] | [description document]

Maker.create

Generate custom components by creating a virtual DOM

Generate

Maker

Let rule = [formCreate.maker.create ('iMushon') .props ({type:'primary', field:'btn' loading:true})] $f = formCreate.create (rule)

The above code dynamically generates a loaded iview button component through the maker generator

Json

Let rule = [{type:'i-button', field:'btn' props: {type:'primary', field:'btn', loading:true}}] $f = formCreate.create (rule)

The above code dynamically generates an iview button component through json.

Modify

You can dynamically modify the configuration items of a component in two ways

Modify component generation rules through rule

Rule [0] .props.loading = false

Get the generation rules of the component through the $f.component () method and modify

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

Example

Let rule = [{type:'row', children: [{type:'i-col', props: {span:12}, children: [formCreate.maker.input ('commodity name', 'goods_name','iphone'), formCreate.maker.number (' commodity plus', 'goods_price',8688)]}, {type:'i-col', props: {span:12} Children: [formCreate.maker.dateTime ('creation time', 'create_at'), formCreate.maker.radio (' display', 'is_show'). Options ([{value:1,label:' display'}, {value:0,label:' does not display'}]]}]]

Maker.template

Custom components are generated through templates, and the maker.createTmp method is an alias for this method

Generate

Maker

Let rule = [formCreate.maker.template ('{text}}', new Vue ({data: {loading:true, text:' is being loaded...'}))]

The above code dynamically generates a loaded iview button component through the maker generator

Json

Let rule = [{type:'template', template:' {{text}}', vm:new Vue ({data: {loading:true, text:' is loading'}})}] $f = formCreate.create (rule)

The above code dynamically generates an iview button component through Json.

Modify

You can dynamically modify values within a vm component in two ways

Get the vm of the custom component through rule and modify it

Rule [0] .vm.text = 'loaded'; rule [0] .vm.loading = false

Get the vm of the custom component through the $f.component () method and modify it

$f.component (). Btn.vm.text = 'loaded'; $f.component (). Btn.vm.loading = false Thank you for your reading, the above is the content of "how to use form-create to dynamically generate vue custom components and nested form components". After the study of this article, I believe you have a deeper understanding of how to use form-create to dynamically generate vue custom components and nested form components. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.