vue⾃定义组件+Dialog对话框组件定制弹出框教程（原创）1、新建⼀个.vue页⾯，写⼀个Dialog组件、把弹出框上想要展⽰的内容放进去。
<template>
<el-dialog
title="新增标签"
:visible.sync="centerDialogVisible"
width="80%"
center>
<div>
<div ></div>
<h4>基本信息</h4>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="标签类⽬" prop="region" class="region">
<el-select v-model="ion" placeholder="所属标签类⽬">
<el-option label="标签类⽬" value="shanghai"></el-option>
<el-option label="标签类⽬" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="标签名称" prop="name" class="tname"placeholder="请输⼊标签名称">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="标签编码" prop="name" class="tcode"placeholder="请输⼊标签编码">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="主体类型" prop="ttype" class="ttype">
<el-select v-model="ion" placeholder="所属标签类⽬">
<el-option label="社会法⼈" value="shanghai"></el-option>
<el-option label="⾃然⼈" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="更新周期" prop="ttype" class="tcir">
<el-select v-model="ion" placeholder="请选择更新周期">
<el-option label="每天" value="shanghai"></el-option>
<el-option label="每周" value="beijing"></el-option>
<el-option label="每⽉" value="beijing"></el-option>
<el-option label="每年" value="beijing"></el-option>
</el-select>
</el-form-item>
<span class="syx">是否隐形</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
label="是否隐形" class="yx">
</el-switch>
<span class="sbz">备注</span>
<el-input
label="备注"
type="textarea"
:rows="2"
placeholder="请输⼊备注信息"
v-model="textarea"
class="bz">
</el-input>
<h4 class="tagz">标签值分层</h4>
<el-form-item label="来源表" prop="ttype" class="lyt">
<el-select v-model="ion" placeholder="请选择搜索选择来源表">
<el-option label="测试" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="来源数据项" prop="ttype" class="lyd">
<el-select v-model="ion" placeholder="请选择搜索来源数据项">
<el-option label="测试" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-table
:
data="ttable"
class="ttable">
<el-table-column
prop="rule"
label="规则"
input标签placeholder属性
width="280">
<el-select v-model="ruleForm.tj" >
<el-option label="测试" value="shanghai"></el-option>
</el-select>
<el-input v-model="ruleForm.tji" ></el-input>
</el-table-column>
<el-table-column
prop="tvalue"
label="标签值"
width="180">
<el-input v-model="ruleForm.tji" ></el-input>
</el-table-column>
<el-table-column
prop="tms"
label="标签描述">
<el-input v-model="ruleForm.tji" ></el-input>
</el-table-column>
<el-table-column
prop="ms"
label="操作">
<el-button src="../../assets/image/HTSCIT_.png" circle><img src="../../assets/image/close (2).png" /></el-button>          <el-button src="../../assets/image/close(2).png" circle><img src="../../assets/image/HTSCIT_.png" /></el-button>        </el-table-column>
</el-table>
<el-form-item>
<el-input v-model="input" placeholder="新增标签内容" class="content"></el-input>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="scope._self.$refs[`popover-${scope.$index}`].doClose()" >取消</el-button>
</el-form-item>
</el-form>
<el-button slot="reference"  class="buttong3">新增</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "Popup",
data(){
return{
centerDialogVisible:false,
ruleForm:{},
rules:'',
value:'',
textarea:'',
ttable:[],
input:'',
//校验的规则
rules: {
name: [
{ required: true, message: '请输⼊活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
},
}
}
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/index/tag.css";
</style>
2、在页⾯中添加⾃定义组件的双标签，⽤ref获取组件中想要获取的内容
<Popup ref="Popup"></Popup>
注：要和弹出按钮(触发单击弹出事件的)有公共的div
3、注册组件
在页⾯中引⼊⾃定义组件，并且注册
import Popup from '/src/components/labelfact/Popup.vue';
components:{//注册组件
Popup,
},s
4、在点击事件中打印$refs⾥取到的内容，在打印结果中查控制弹出状态的属性
或者在Dialog标签中查
<el-dialog
title="新增标签"
:visible.sync="centerDialogVisible"//⼀般情况下是这个
width="80%"
center>
到以后把状态指定为弹出
this.$DialogVisible = true;
运⾏->完美
注：弹出框周围要有阴影部分，否则说明⽤错组件了最后：感谢可爱⼩仙⾰的细⼼指导

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。