zoukankan      html  css  js  c++  java
  • el-dialog 封装成子组件

    1.父组件的写法

     <upload-dialog :upload-visable.sync="dialogFormVisible"></upload-dialog> 

    2 子组件的写法;

     ①父组件传过来的值uploadVisible,子组件:visible.sync 不要直接使用,:visible.sync 重新定义一个变量,用watch 监控去关联两者的关系

          如果不暂存,会报 Avoid mutating a prop directly since the value will be overwritten whenever

     ② @close 这里用:before-close也是可以的,不过用before-close需要写成函数

    <template>
      <div>
        <el-dialog
          title="发布版本"
          :visible.sync="dialogFormVisible" //本地定义的变量
          @close="$emit('update:uploadVisable',false)"
          center
        >
          <el-form ref="dataForm" label-position="left" label-width="90px" style=" 100%;">
            <el-form-item label="版本文件">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  Android文件名格式:RSpeedo_android_版本号.apk 例如:RSpeedo_android_0.1.4.apk
                  <br />Windows文件名格式:RSpeedo_pc_版本号.exe 例如:RSpeedo_pc_1.1.7.exe
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="升级标志">
              <el-checkbox v-model="checked">强制升级</el-checkbox>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:uploadVisable',false)" class="rc-button__cancel">取消</el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    
    export default {
      name: '',
      props: {
        uploadVisable: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
          checked: false,
          dialogFormVisible: this.uploadVisable //初始化赋值
        }
      },
      updated () {
        console.log("value5:", this.dialogFormVisible)
      },
      watch: {
        uploadVisable (val) {
          console.log("watch:", val)
          this.dialogFormVisible = val
        }
      },
      components: {},
      methods: {
        handleBeforeClose () {
          this.$emit('upload-change')
        }
      }
    }
    </script>
    

      

  • 相关阅读:
    <<软技能,代码之外的生存技能>>读书笔记
    Pma模块详解,对用户登录linux等进行限制,密码修改限制等
    numpy pandas matplotlib
    numpy安装包scipy
    linux python 安装 nose lapack atlas numpy scipy
    kafka搭建
    实例化Bean的方法(基于xml配置)-http://blog.csdn.net/shymi1991/article/details/48153293
    转-Vue.js2.0从入门到放弃---入门实例(一)
    form表单传递对象数组
    使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
  • 原文地址:https://www.cnblogs.com/moon-yyl/p/13163536.html
Copyright © 2011-2022 走看看