草庐IT

onsen-ui

全部标签

Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现

目录:导读项目搭建+⾸⻚布局实现一、项目搭建1、环境搭建2、项目初期搭建二、Main.vue三、左侧栏部分(CommonAside.vue)四、header部分(CommonHeader.vue)五、Home.vue写在最后项目搭建+⾸⻚布局实现这篇主要讲解项目搭建+后台⾸⻚布局实现:整体效果后台首页按布局一共包含3个部分:1、左侧栏部分2、头部部分3、内容部分。说明在整个后台管理系统中,左侧栏和头部部分是应该一直在页面中展示的,所以对于每个页面这两个组件都应该存在,而内容部分才是通过router的跳转而跳到不同的组件。下面先把整个项目搭建一下,然后再来讲解上面三个部分一、项目搭建1、环境搭建

创建第一个微信小程序 uni-app + Vue3 + Color UI + Webstorm

最近打算撸一个小程序练练手,顺便记录下开发过程。。也欢迎感兴趣的小伙伴交流小程序开发经验!大概会有一个系列的博客吧(尽量不太监目录一、前置步骤1.1注册微信小程序账号,取得AppID1.2下载并安装微信开发者工具二、uni-app2.1下载并安装HBuilderX2.2新建uni-app项目2.3使用npm(可选) 三、ColorUI3.1运行官方demo3.2引入ColorUI3.3浅试一下ColorUI的效果,将原生导航栏替换为自定义样式四、使用Webstorm替代HBuilderX4.1用vue-cli创建模板项目4.2迁移原来的HBuilderX项目五、uni-app,从入门到放弃一、

基于Element UI或Element Plus实现具有倒计时的Message消息提示

刚好遇到一个需要自动关闭消息提示的需求,可Element框架暂时没有实现这个功能。开始时没有头绪,于是搜一下道友的博客文章,看到有一篇文章实现了这个功能,在此我完善了一下这个技巧方法。完善后的技巧方法支持多次点击,实例化多个消息提示,每个消息提示都具有自己的倒计时。以及可在ElementUI或ElementPlus框架上实现。一、首先新建文件/src/utils/elementUtil.ts二、在ElementUI框架上的实现import{Message}from'element-ui'lettimer=null/***倒计时Message方法*/functioncoutdownTime(ms

element-ui中this.$confirm提示文字中,部分有颜色(自定义)

如图想要让element-ui中的提示文字中,部分有颜色可以如下设置:MessageBox组件可以通过传递一个HTML片段来自定义对话框内容的样式。注意,在使用MessageBox组件时需要添加dangerouslyUseHTMLString:true选项来启用自定义HTML片段。可以直接这么写this.$confirm('请确认是否将该干预策略下线,确认后立即生效。','下线确认',{confirmButtonText:'确定下线',cancelButtonText:'取消',dangerouslyUseHTMLString:true,type:'warning',}).then(()=>{

【Android知识笔记】UI体系(一)

Activity的显示原理setContentView首先开发者Activity的onCreate方法中通常调用的setContentView会委托给Window的setContentView方法:接下来看Window的创建过程:可见Window的实现类是PhoneWindow,而PhoneWindow是在Activity创建过程中执行attachContext的时候创建的!接下来看PhoneWindow的setContentView方法:可见PhoneWindow的se

SAP UI5 FileUploader 控件实现本地文件上传,接收服务器端的响应时遇到跨域访问错误的试读版

一套适合SAPUI5初学者循序渐进的学习教程作者简介JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。在长达15年的SAP标准产品开发生涯里,Jerry曾经先后参与SAPBusinessByDesign,SAPCRM,SAPCloudforCustomer,SAPS/4HANA,SAPCommerceCloud(电商云)等标准产品的研发工作。Jerry工作中使用ABAP,Java,JavaScript和TypeScript进行开发,对包括SAPUI5在内的多款SAP自研框架有深入的研究。教程目录SAPU

uiautomator2的安装,使用,在浏览器中查看页面的信息,简单快捷的ui测试工具,app测试工具(一)

uiautomator2的安装,使用,简单快捷的ui测试工具,app测试工具安装方法命令行中输入pipinstalluiautomatorpipinstallweditor在andriodstudio中启动一个模拟器启动python-mweditor即可在浏览器看到弹出的窗口,里面就是对应的模拟器信息使用在这里可以指定模拟器设备,可以在cmd中使用adbdevices命令查看connect按钮是连接模拟器,一般只用点一次,或者在换设备时点。DumpHierarchy是更新页面,也就是在模拟器里点击事件后,在浏览中点dump更新页面。查看对应控件的信息点击一个按钮,图标,右边所列就是详细信息。

【Element-UI】Mock.js,案例首页导航、左侧菜单

目录一、引言二、Mock.js1、什么是Mock.js2、安装配置2.1、安装2.2、引入3、Mock.js的使用3.1、定义测试数据文件3.2、mock拦截ajax请求3.3、模拟测试三、首页导航、左侧菜单1、页面搭建1.1、图标定义1.2、AppMain.vue1.3、LeftNav.vue1.4、TopNav.vue1.5、index.js2、功能实现2.1、AppMain.vue2.2、LeftNav.vue2.3、TopNav.vue2.4、main.js3、完整代码3.1、AppMain.vue3.2、LeftNav.vue3.3、TopNav.vue3.4、main.js一、引言

element ui时间选择器el-date-picker关于日期禁用disabledDate的使用

项目中很多场景都用到时间范围选择的组件: 这时候我们过多选择的是elmentui里面的el-date-picker组件,但是又嫌弃人家原始的这个丑陋 所以选择自己组装,有没有小伙伴像我这样写的呢://页面组件-//日期禁用方法disabledDateStart(time){constbeginDateVal=this.datePickerEnd;if(beginDateVal){return(time.valueOf()>=newDate(beginDateVal).valueOf()-24*60*60*1000+1);}},disabledDateEnd(time){constbeginDa

php - jQuery UI - 加速自动完成

我的自动完成功能运行良好,但我正在尝试找出使其更快的方法。这是我的HTML:Country:USAUnitedKingdomCity:functionrenewAutocomplete(){$("#city").autocomplete({source:"searchCities/"+$('#country').val(),minLength:2});}PHP/mySQL查询非常基础:$term=$_GET['term'];$sql="SELECTcityFROMcitiesWHEREcountry_code='{$country}'ANDcityLIKE'{$term}%'";当然,