简单实现<el-dialog>二次封装

代码<template> <el-dialog class="example-dialog" title="实例弹层" :visible="visible" @close="closeDialog" width="650px"> <div class="example-dialog-conn"></div> </el-dialog> </template> <script> export default { name: 'exampleDialog', props: { open: { type: Boolean, default: false } }, computed: { visible: { get() { return

学习 · 2022-03-18

自定义实现简单柱形图

前言前两天下发一个需求，需要实现一个月统计图，但是只显示最近周。思来想去找到了Echats，但是具体跟UI设计差别过大，数据也不好整理。鼓捣了一早上之后选择放弃了。其实Echats也蛮好的，提供了多样化的数据图表，示例中涵盖各行各业。实现设计图如下，实现要求是当日加粗实体显示，其他模糊化，但可以选中查看。HTML结构结构规划比较简单，整体+容器+项目（头部/内容/底部），内容分有背景条和柱形条，就目前背景还没有去实现，主要点就是柱形条的高度变化和整体高度之间的处理。<div class="zin-chat"> <div class="zin-chat-container"> <!-- 柱形 --> <div class="zin-chat-item" :class="{ today: index === today }" @click="today = index" v-for=&q

学习 · 2022-01-06

记一次购物车实现map以及computed计算

编写商城系统过程中，购物车是不可缺少的一部分，可以说购物车功能的实现可以说是非常重要的。本次实现需要前置知识：vue 基操JavaScript 的数组操作（点这里看教程 -> 菜鸟教程）而针对单商户和多商户的数据结构又有所不同单商户 shopCart: [ { id: 9000012, name: "商品名称", price: "99.99", count: 1, // 数量 checked: false, // 选择 ...其他 } ];多商户 shopCart: [ { id: 6000012, name: "商户名称", goods: [ { id: 9000012, name: "商品名称", pric

学习 · 2020-12-15
2020 - 2025 LETTERED. All Rights Reserved.
Theme Jasmine by Kent Liao | 桂ICP备15008025号-6