предисловие
Я только что взял на себя проект внутренней системы внутри компании. В начале это была настоящая ловушка. После недели сверхурочной работы я в основном завершил часто используемые функции и компоненты и вздохнул с облегчением.
Стек технологий: ivew + vue + vue-cli
Без лишних слов, давайте резюмируем некоторые проблемы компонентов упаковки.Общая страница выглядит следующим образом.
пакет компонентов
- Инкапсуляция компонентов, реализующих ввод даты выбора радио
1. Поскольку Vue нуждается в Data-Data Views, все свойства должны быть инициализированы на странице
export default {
data() {
return {
list: [
{name: 'applicationNo', title: '采购申请编号 :', type: 'input', placeholder: '', disable: true, value: '111'},
{name: 'createUserName', title: '申请人 :', type: 'input', value: '', disable: true},
{name: 'organLeaderName', title: '机构负责人', type: 'input', value: '', disable: true},
{name: 'expectTime', title: '希望到货时间', type: 'input', value: '', data: [], placeholder: '', disable: true},
{name: 'transportOrganName', title: '配送机构', type: 'input', value: '', placeholder: '', disable: true},
{name: 'receive', title: '接车地址', type: 'input', value: '', disable: true},
{name: 'detailAddress', title: '详细地址', type: 'input', value: '', data: [], col: '12', disable: true},
{name: 'contract', title: '联系人', type: 'input', value: '', data: [], disable: true},
{name: 'telphone', title: '联系电话', type: 'input', value: '', data: [], disable: true},
{name: 'remark', title: '备注', type: 'input', value: '', data: [], disable: true, col: '20'}
],
1.1 Инкапсулируйте компонент, чтобы реализовать оценку кнопки отправки, поскольку инициализация определяетtypeсогласно сtypeЧтобы определить, что такое кнопка отправки (например: ввод, выбор...)
<template>
<div class="form-input-group">
<template v-if="type == 'text'">
<span class="form-list-text">{{ value }}</span>
</template>
<template v-else-if="type == 'input'">
<Input class="input-item" v-model="inputValue" :placeholder="placeholder" :disabled="disable"></Input>
<template v-if="detail">
<span class="input-detail">{{detail}}</span>
</template>
</template>
<template v-else-if="type == 'select'">
<Select class="input-item" v-model="inputValue" :placeholder="placeholder" :disabled="disable">
<Option v-for="item in selectData" :value="item" :key="item.value">{{item }}</Option>
</Select>
</template>
<template v-else-if="type == 'date'">
<DatePicker type="date" :placeholder="placeholder" @on-change="setDate" :disabled="disable"></DatePicker>
</template>
<template v-else-if="type == 'city'">
<city-select :value="value" @setCity="SetCity"></city-select>
</template>
<template v-else-if="type == 'model'">
<Input class="input-model-hidden" v-model="modelValue.code"></Input>
<Input class="input-item input-model" :placeholder="modelValue.name" readonly></Input>
<div class="input-shadow" @click="showModel = true"></div>
</template>
<template v-else-if="type == 'cars'">
<car-select :value="value" @setCar="SetCar"></car-select>
</template>
<FormModel v-if="showModel" @closeModel="closeModel" @confirmModel="confirmModel"></FormModel>
</div>
</template>
/**
* [inputGroup 输入框]
* 接受参数：[type: 输入框类型，name:要绑定的属性名, data: 下拉菜单或级联菜单数据]
* type值：[text：普通文本，input:普通输入框，select：下拉框，date：日期选择框，city：省市区，cascader：级联菜单]
* 接受方法：[getValue:获取属性名和返回值]
* 返回值：{ name: name, value: value }
* 级联菜单返回值：{ name: name, value: [value1, value2] }
* 使用示例： <input-group v-bind="propsData"></input-group>
*/
В родительском компоненте мы не можем просто передать
typeзначение, чтобы определить тип кнопки отправки.При просмотре заказа и не может быть изменено, вам также необходимо установитьvalueЗначение передается на дисплей дочернего компонента и устанавливаетсяdisabledСвойства не могут быть отредактированы. Также вы проходите другие свойства (например,placeholder,disable,name)Ждать
1.2 Итак, в родительском и дочернем компонентах нужно сделать две вещи.
<Row class="form-list-search">
<Col :span="item.col ? item.col : '6'" v-for="(item,index) in list" :key="index">
<span class="form-list-title">{{item.title}}</span>
<input-group v-bind="item" @setCarCode="setCarCode" @setValue="setValue"></input-group>
</Col>
</Row>
использоватьv-bind="item"Передайте значение свойства. Так как же получить его под входным компонентом? см. код
// input.vue
export default {
data() {
return {
inputValue: '',
selectData: [],
modelValue: {},
showModel: false,
dateData: ''
}
},
props: {
data: {
default: ''
},
value: {
default: ''
},
type: {
required: true
},
name: {
required: true
},
disable: {
type: Boolean
},
detail: {
default: ''
},
placeholder: String,
index: Number
},
components: {
CitySelect,
FormModel,
CarSelect
}
1.3 Когда дочерний компонент изменяется, нам нужно следить за компонентомvalueизменяет и передает значение родительскому компоненту, тем самым изменяя представление.$emit()
created() {
this.inputValue = this.value
this.selectData = this.data
this.inputkey = this.key
},
methods: {
setDate(date) {
this.inputValue = date
// this.dateData = date
// let returnData = {name: this.name, value: this.dateData}
// this.$emit('dateData', returnData)
},
SetCity(val) {
let returnData = {name: this.name, value: val}
this.$emit('setCityCode', returnData)
},
SetCar(val) {
console.log(val, 'input.vue')
this.$emit('setCarCode', val)
},
confirmModel(data) {
if (data) {
this.showModel = false
this.modelValue = data
}
},
closeModel(data) {
if (data) {
this.showModel = false
}
}
},
watch: {
value(val) {
this.inputValue = val
},
data(val) {
this.selectData = val
},
inputValue(val) {
// console.log(val)
let returnData = {name: this.name, value: val}
if (this.index != undefined) {
returnData.index = this.index
}
if (this.type == 'date') {
returnData.value = Util.unixTime(val)
}
this.$emit('setValue', returnData)
}
}
}
1.4 Компоненты трехуровневой связи
Главная идея
- В сочетании с компонентом iview Каскадный выбор каскада, динамическая загрузка, если есть меню следующего уровня, определенное внутри объекта
children[], и нажмите новую структуру вторичного объекта,loading: falseУказывает, что есть следующий уровень, а также вызоветloadDataметод
<template>
<div>
<Cascader :data="cascaderData" :load-data="loadData" v-model="cascader" @on-change="setValue"></Cascader>
</div>
</template>
<script>
import Util from '../../libs/util.js'
import {getBrand, getSeriesList, getModelList} from '../../api/index'
export default {
data() {
return {
cascaderData: [],
cascader: []
}
},
async mounted() {
// 返回一级菜单数据
let brandList = await getBrand()
// 渲染视图
Util.CommonCascader(this, brandList.result, this.cascaderData)
},
created() {
},
methods: {
loadData(item, callback) {
item.loading = true
// 调用二级菜单接口，传入id
getSeriesList(item.value).then((res) => {
Util.CascaderChild(this, res.result, item.children, 'name', 'code')
callback()
item.loading = false
}).then(() => {
// 调用三级菜单接口，传入id
getModelList(item.value).then((res) => {
Util.CascaderChild(this, res.result, item.children, 'name', 'code', true)
callback()
item.loading = false
})
})
},
setValue(val) {
this.$emit('setCar', val)
}
},
watch: {
value(val) {
this.cascader = val
}
},
components: {}
}
</script>
<style scoped>
</style>