快捷導(dǎo)航

VueJS 取得 URL 參數(shù)值的方法

更新時(shí)間：2019年07月19日 09:01:55 作者：xaboy

form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。本文給大家簡(jiǎn)單介紹了VueJS U取得RL 參數(shù)值的方法，詳細(xì)給大家介紹了vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單效果，感興趣的朋友一起看看吧

先給大家介紹下VueJS取得URL參數(shù)

vuejs取得URL中參數(shù)的值

地址：http://localhost:3333/#/index?id=001

結(jié)果：001

console.log(this.$route.query.id)

PS：下面給大家介紹下vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單效果

介紹

form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再?gòu)?fù)雜的表單都可以輕松搞定。

文檔|github

演示項(xiàng)目:開源的高品質(zhì)微信商城

功能

自定義組件

可生成任何Vue組件

自帶數(shù)據(jù)驗(yàn)證輕

松轉(zhuǎn)換為表單組件

通過 JSON 生成表單
通過 Maker 生成表單
強(qiáng)大的API，可快速操作表單
雙向數(shù)據(jù)綁定
事件擴(kuò)展
局部更新
數(shù)據(jù)驗(yàn)證
柵格布局
內(nèi)置組件17種常用表單組件

對(duì)比 1.x

速度更快
體積更小
更強(qiáng)大的全局配置
自定義組件更容易擴(kuò)展
更容易支持第三方 UI 庫(kù)
更少的 bug

示例

通過 JSON 創(chuàng)建表單

通過 API 操作表單

@form-create包說明名稱說明

名稱	說明
@form-create/iview	iview 版表單生成器
@form-create/element-ui	element-ui 版表單生成器
@form-create/core	form-create 核心包
@form-create/utils	form-create 工具包
@form-create/data	省市區(qū)多級(jí)聯(lián)動(dòng)數(shù)據(jù)

使用

以element-ui版本為例介紹如何在項(xiàng)目中使用 form-create

安裝

npm i @form-create/element-ui

掛載

全局注冊(cè)

import formCreate form '@form-create/element-ui';
Vue.use(formCreate);

局部掛載

import formCreate form '@form-create/element-ui';
export default {
 components:{
 formCreate:formCreaet.$form()
 }
}

生成表單

<template>
 <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
export default {
 data () {
 return {
 //表單實(shí)例對(duì)象
 $f:{},
 //表單生成規(guī)則
 rule:[
 {
 type:'input',
 field:'goods_name',
 title:'商品名稱'
 },
 {
 type:'datePicker',
 field:'created_at',
 title:'創(chuàng)建時(shí)間'
 }
 ]
 };
 },
 methods:{
 onSubmit(formData){
 //TODO 提交表單
 }
 }
};

效果

實(shí)例對(duì)象 $f

可以通過 $f 快速操作表單，例如：

$f.hidden：隱藏指定組件
$f.validate：驗(yàn)證表單
$f.setValue：修改表單組件的值
$f.append：追加表單組件

自定義組件

生成

通過標(biāo)簽生成

{
 type:'el-button',
 name: 'btn',
 props:{
 type:'primary',
 field:'btn',
 loading:true
 },
 children:['加載中']
}

通過模板生成

{
 type:'template',
 name:'btn'
 template:'<el-button :loading="loading">{{text}}<el-button>',
 vm: new Vue({
 data:{
 loading:true,
 text:'加載中'
 }
 })
}

轉(zhuǎn)換為表單組件

自定義組件轉(zhuǎn)換為表單組件后，可通過$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作組件，達(dá)到和內(nèi)置組件相同的效果

預(yù)定義

props

在自定義組件內(nèi)部通過props接收一下屬性

value表單的值
disabled組件的禁用狀態(tài)

例如:

vm = Vue({ props:{ value:String, disabled:Boolean }})

input 事件

通過input事件更新組件內(nèi)部的值

當(dāng)組件值發(fā)生變化后,通過 input 事件更新值.例如:

vm.$emit('input',newValue);

掛載自定義組件

要生成的自定義組件必須通過Vue.component方法掛載到全局,或者通過formCreate.component方法掛載

例如:

formCreate.component('TestComponent',component);

或者

Vue.component('TestComponent',component);

生成

表單組件必須定義field屬性

JSON

{
 type:'TestComponent',
 value:'test',
 field:'testField',
 title:'自定義組件'
}

Maker

formCreate.maker.create('TestComponent','testField','自定義組件').value('test')

示例

自定義計(jì)數(shù)器按鈕組件,獲取按鈕點(diǎn)擊數(shù).該組件的功能和內(nèi)置組件相同

formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">計(jì)數(shù)器-{{num}}</el-button>', new Vue({
 props:{
 //預(yù)定義
 disabled:Boolean,
 value:Number,
 },
 data: function () {
 return {
 num: this.value,
 }
 },
 watch:{
 value(n){
 this.num = n;
 }
 },
 methods: {
 onClick: function () {
 this.num++;
 //更新組件內(nèi)部的值
 this.$emit('input',this.num);
 },
 },
}), 'tmp', '自定義 title').value(100).props('disabled',false)

完整示例

總結(jié)

以上所述是小編給大家介紹的vue自定義表單生成器可根據(jù)json參數(shù)動(dòng)態(tài)生成表單,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: