Vue自定义render统一项目组弹框功能资源-CSDN文库

39 浏览量 2020-11-20 11:29:18 上传评论收藏 174KB PDF 举报

资源推荐

资源详情

资源评论

Vue自定义自定义render统一项目组弹框功能统一项目组弹框功能

一、本文收获一、本文收获

pick

二、为什么要统一封装弹框；二、为什么要统一封装弹框；

要封装成怎样

通过举例常规弹框的写法。我们可以体会到，通常要弹出一个页面，需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue （弹

框主体）；需要 parent.vue 设置flag控制弹框显示隐藏， normalDialog.vue 关闭的时候设置 parent.vue 对应 flag 。缺点：流程繁

杂、配置繁琐、不灵活、样式不统一和参数传递麻烦等。如果一个项目弹框较多的时候，弊端将会更明显，大量的

isXxxDialogShow ，大量的 vue 文件。因此项目组急需一个能简单配置就能弹出弹框的 API 。

1. 常规弹框写法 dialoBody.vue （弹框主体）（弹框主体），此处采用 Composition API 的写法。只做了简单的页面，包含校验，抽取保存数据

的常规逻辑。

<template>

<div class="dialog-body">

<div class="item">

<div>名称</div>

<el-input v-model="name"></el-input>

</div>

<div class="item">

<el-radio-group v-model="attention">

<el-radio label="已关注"></el-radio>

<el-radio label="等下关注"></el-radio>

</el-radio-group>

</div>

<div class="item">

<el-radio-group v-model="like">

<el-radio label="已点赞"></el-radio>

<el-radio label="等下点赞"></el-radio>

</el-radio-group>

</div>

</div>

</template>

<script>

import { reactive, toRefs } from '@vue/composition-api'

import pick from 'lodash/pick'

import { Message } from 'element-ui'

export default {

props: {

defaultName: String,

},

setup(props, ctx) {

const ATTENTIONED = '已关注'

const LIKED = '已点赞'

const state = reactive({

name: props.defaultName, // 名称

attention: '已关注', // 关注

like: '已点赞', // 点赞

})

/*************************************************************

* 页面绑定的事件

* 建议写法:

* 1. 定义methods常量

* 2. 处理相关业务逻辑的时候,需要绑定事件到页面的时

* 建议通过methods.onXxx = ()=>{ // 相关逻辑 }的形式定义

* 好处1: onXxx定义的位置和相关业务逻辑代码关联一起

* 好处2: 可以统一通过...methods的形式在setup统一解构

* 好处3: 当页面逻辑复杂,需要操作的数据关联性强,不可拆解组件;

* 可将相关业务的代码在独立模块定义;

* 独立模块暴露API handleXxx(methods,state),流水线加工methods;

* 和Vue2源码一样,流水线加工的思想.

*/

const methods = {}

// 校验名称

剩余8页未读，继续阅读

内容反馈

weixin_38723513

粉丝: 5
资源: 948

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip