前端组件业务数据选择功能优雅写法

1. 业务场景

后台管理在实际业务中,经常可见的功能为:在当前的页面中从其他列表中选择数据。

例如,在一个商品活动列表页面中 需要选择配置的商品。

2. 遇到问题

从代码划分的角度来说,每个业务列表代码首先分散开来,各自为一个文件夹。如果想在业务A中选择业务B的数据,那么常规写法为封装一个组件,然后在当前页面中引用,代码大概如下。

import DataList from '@/xxx'

<DataList />

3. 优雅写法

但是这个看起来实在繁琐,尤其在今日学习某项目学到一种写法后再看此方式这种感觉尤为强烈。

那便是将组件挂在到 Vue.property 里,直接通过 js 代码操作。

使用方代码如下:

只需要调用一个方法,并在参数写上选择后的回调函数,回调函数的参数就是选择上的数据。

4. 实现方式

4.1 定义 Vue 组件

import Element from 'element-ui'
import '@/styles/element-variables.scss'
import cardFormComponent from './index.vue'
import Vue from 'vue'
import Cookies from 'js-cookie'Vue.use(Element, {size: Cookies.get('size') || 'medium' // set element-ui default size
})
const cardFrom = {}
cardFrom.install = function(Vue, options) {const ToastConstructor = Vue.extend(cardFormComponent)// 生成一个该子类的实例const instance = new ToastConstructor()instance.$mount(document.createElement('div'))document.body.appendChild(instance.$el)Vue.prototype.$modalCard = function(callback) {instance.visible = trueinstance.callback = callback}
}
export default cardFrom

4.2 组件代码

<template><div><el-dialogtitle="优惠券列表":visible.sync="visible"width="1400px"top="30px":before-close="handleClose"><data-list v-if="visible":send="true"@getChooseCardIdList="getChooseCardIdList"/></el-dialog></div>
</template><script>
import dataList from '../index.vue'export default {name: 'CardForm',components: { dataList },data() {return {visible: false,callback: function() {}}},methods: {handleClose() {this.visible = false},getChooseCardIdList(cardIdList) {this.callback(cardIdList)this.visible = false}}
}
</script><style scoped></style>

4.3 注册Vue组件

在 main.js 配置

import cardForm from '@/views/card/card/cardForm/index.js'Vue.use(cardForm)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode刷题之HOT100之在排序数组中查找元素的第一个和最后一个位置

下午雨变小了&#xff0c;但我并未去实验室&#xff0c;难得的一天呆在宿舍。有些无聊&#xff0c;看看这个&#xff0c;弄弄那个&#xff0c;听听歌&#xff0c;消磨时间。不知觉中时间指针蹦到了九点&#xff0c;做题啦&#xff01;朋友推荐了 Eason 的 2010-DUO 演唱会&…

修改el-select默认样式

在开发过程中&#xff0c;我们一般遇到特殊的UI效果图&#xff0c;不得不修改<el-select>默认样式了。 修改el-select框样式 <template><el-selectv-model"yearValue"class"select_box"multipleplaceholder"请选择年份支持多选"…

Python 字符串索引和切片

在 Python 编程语言中&#xff0c;字符串是一种不可变的序列&#xff0c;可以通过索引和切片来访问字符串中的字符或子串。 索引&#xff1a;字符串中的每个字符都有一个对应的索引&#xff0c;索引从0开始&#xff0c;依次递增。通过索引可以访问字符串中特定位置的字符。例如…

如何利用python下载原创力文档

原创力文档是一个文档资源共享平台&#xff0c;文档内容类型丰富&#xff0c;包含计算机、高等教育、金融投资、医药卫生、汽车机械、外语学习、报告分析、法律法规、研究生考试、电子工程、经济贸易、建筑施工、幼儿小学教育、中学教育、文学历史、资格认证考试、人力资源、学…

2024年06月数据库流行度最新排名

点击查看最新数据库流行度最新排名&#xff08;每月更新&#xff09; 2024年06月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多&#xff0c;这个数据库就被认为越受欢迎。这是一个领先指标。原始数…

低代码是什么?开发系统更有什么优势?

低代码&#xff08;Low-Code&#xff09;是一种应用开发方法&#xff0c;它采用图形化界面和预构建的模块&#xff0c;使得开发者能够通过少量的手动编程来快速创建应用程序。这种方法显著减少了传统软件开发中的手动编码量&#xff0c;提高了开发效率&#xff0c;降低了技术门…

描述Python中的命名空间和作用域。

在Python中&#xff0c;命名空间&#xff08;Namespace&#xff09;和作用域&#xff08;Scope&#xff09;是两个重要的概念&#xff0c;它们帮助程序员理解和管理变量的可见性和生命周期。 命名空间 命名空间是一个从名字到对象之间的映射。Python中的每一个模块、函数和类…

thingsboard物联网平台快速入门教程

第一步&#xff0c;搭建服务器 使用我已经建好的服务器&#xff0c;thingsboard测试账号,租户管理员账号&#xff0c;物联网测试平台-CSDN博客 第二步&#xff0c;创建一个设备&#xff0c;获取设备Token 用租户管理员账户登录&#xff0c;左侧找到实体->设备&#xff0c…

持续总结中!2024年面试必问 20 道 Kafka面试题(二)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道 Kafka面试题&#xff08;一&#xff09;-CSDN博客 三、什么是 Topic 和 Partition&#xff0c;它们在 Kafka 中的作用是什么&#xff1f; 在 Kafka 中&#xff0c;Topic 和 Partition 是两个核心概念&…

Oracle导出clob字段到csv

使用UTL_FILE ref: How to Export The Table with a CLOB Column Into a CSV File using UTL_FILE ?(Doc ID 1967617.1) --preapre data CREATE TABLE TESTCLOB(ID NUMBER, MYCLOB1 CLOB, MYCLOB2 CLOB ); INSERT INTO TESTCLOB(ID,MYCLOB1,MYCLOB2) VALUES(1,Sample row 11…

Fiddler抓包工具的使用

目录 1、抓包原理&#xff1a;&#x1f447; 2、抓包结果&#x1f447; 1&#xff09;如何查看一个http请求的原始摸样&#xff1a; 2&#xff09;分析数据格式&#xff1a; 3、请求格式分析&#x1f447; 4、响应格式分析&#x1f447; 官网下载&#xff1a;安装过程比较…

Java Web前端日志:深度解析、挑战与最佳实践

Java Web前端日志&#xff1a;深度解析、挑战与最佳实践 在Java Web开发的世界里&#xff0c;前端日志的管理是一项至关重要且富有挑战性的任务。前端日志不仅有助于开发者深入了解应用的运行状况&#xff0c;更能协助排查潜在问题&#xff0c;提升用户体验。本文将深入探讨Ja…

C#按钮样式设置XMAL

统一按钮样式 <Window.Resources> <!--按钮样式统一设置&#xff0c;个别按钮单独定义样式的话则需要在定义按钮位置单独设置--><Style TargetType"Button"><Setter Property"Background" Value"Red"/><Setter Prop…

【评价类模型】Topsis

综合赋权法&#xff1a;Topsis法&#xff1a; 主要适用情况&#xff1a;题目提供了足够的评价指标和数据&#xff0c;数据已知&#xff0c;评价指标的类型差异较大 基本思想&#xff1a;将所有方案与理想解和夫理想解进行比较&#xff0c;通过激素那方案与这两个解的举例去欸的…

深度学习复盘与论文复现B

文章目录 1、Knowledge Review1.1 NLLLoss vs CrossEntropyLoss1.2 MNIST dataset1.2.1 Repare Dataset1.2.2 Design Model1.2.3 Construct Loss and Optimizer1.2.4 Train and Test1.2.5 Training results Pytorch-Lightning MNIST :rocket::fire:1.3 Basic Convolutional Neu…

笔记:美团的测试

0.先启动appium 1.编写代码 如下&#xff1a; from appium import webdriver from appium.webdriver.extensions.android.nativekey import AndroidKeydesired_caps {platformName: Android,platformVersion: 10,deviceName: :VOG_AL10,appPackage: com.sankuai.meituan,ap…

Android关闭硬件加速对PorterDuffXfermode的影响

Android关闭硬件加速对PorterDuffXfermode的影响 跑的版本minSdk33 编译SDK34 import android.content.Context import android.graphics.Bitmap import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Port…

wgs84 坐标、gcj02坐标相互转换

wgs84 坐标、gcj02坐标相互转换 package com.example.demo.util;import com.example.demo.dto.json.vo.Gps;/**** wgs84 84年提出&#xff0c;大地坐标&#xff0c;也是原始坐标。* gcj02 02年提出&#xff0c;火星坐标&#xff0c;经过加密算法。大多数非百度中国地图厂商基本…

OpenMV学习笔记3——画图函数汇总

画图&#xff0c;即在摄像头对应位置画出图形&#xff0c;对于需要反馈信息的程序来说很直观。就如上一篇文章颜色识别当中的例子一样&#xff0c;我们在识别出的色块上画出矩形方框&#xff0c;并在中间标出十字&#xff0c;可以直观的看到OpenMV现在识别出的色块。 目录 一…

执法装备管理系统DW-S304的概念与特点

执法装备管理系统&#xff08;DW-S304&#xff09;适用于多种警务和安保场景&#xff0c;如警察局、特警队、边防检查站、监狱管理系统、生态环境局、执法大队等。它可以帮助这些机构提高对装备的控制能力&#xff0c;确保装备在需要时能够迅速到位&#xff0c;同时也减少了因装…