iview中的Modal和Drawer_iview drawer-CSDN博客

本文链接：https://blog.csdn.net/weixin_45426989/article/details/102963620

本文介绍了在后台开发中如何利用iview的Modal和Drawer组件，特别是Drawer在添加和编辑操作中的广泛应用。动态组件的实现过程中，通过按钮触发并根据传入值决定渲染哪个子组件，重点讨论了如何解决深度监听父组件传递值的问题。Modal常用于弹出窗口执行修改等操作，例如在列表页面中点击按钮弹出对话框完成特定属性的修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview中的Modal和Drawer

在后台开发中，经常使用到Modal和Drawer，尤其是Drawer用的很多很多，比如一些添加和编辑操作，就使用Drawer来呈现表单。

    <Drawer
      title="角色设置"			 // 设置Drawer的标题
      v-model="roleCountUpdate"  // 绑定的值用来表示是否显示这个Drawer
      width="50%" 				// 宽度占整屏幕的50%
      :mask-closable="true"
      :styles="roleDrawerStyles" // 一些样式
    >
      <RoleSetting @hideHandle="drawerHided" :roleId="selectedRole.id"></RoleSetting> // 子组件
    </Drawer>

用的也不难，可以说是最基本的了

<Drawer
      :title="'价格设置 产品名称:' + productName"
      v-model="priceSetting"
      width="50%"
      :mask-closable="true"
      :styles="drawerStyles"
    >
      <component  // 动态组件
          :is="currentTabComponent"  // 值是需要渲染的子组件的名字
          :goodsId="selectedProduct.productId" // 向子组件传递的值
          @hideHandle="drawerHided"
       ></component>
</Drawer>

动态组件的需求是，通过点击一个按钮判断拿到的值是何种类型，从而渲染某个组件，这里子组件接收值得时候遇到了问题，就是监听不到从父组件传来的值，同时监听不到第一次传递的值。进而找到了深度监听

至于对话框Modal，一般是用来弹出一个窗口，执行某个操作，例如，在一个列表展示的页面中，需要修改制定的某个属性，在点击按钮后弹出对话框，对话框中进行修改操作。

<Modal v-model="roleChange" class-name="vertical-center-modal"> // v-model绑定的值，用来显示对话框
      <p slot="header" style="text-align:center">
          <span>角色设置</span>
      </p>
      <Select v-model="roleKey" style="width:200px" placeholder="请选择角色">
         <Option v-for="item in roleItems" :value="item.role_key" :key="item.id">{{ item.name }}			</Option>
      </Select>
      <div slot="footer">
        <Button size="small" @click="roleChange=false">取消</Button>
        <Poptip  								//气泡组件的使用是为了进一步确认，可以有返回的余地
          confirm
          placement="right"
          title="是否确认修改？"
          @on-ok="getRoleUpdate">				// 当点击确认的时候执行的函数
          <Button type="primary" size="small">确定</Button>
        </Poptip>
      </div>
    </Modal>