[OK]ボタンをクリックした後、iviewモーダルダイアログボックスが閉じない、カスタムイベント

場合によっては、箇条書きが必要です。iviewモーダルダイアログボックスを実現できますが、変換する必要があります。

フッターが閉じないようにカスタマイズします

コードは次のように表示されます。

<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> 
        <FormItem：label = "$ t（ 'driver_tel'）" prop = "driver_tel"> 
      </ 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 ">
          <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> 
            </オプション> 
          </ >を選択します
        </ 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>
</モーダル>

 

つまり、公式文書のモーダルでは、

on-ok = 'xx'、remove on-cancel = 'xx'、（@ on-ok = "modalSumit" @ on-cancel = "modalCancel"）保持せず、外部でイベントを定義するだけです

このようにして、弾丸フレームをカスタマイズできます。