本文主要是介绍新增/弹窗，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

弹窗

下面展示一些 内联代码片。

<!-- 
		新增编辑
	// 参数
	1.title 弹窗命
	2.dialogVisible 是否打开
	3.formValidate 填写参数
	4.loadingbtn 按钮加载状态
	5. eaitl 编辑or新增
	// 方法
	1.init() 初始化参数 调用
	2.getInfo() 根据id 获取详情
	3.add() 保存
	4.modalPicTap() 调用 选择图片
	5.numberChange() 限制输入大小
 -->

<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="640px">
      <template>
        <el-form label-position="left" ref="form" :model="formValidate" class="demo-form-inline form_box" :rules="ruleValidate" label-width="120px">
          <el-form-item label="姓名："  prop="name">
            <el-input class="selWidth" clearable type="text" placeholder="请输入姓名" v-model="formValidate.name" maxlength="30" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="时间：" prop="time">
            <el-date-picker
              v-model="formValidate.time"
              class="selWidth" clearable
              format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
					<el-form-item label="图片："  prop="iamge">
						<div class="upLoadPicBox" @click="modalPicTap('image')" title="250*250px">
						  <div v-if="formValidate.image" class="pictrue">
						    <img :src="formValidate.image"/>
						  </div>
						  <div v-else class="upLoad">
						    <i class="el-icon-camera cameraIconfont"/>
						  </div>
						</div>
					</el-form-item>
          <el-form-item label="数量："  prop="nums">
            <el-input clearable type="number" v-model="formValidate.nums"
              class="selWidth"
              @input="numberChange('nums',arguments[0],100000)"
              @change="numberChange('nums',arguments[0],100000)"
              placeholder="请输入数量">
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
          <el-form-item label="排序："  >
            <el-input-number v-model="formValidate.sort" :min="0" :max="9999" label="请输入排序"></el-input-number>
          </el-form-item>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" :loading="loadingbtn" @click="add()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getbuildDetail, // 详情
    addbuild, // 新增
    updatebuild, // 编辑
  } from "@/api/card-v";
  export default {
    components: {
    },
    data() {
      return {
        title: '新增',
        dialogVisible: false,
        listLoading: false,
        eaitl: true, // 新增or编辑
        loadingbtn: false, // 按钮
        formValidate: {},
      }
    },
    methods: {
      // ========== 初始化 ==========
			init(val) {
				this.formValidate = {
					name: '', // 姓名
					time: [], // 时间
					image: '',
					nums: '', // 数量
					sort: 0, // 排序
				}
				this.eaitl = true // 新增
				if (val) {
					this.getInfo(val)
					this.eaitl = false // 编辑
				}
			},
			// ========== 获取详情 ==========
			getInfo (val) {
				getInfoApi(val.id).then(res => {
					console.log('api获取详情', res.data)
					this.formValidate = res.data
				})
			},
			// ========== 保存 ==========
			add () {
				if (this.eaitl) {
					// 新增
					add(this.formValidate.id, this.formValidate).then(res => {
						this.$emit('save')
						this.$message.success(res.message);
					}).catch(err => {
						this.$message.error(err.message);
					})
				} else {
					api(this.formValidate.id, this.formValidate).then(res => {
						this.$emit('save')
						this.$message.success(res.message);
					}).catch(err => {
						this.$message.error(err.message);
					})
				}
			},
			// ========== 新增图片 ==========
			modalPicTap(key) {
			  this.$modalUpload((img) => {
					this.formValidate[key] = imag[0] // 第一张
			  }, 2);
			},
			// ========== 限制数字输入限制范围 ==========
			numberChange(key,val,maxNum) {
				//转换数字类型
				this.$nextTick(()=>{
					if (Number(this.formValidate[key]) > maxNum) {
						this.formValidate[key] = maxNum
					} else if (Number(this.formValidate[key]) < 1) {
						this.formValidate[key] = 1
					}
				})
			},
    }
  }
</script>

<style scoped lang="scss">
</style>

这篇关于新增/弹窗的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！