vue3.0 组件篇Dialog

文章目录

• • 组件介绍
  • 安装与使用
  • 组件代码
  • 参数说明
  • 事件
  • 关于dxui组件库

组件介绍

dialog是用户的交互式组件，常用在当前页面的消息确认，通知等

如何用vue3构建一个dialog的组件，应该满足哪些功能？

1. 想要能够自定义头部 尾部 主要内容
2. 得能够控制dialog的弹出 消失
3. 确认或者取消按钮
4. 能够控制dialog的宽度
5. 需要占满整个屏幕，交互区域应该位于屏幕正中间，点击其它地方无效
6. 你还能想到什么？

安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Dialog } from 'vue3-dxui'export default {components: {Dialog}
}
</script>

使用示例

<template><Dialog:visible="normalViaible"@cancel="handleClickCancelButton(1, 2, 3, $event)"@confirm="handleConfirmButton"title="这是标题"width="500px">这是内容这是内容这是内容这是内容这是内容</Dialog>
</template><script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { Dialog } from 'vue3-dxui'
@Options({components: {Dialog,}
})
export default class Home extends Vue {normalViaible = falsechangeNormalVisible() {this.normalViaible = !this.normalViaible}handleClickCancelButton() {this.normalViaible = !this.normalViaible}handleConfirmButton() {this.normalViaible = !this.normalViaiblealert('点击了确定')}
}
</script>

组件代码

<template><div v-show="visible" class="dx-dialog-warpper"><div class="dx-dialog-inner"><div class="dx-dialog-box border-radius" :style="`width:${width}`"><div><slot name="headerContent" /><div class="dx-dialog-header" v-if="showHeaderResult"><h3 class="dx-dialog-title">{{ title }}</h3><span v-if="showClose" @click="onClickCancelButton" class="dx-dialog-close">X</span></div></div><div class="dx-dialog-body margin-tb-12"><slot /></div><div><slot name="footerContent" /><div class="dx-dialog-footer" v-if="showFooterResult"><Button v-if="showCancelButton" @click="onClickCancelButton" mode="text">{{ cancelText }}</Button><Button v-if="showConfirmButton" @click="onClickConfirmButton">{{ confirmText }}</Button></div></div></div></div></div>
</template><script lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref } from 'vue'import { Data } from './types/index'import Button from '@/components/button/Button.vue'export default {props: {// dialog标题title: {required: false,default: '',type: String},// dialog 是否出现visible: {required: false,default: false,type: Boolean},// cancel 按钮的文字cancelText: {required: false,default: '取消',type: String},// confirm按钮的文字confirmText: {required: false,default: '确认',type: String},// 是否需要头部 头部包含关闭按钮 默认为trueshowHeader: {required: false,default: true,type: Boolean},// 是否需要footer 默认为true 如果为false confirm 和 concel按钮将会消失showFooter: {required: false,default: true,type: Boolean},// 是否需要close 默认true 如果为false右上角的关闭x将不显示showClose: {required: false,default: true,type: Boolean},// 是否需要cancel按钮 默认为true 如果为false,cancel按钮将不会显示showCancelButton: {required: false,default: true,type: Boolean},// 是否需要confirm按钮 默认为true 如果为false,confir按钮将不会显示showConfirmButton: {required: false,default: true,type: Boolean},// 自定义宽度 默认autowidth: {required: false,default: 'auto',type: String}},components: {Button},setup(propsData: Data) {const currentInstance: ComponentInternalInstance | null = getCurrentInstance()function onClickCancelButton(e: Event) {currentInstance?.emit('cancel', e)}function onClickConfirmButton(e: Event) {currentInstance?.emit('confirm', e)}// 自定义尾部const showFooterResult = ref(propsData.showFooter)const footerContent = currentInstance?.slots.footerContentif (footerContent) {showFooterResult.value = false}// 自定义头部const showHeaderResult = ref(propsData.showHeader)const headerContent = currentInstance?.slots.headerContentif (headerContent) {showHeaderResult.value = false}return {showHeaderResult,showFooterResult,onClickCancelButton,onClickConfirmButton}}
}
</script><style lang="scss" scoped>
@import '@/scss/layout.scss';
.dx-dialog-warpper {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.3);user-select: none;.dx-dialog-inner {display: table-cell;width: 100vw;height: 100vh;text-align: center;vertical-align: middle;.dx-dialog-box {// width: 460px;display: inline-block;padding: 24px 24px 12px 24px;background: $white-color;text-align: left;}}.dx-dialog-header {position: relative;display: flex;.dx-dialog-title {line-height: 30px;width: calc(100% - 30px);}.dx-dialog-close {position: absolute;right: 0;top: 0;cursor: pointer;}}.dx-dialog-footer {text-align: right;}
}
</style>

参数说明

事件

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
2. dxui新上线的官网域名变更 http://dxui.cn
3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
4. 如果你想看完整源码 https://github.com/757363985/dxui

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！