El cuadro de diálogo iview Modal no se cierra después de hacer clic en el botón Aceptar, eventos personalizados

En algunos casos, necesitamos un cuadro de viñetas, el cuadro de diálogo iview Modal se puede realizar, pero necesitamos transformar

Personaliza el pie de página para evitar que se cierre

el código se muestra a continuación:

<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 "> 
          <Entrada v- model = "vehicle.vehicle_no": placeholder = "$ t ('input_vehicle_no')"> </Input> 
        </FormItem> 
      </Col> 
      <Col span = "12">
        <FormItem: label = "$ t ('nombre_empresa')" prop = "nombre_empresa"> 
      </Col> 
    </Row> 
    <Row> 
          <Input v-model = "vehicle.driver_company_name": placeholder = "$ t ('input_driver_company_name')"> </Input>
        </FormItem> 
      <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 "> 
          <Entrada 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 "> 
          <Seleccione v-model =" vehicle.vehicle_type "filtrable> 
            <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> 
    <Fila 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"> 
          <Seleccione v-model = "vehicle.container_type" filtrable> 
            <Opción 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> 
          </ Seleccione>
        </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> 
    <Button type = "primary" @ click = "modalSumit"> 确定 </Button> 
  </div> 
  </Form>
  <div slot = "footer"> 
    <Button type = "text" @ click = "modalCancel"> 取消 </Button>
</Modal>

 

Es decir, en el Modal del documento oficial,

on-ok = 'xx', remove on-cancel = 'xx', (@ on-ok = "modalSumit" @ on-cancel = "modalCancel") No lo guardes, solo define el evento fuera

De esta manera, el marco de bala se puede personalizar.