Element Dialog 대화 상자 사용 예시
기본 용법
<el-button type="text" @click="dialogVisible = true"> Dialog</el-button>
<el-dialog
title=" "
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span> </span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisible = false"> </el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm(' ？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
사용자 정의 내용
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true"> Dialog</el-button>
<el-dialog title=" " :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label=" " width="150"></el-table-column>
<el-table-column property="name" label=" " width="200"></el-table-column>
<el-table-column property="address" label=" "></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true"> Dialog</el-button>
<el-dialog title=" " :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label=" " :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label=" " :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder=" ">
<el-option label=" " value="shanghai"></el-option>
<el-option label=" " value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="dialogFormVisible = false"> </el-button>
</div>
</el-dialog>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: ' ',
address: ' 1518 '
}, {
date: '2016-05-04',
name: ' ',
address: ' 1518 '
}, {
date: '2016-05-01',
name: ' ',
address: ' 1518 '
}, {
date: '2016-05-03',
name: ' ',
address: ' 1518 '
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
<template>
<el-button type="text" @click="outerVisible = true"> Dialog</el-button>
<el-dialog title=" Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title=" Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false"> </el-button>
<el-button type="primary" @click="innerVisible = true"> Dialog</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
<template>
<el-button type="text" @click="outerVisible = true"> Dialog</el-button>
<el-dialog title=" Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title=" Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false"> </el-button>
<el-button type="primary" @click="innerVisible = true"> Dialog</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
Attributes
Slot
Events
Element 대화 상 자 를 간단하게 사용 합 니 다.
공식 문 서 는 페이지 내 대화 상 자 를 소개 하지만 구성 요소 기반 대화 상 자 는 없습니다.부자 전송 값 이 표시 되 는 지 여 부 를 기록 합 니 다.
부모 페이지 가 져 오기 구성 요소
<template>
<div class="home">
<el-button @click="btnAdd"> </el-button>
<Dialog :visible.sync="visible" title=" "></Dialog>
</div>
</template>
<script>
import Dialog from "../components/dialog";
export default {
name: 'Home',
components: {
Dialog
},
data() {
return {
visible: false
}
},
methods: {
btnAdd() {
this.visible = true
}
}
}
</script>
<template>
<div>
<el-dialog
v-bind="$attrs"
v-on="$listeners"
@open="onOpen"
@close="onClose"
:title="title"
:close-on-click-modal='false'>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-col :span="23">
<el-form-item label=" " prop="userName">
<el-input v-model="formData.userName" placeholder=" " :maxlength="50" clearable
prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label=" " prop="sex">
<el-radio-group v-model="formData.sex" size="medium">
<el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
:disabled="item.disabled">{{item.label}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label=" " prop="birthday">
<el-date-picker v-model="formData.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{width: '100%'}" placeholder=" " clearable></el-date-picker>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer">
<el-button @click="close"> </el-button>
<el-button type="primary" @click="handelConfirm"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
title: String
},
data() {
return {
formData: {
userName: undefined,
sex: 3,
birthday: null,
},
rules: {
userName: [{
required: true,
message: ' ',
trigger: 'blur'
}],
sex: [{
required: true,
message: ' ',
trigger: 'change'
}],
birthday: [{
required: true,
message: ' ',
trigger: 'change'
}],
},
sexOptions: [{
"label": " ",
"value": 1
}, {
"label": " ",
"value": 2
}, {
"label": " ",
"value": 3
}],
}
},
methods: {
onOpen() {
//
},
onClose() {
//
this.$refs['elForm'].resetFields()
},
close() {
// ，
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
// , close()
this.$message.success({
message: " "
})
this.close()
}
})
}
}
}
</script>
Element Dialog 대화 상자 에 대한 예제 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Element Dialog 대화 상자 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 프로젝트에서 Element ui 주마등을 사용하여 수행할 수 없는 문제 해결1. vue 프로젝트에 elementui 도입 http://element.eleme.io/#/zh-CN/component/carousel 도입 후 HTML 섹션 JS 섹션 웹팩으로 구축된 프로젝트는 절대 경로를 직접...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
