In some cases, we need a bullet box, iview Modal dialog box can be realized, but we need to transform
Customize the footer to prevent it from closing
code show as below:
<Modal
title="车辆信息"
width="1100"
v-model="modalVehiclePlain"
class-name="vertical-center-modal">
<Form ref="vehicle" :model="vehicle" :rules="ruleValidate" label-width="200" inline class="vehicle">
<Row>
<Col span="12">
<FormItem :label="$t('vehicle_no')" prop="vehicle_no">
<Input v-model="vehicle.vehicle_no" :placeholder="$t('input_vehicle_no')" ></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('company_name')" prop="company_name">
<Input v-model="vehicle.driver_company_name" :placeholder="$t('input_driver_company_name')" ></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem :label="$t('driver_name')" prop="driver_name">
<Input v-model="vehicle.driver_name" :placeholder="$t('input_driver_name')" ></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('driver_idcard')" prop="driver_idcard">
<Input v-model="vehicle.driver_idcard" :placeholder="$t('input_driver_idcard')" ></Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem :label="$t('driver_tel')" prop="driver_tel">
<Input v-model="vehicle.driver_tel" :placeholder="$t('input_driver_tel')" ></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('vehicle_type')" prop="vehicle_type">
<Select v-model="vehicle.vehicle_type" filterable >
<Option v-for="item in vehicleList" :value="item.id" :key="item.id" :label="item.name">
<span>{
{ item.name }}</span>
<span style="float:right;color:#ccc">{
{ item.id }}</span>
</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row v-if="vehicle.vehicle_type == 1">
<Col span="24">
<FormItem :label="$t('vehicle_weight')" prop="vehicle_weight">
<Input v-model="vehicle.vehicle_weight" :placeholder="$t('input_vehicle_weight')" ></Input>
</FormItem>
</Col>
</Row>
<Row v-if="vehicle.vehicle_type == 2">
<Col span="12">
<FormItem :label="$t('container_type')" prop="container_type">
<Select v-model="vehicle.container_type" filterable >
<Option v-for="item in container" :value="item.id" :key="item.id" :label="item.name">
<span>{
{ item.name }}</span>
<span style="float:right;color:#ccc">{
{ item.id }}</span>
</Option>
</Select>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('container_weight')" prop="container_weight">
<Input v-model="vehicle.container_weight" :placeholder="$t('input_container_weight')" ></Input>
</FormItem>
</Col>
</Row>
<Row v-if="vehicle.vehicle_type == 2">
<Col span="12">
<FormItem :label="$t('vehicle_id_number')" prop="vehicle_id_number">
<Input v-model="vehicle.vehicle_id_number" :placeholder="$t('input_vehicle_id_number')" ></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('container_no')" prop="container_no">
<Input v-model="vehicle.container_no" :placeholder="$t('input_container_no')" ></Input>
</FormItem>
</Col>
</Row>
<Row v-if="vehicle.vehicle_type == 2">
<Col span="12">
<FormItem :label="$t('vehicle_head_weight')" prop="vehicle_head_weight">
<Input v-model="vehicle.vehicle_head_weight" :placeholder="$t('input_vehicle_head_weight')"></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem :label="$t('vehicle_frame_weight')" prop="vehicle_frame_weight">
<Input v-model="vehicle.vehicle_frame_weight" :placeholder="$t('input_vehicle_frame_weight')" ></Input>
</FormItem>
</Col>
</Row>
</Form>
<div slot="footer">
<Button type="text" @click="modalCancel">取消</Button>
<Button type="primary" @click="modalSumit">确定</Button>
</div>
</Modal>
That is, in the Modal on the official document,
on-ok='xx', remove on-cancel='xx', (@on-ok="modalSumit" @on-cancel="modalCancel") Don’t keep it, just define the event outside
In this way, the bullet frame can be customized.