前奏最近在做考试系统,需要实现: 标题栏点击对应的菜单,底部主区域动态加载对应的界面 红色区域就是要动态替换的 界面通过访问 uri 进行加载 想要结果的,可以直接滑到最后~挫折之路首先想到的就是 iframe,但是它有很大的缺点:不能高度自适应!!!虽然滚动条及边框可以去掉,但是去掉滚动条之后,就不能滚动了,即使内容还没有展示完!!!如果写死 iframe 的高度,或者只在一开始获取 ifram
转载
2024-07-19 20:09:28
635阅读
封装vue组件库1.新建项目新建一个vue项目vue create 项目名2.在src目录下新建一个packages文件夹,用来存放组件文件及字体图标等。目录如下:3.同在packages文件夹下新建一个index.js文件,用来注册所有组件,引入字体图标import Button from './button'
const components = [Button]
// 定义install方法
事先说明:upload所使用"rc-upload"组件在npm是有单独的包,upload对其进一步封装。"rc-upload"有更多的API选择。需求要求限制上传图片的格式、大小、分辨率。简单介绍这是一个最简单的upload组件使用<Upload action="...">
上传
</Upload>简单说一下关键几个参数参数作用action上传的服务器地址,使用默认
转载
2024-03-23 12:41:22
190阅读
您之前可能与文件上传组件交互过,可能是在更新个人资料图片或将文档上传到云时。尽管文件上传组件都有不同的设计,但它们在桌面上往往更直观。通常,它们允许您将文件拖放到特定区域(通常称为拖放区域)并预览它们。在本文中,我们将学习如何使用 Vue 创建我们自己的拖放文件上传组件。我们将能够在最终上传之前预览所选文件并删除任何文件。要继续操作,您可以在 GitHub 上访问完整的代码。完成后,它看起来像下面
今天带来vue用ant design中table表格,点击某行时触发的事件操作教程详解使用customRow 设置行属性,写对应事件:customRow="rowClick"
然后在data里面写
rowClick: record => ({
// 事件
on: {
click: () => {
// 点击改行时要做的事情
// ......
console.log(record, '
转载
2024-06-21 13:30:41
163阅读
1 区间过滤# 方式一:自己写过滤类,配置到视图类的
filter_backends = [自己写的过滤类]
# 方式二:借助django—fileter
# 1 写一个类:
from . import models
from django_filters import filters
class CourseFilterSet(FilterSet):
目录0.VUE简介一、一天的时间段预约1.点击预约时2.获取时间数组3.处理未来七天的函数4.点击切换星期状态7.弹窗关闭二、一月的天数预约(最少一天)0.VUE简介Vue(发音为“view”)是一种流行的开源 JavaScript 框架,用于构建用户界面和单页应用程序 (SPA)。它由 Evan You 于 2014 年创建,近年来获得了极大的人气。Vue 旨在平易近人且易于学习,使其成为所有技
项目:公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求:展示当前日期(服务器时间)前后90天,一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的,需要置灰并且不可点击。点击日历绑定的节点的外部,关闭弹窗。涉及内容:获取服务器时间
转载
2024-08-01 08:22:04
510阅读
最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子功能需求如下:左边是权限菜单,右边对应的是具体权限.1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中,父级权限菜单取消选中,同理. 如下图所示 2.父级权限中所有的权限没有全部选中,父级权限菜单属于半选中状态(注意这里父级权限菜单和子级权限菜单是相对的,父级权限菜单可以是子级权限菜单,
转载
2024-04-02 14:08:37
185阅读
目录实现原理性别选择器实现代码使用方法:效果如下仿百度搜索栏实现代码使用方法效果图注意项实现原理主要参考vue官网上的自定义事件,父组件v-bind给子组件传参数,子组件利用props来接受父组件那边传过来的参数。我们还会遇到一个问题,怎么实时拿到props的值给data里面的值呢?其实很简单,利用watch属性监听props某个值的变化,把新的值给data;拿值拿到了,就根据业或UI的需求实现页
转载
2024-07-08 17:39:50
722阅读
项目简介是一个基于 Vue.js 的 UI 组件库,它是 Ant Design 设计语言在 Vue 生态中的实现,致力于提供高质量的前端开发解决方案。该项目由 Ant Financial 开源,与 Ant Design React 版本保持一致的设计理念和组件体系,为 Vue 开发者带来了与之相媲美的开发体验。技术分析组件丰富Ant Design Vue 包含了大量的 UI 常见组件,如表格、按钮
作者:
jeffrey_hjf
是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架。
使用这些框架你会发现它包括了我们常用的路由,状态,交互等等,我们只需要去复用它的代码,加上一下我们自己少量的逻辑就能轻松的完成项目。
会为你节约更多时间喝喝咖啡等,给你一种“框架在手,天下我有”的感觉。这篇文章主要介绍element和V
转载
2024-03-07 15:23:07
237阅读
DEMO 正文1.组件和插件的区别与联系区别组件的使用频率往往大于插件组件的作用范围往往小于插件联系插件可以封装组件,组件可以暴露数据给插件这里不做过多阐述,有兴趣可以参考下劳卜大大的这篇文章,写的很通俗易懂。2.实现插件的必备因素基础你需要清楚的知道vue的一些高阶知识点以及相关内容,比如Vue.extend构造器$mount手动挂载实例mixin混合注入父子组件传参
学习目标:自定义下拉框树结构组件学习内容:代码如下<template>
<div class="treeSelect">
<el-select
ref="mySelect"
v-model="valueTitle"
:multiple="multiple"
转载
2024-07-15 10:27:41
147阅读
Ant Design of Reactantd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。设计语言:随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值
转载
2024-03-23 08:41:31
76阅读
Ant Design(蚂蚁组件)是蚂蚁集团体验技术部经过大量项目实践和总结,逐步打磨出的一个设计系统,内含带有 React 的 UI 库。它是为企业级产品设计而创建的。Ant Design 提供了高质量的交互界面设计组件和演示。作为 UI 设计师,在我们的工作中,善于利用现有的设计系统组件能够极大地提升工作效率。今天,即时设计设计师将向大家介绍广泛使用的设计系统 Ant Design 以及它的使用
转载
2024-03-12 14:41:01
55阅读
大部分项目都需要一个菜单栏进行切换,所以学习了一下怎样封装一个tabbar组件,这样以后使用的时候可以直接拿来使用。1.路由router首先是路由的设置,这个在之前的随笔中已经写过相关的使用方法。说一下使用tabbar,在标签栏下面点击切换页面的时候,跟随到不同的路径,就需要配置相关的router,根据不同的路径展示不同的页面。入口App中的div:<div id="app">
大文件分片上传就是一个契合分治算法的场景,现而今,视频文件的体积越来越大,高清视频体积大概2-4g不等,但4K视频的分辨率是标准高清的四倍,需要四倍的存储空间——只需两到三分钟的未压缩4K 电影,或者电影预告片的长度,就可以达到500GB。 8K视频文件更是大得难以想象,而现在12K正在出现,如此巨大的文件,该怎样设计一套合理的数据传输方案?这里我们以前后端分离项目为例,前端使用Vue.js3.0
转载
2024-10-29 20:11:57
87阅读
Iframe是一个历史悠久的HTML元素,根据MDN WEB DOCS官方介绍,Iframe定义为HTML内联框架元素,表示嵌套的Browsing Context,它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享,并且具有使用简单、高兼容性、内容隔离等优点,因此以Iframe为核心形成了前端平台架构领域第1代技术。
引言
转载
2023-12-23 22:07:33
210阅读
目的:记录一下自己工作过程中遇到的 Ant Design Vue 开发问题 文章目录Ant Design Vue 开发问题async和await让异步编程更简单1、antdv中table组件 scopedSlots 和 ellipsis 属性一起使用,悬浮框失效问题2、antdv修改调用的后端地址3、Java修改application名称和IP地址4、antdv调用后端接口文件5、antdv路由文