功能:ant Design vue使用腾讯播放器实现监控视频直播、点播,多个视频同时播放效果图:自适应布局第一步安装npm包npm install tcplayer@0.0.24 --save第二步封装子组件<template >
<div :id="`video_container_${index}`" class="video_container"></div
转载
2024-03-04 12:57:25
429阅读
说下思路,ant自己的a-upload组件,不好套拖拽,因为我们需要拖拽的是fileList,所以我就把组件自己的fileList搞成空了,自己写了一个‘fileList’,这样我们用数据自己循环出来的filelist就可以进行很多操作了。1.我是把a-upload写成了一个组件, 在组件里用了vue-draggable进行拖拽 先安装 npm install vuedraggable 新建组件
转载
2024-06-09 09:52:44
125阅读
ant-design-pro-vue 文件上传 upLoad 组件的一些使用经验因为工作中需要使用文件上传功能上传附件,公司的后台使用 ant-design-pro + vue 作为前端开发技术栈,因此使用了 ant-design-pro-vue 里面的 upLoad 组件来进行开发。在开发过程中遇到了一些问题,现将一些问题分享出来,希望能帮到后面遇到类似问题的小伙伴尽快脱坑。组件上传的状态没有改
转载
2024-03-20 10:56:24
282阅读
初始化项目用 vue-cli 快速构建项目vue create ant-design-vue-procd ant-design-vue-pro/安装必要依赖npm i ant-design-vue moment删除/初始化 不需要的文件// clear
└──src/
├───router/
│ └───index.js
├───views/
│ └───
转载
2024-07-11 07:04:12
267阅读
探索前沿技术:Ant Design Pro Vue3 - 构建高效企业级应用的新选择在前端开发的世界里,高效的框架和库是我们构建强大应用程序的关键。今天,我们将深入探讨一个引人注目的项目——。这是一个基于Vue3的中台解决方案,它将蚂蚁金服的Ant Design Pro设计理念与Vue3的强大特性相结合,为开发者提供了构建企业级应用的便捷工具。项目简介Ant Design Pro Vue3是Ant
转载
2024-09-27 15:04:03
36阅读
功能演示我们要实现的功能如下,有两个按钮,点击第一个按钮选择文件,选择文件后点击第二个按钮上传到服务器。功能需求:1.只允许上传png、jpg/jpeg格式的图片2.没有上传图片时显示占位图3.选择完图片后在页面中渲染出来!(https://s2.51cto.com/images/blog/202210/10210445_6344186d9919a36592.png?xossprocess=ima
原创
2022-10-10 21:05:41
1207阅读
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。
本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,
转载
2024-04-04 07:08:38
573阅读
01、Vue3.x简介、搭建Vue3.x环境、创建运行Vue3.x项目、分析Vue3.x目录结构(17分41秒) 02、Vue3.x绑定数据、绑定html、绑定属性、循环数据(30分24秒) 03、Vue3.x中的事件方法入门、模板语法模板中类和样式绑定(29分50秒) 04、Vue3.x中的事件方法详解、事件监听、方法传值、事件对象、多事件处理程序、事件修饰符、按键修饰符(24分34秒) 05、
转载
2024-08-12 08:29:25
85阅读
最近开发一个带SEO以及部分后台功能的项目,Nuxt.js作为vue ssr框架可以非常好的完成这个需求,这里我选择了Ant Design Vue作为UI组件库。以下是踩坑的一些记录 :首先介绍一下项目情况和需求:
Nuxt.js是一个 Vue.js 通用框架,预设了使用 Vue.js 开发服务端渲染的各种配置。项目中使用的是Universal (SSR) 模式,因此首屏是由服务端完成渲染。项目仅
转载
2024-04-29 14:38:53
916阅读
开发模式预览 demo在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码。常见的解决方案是像开发一般项目一样使用 webpack-dev-server 预览组件,比如通过 vue-cli 初始化项目,或者自己配置脚本。文艺一点儿地可能会用到 parcel 来简化 demo 的开发配置(比如 muse-ui)。展示文档作为一个 ui 组件库,也肯定要有自己的组件展示文档。一般业界常
转载
2024-03-04 17:08:29
99阅读
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建Ant Design Pro of Vue下载安装启动步骤:一、Ant Design Pro of Vue 的介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升
转载
2024-04-26 11:08:13
259阅读
一,前言上一篇,使用Vue-cli3对新项目做了初始化创建
本篇进行UI组件库的集成,选用ant-design-vue二,为什么选择ant-design-vue组件丰富,目前有55个组件
阿里大厂维护
测试覆盖率高
基于Ant Design设计
UI组件库设计思想与React对应,对技术选型和设计友好三,简单安装和使用ant-design-vue安装依赖:npm i ant-design-vue修
转载
2024-04-01 05:31:27
275阅读
单文件上传 <a-upload name="file" :beforeUpload="beforeUpload" :multiple="false" accept=".xls,.xlsx" :showUploadList="nofalse" class="select-file" :customRe
原创
2022-09-01 16:48:41
949阅读
支持的环境: 现代浏览器和 IE9 及以上(需要 polyfills)。 支持服务端渲染。 Electron(一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。可以使用 HTML、CSS 来绘制界面和控制布局,使用 JavaScript 来控制用户行为和业务逻辑,使用 Node. ...
转载
2021-07-13 14:28:00
402阅读
2评论
1.简介动态模型是一个基于结构化数据的编程方法。目前已经在动态模型里初步集成了vue和antdesign,这里讲述下如何运行动态模型下的vue-antdesign的示例。简单介绍下动态模型的优点先。使用动态模型可以让编程更加简单和快捷,并且模型也可以保存知识和经验。也就是说使用动态模型可以让vue-antdesign编程简单化,并且如果你有vue-antdesing的相关知识和经验,那么也可以把这
https://www.antdv.com/docs/vue/introduce-cn/ ...
转载
2021-09-09 07:54:00
366阅读
2评论
Ant Design Pro Vue不完全开发手册前言准备工作:1、安装npm2、可选安装3、安装 vue-cli 工具:4、参考文档基础开发学习:1、git项目拉取2、安装项目3、启动项目4、文件解析vue.config.jsrouter.config.jsviews(1)api.js(2)vue开发浅谈问题与解惑1、如何把父组件的值传到子组件2、父组件调如何用子组件方法3、子组件如何调用父组
微服务现在挺火的,优点也很明显如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码 在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun.比较简单,实际使用场景会有特殊情况我根据自己项目的情况总结了一下使用方法 我们两个项目都是ant-design-pro的,我这里的例
转载
2024-06-19 04:19:43
99阅读
ant Design Vue 自定义loading今天又来更新一下 踩坑日记 希望 大家不要跟着一起填坑 就好!事情了,是这样的 UI设计 提出一个需求 认为 ant Design 的Spin 图标不好看 和我们的风格不搭 需要换成我们自己的图标!首先是看文档 能不能更换,果不然文档上写的很清楚 perfect,我就跟着他的demo 写了 但是感觉不对 因为只能添加 自带的icon 但自带的 i
转载
2024-04-01 12:48:27
335阅读
一、Ant Design Pro 介绍1、访问地址:https://pro.ant.design/zh-CN/2、开箱即用的中台前端/设计解决方案二、使用Vue CLI3快速创建项目1、创建步骤:vue create ant-design 依据需要选择相应的依赖
cd ant-design 打开项目文件
npm i ant-design moment 安装项目中的依赖,依据momen
转载
2024-04-01 10:53:27
97阅读