vue-element-ui 弹出页面层 - 人五人六博客网_个人技术博客_php、前端vue等技术分享_个人经验

需求：需要在商品列表页面点击添加商品按钮弹出添加商品页面

解决：一、通过抽屉drawer弹出

二、通过dialog弹出

本文主要讲通过dialog弹出，其实原理是一样的。只是标签不一样

首先、在src/components目录下创建文件夹addGoods,将添加商品页面复制到该文件夹下（注意如果添加商品页面有通过相对路径引入文件的记得调整路径）

<!-- 其次、在商品列表页面通过dialog引入文件 -->
<el-dialog :visible.sync="addGoodsVisible" :center="true" title="引用单据">
       <add-goods></add-goods>
</el-dialog>

//js中引入文件
  import addGoods from '@/components/addGoods/index'

这样就可以了，当然还可以做其他扩展，如果需要向添加商品页面传递参数只需要如下示例：

<el-dialog :visible.sync="addGoodsVisible" :center="true" title="引用单据">
       <add-goods :type="1"></add-goods>
</el-dialog>

然后在添加商品里面通过props接收,然后通过watch监听type变化

export default {
    name: 'addGood',
    props:['type'],
    watch:{
        type(value){
            this.goodsType = value
            //其他操作
        },
    },
    mounted() {
        if(this.type){
            this.goodsType = this.spbm
        }
    }
}

另外：如果在弹出添加商品页面还有dialog弹出导致层级问题，只需要在dialog标签添加append-to-body属性

<el-dialog :visible.sync="selectPictureVisible"
      append-to-body :center="true" title="选择图片">
      <picture-list @selectedPicture="selectedPicture" :picture_key="pictureKey" :max_num="maxNum" :keyword="pictureKeyword"></picture-list>
    </el-dialog>