昆山 网站建设 企炬,网页设计 网站建设,南京网站定制南京,wordpress注册用户上传权限前期回顾 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用_js斗地主_0.活在风浪里的博客-CSDN博客JS 实现 斗地主网页游戏https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501 通用版后台管理系统#xff0c;如果…前期回顾 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用_js斗地主_0.活在风浪里的博客-CSDN博客JS 实现 斗地主网页游戏https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501 通用版后台管理系统如果你是多年的程序猿媛你可以巩固一下 也可以给我提提意见。此典型项目与企业级开发很是接近掌握即可领悟雷电如果你是大学生它完全可以作为你毕业设计毕竟你确实写过项目开发全程采用组件化思想 话说江湖风起云涌虽无刀光剑影、却依旧暗藏伏机程序江湖不进则退必然需要更加卖力
目录
该项目的亮点 适合谁
资料在哪
图例
复制指令
页面使用
水印指令
页面使用 拖拽指令 页面使用
防抖指令 页面使用 节流指令 页面使用
长按指令 页面使用
注册所有自定义指令
贡献者
结语 该项目的亮点 亮点1用户权限管理后台管理系统可以根据用户的角色和权限来限制其访问和操作的范围保证数据的安全性和可靠性。 亮点2技术一款基于 Vue3.2、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架使用目前最新技术栈开发。项目提供强大的 [ProTable] 组件在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。 亮点3数据可视化后台管理系统可以将数据以图表、表格等形式进行可视化展示方便管理员快速了解数据的趋势和变化。 亮点4自定义配置后台管理系统可以根据不同的业务需求进行自定义配置包括但不限于页面布局、数据展示方式、操作流程等。 亮点5多语言支持后台管理系统可以支持多种语言方便不同地区和国家的用户使用和操作。 亮点6数据备份和恢复后台管理系统可以对数据进行定期备份和恢复保证数据的安全性和可靠性。 ……诸多功能等你拥抱快来三连 抱走吧 适合谁
1 、大学即将毕业 或者 自学前端 缺乏项目经验的 2 、入职以后需要做vue 后台管理系统的 3 、后端开发 没有前端经验 要做vue java 后台管理项目的 4、 缺乏vue实战项目经验 基础不是很好的 本教程非常的详细 每一步都总结在md文档里面
资料在哪
已上传主页资源、也可在博文中找到地址、也可找我
图例 就不一一贴图了代码开始
轮子运转…… 目录结构 复制指令
位置copy.ts
/*** v-copy* 复制某个值至剪贴板* 接收参数string类型/Refstring类型/Reactivestring类型*/
import type { Directive, DirectiveBinding } from vue;
import { ElMessage } from element-plus;
interface ElType extends HTMLElement {copyData: string | number;__handleClick__: any;
}
const copy: Directive {mounted(el: ElType, binding: DirectiveBinding) {el.copyData binding.value;el.addEventListener(click, handleClick);},updated(el: ElType, binding: DirectiveBinding) {el.copyData binding.value;},beforeUnmount(el: ElType) {el.removeEventListener(click, el.__handleClick__);}
};function handleClick(this: any) {const input document.createElement(input);input.value this.copyData.toLocaleString();document.body.appendChild(input);input.select();document.execCommand(Copy);document.body.removeChild(input);ElMessage({type: success,message: 复制成功});
}export default copy;页面使用
templatediv classcard content-boxspan classtext复制指令 /spandiv classbox-contentel-input placeholder请输入内容 v-modeldata stylewidth: 500pxtemplate #appendel-button v-copydata复制/el-button/template/el-input/div/div
/templatescript setup langts namecopyDirect
import { ref } from vue;const data refstring(我是被复制的内容 );
/script 水印指令 位置waterMarker.ts
/*需求给整个页面添加背景水印。思路1、使用 canvas 特性生成 base64 格式的图片文件设置其字体大小颜色等。2、将其设置为背景图片从而实现页面或组件水印效果使用设置水印文案颜色字体大小即可div v-waterMarker{text:版权所有,textColor:rgba(180, 180, 180, 0.4)}/div
*/import type { Directive, DirectiveBinding } from vue;
const addWaterMarker: Directive (str: string, parentNode: any, font: any, textColor: string) {// 水印文字父元素字体文字颜色let can: HTMLCanvasElement document.createElement(canvas);parentNode.appendChild(can);can.width 205;can.height 140;can.style.display none;let cans can.getContext(2d) as CanvasRenderingContext2D;cans.rotate((-20 * Math.PI) / 180);cans.font font || 16px Microsoft JhengHei;cans.fillStyle textColor || rgba(180, 180, 180, 0.3);cans.textAlign left;cans.textBaseline Middle as CanvasTextBaseline;cans.fillText(str, can.width / 10, can.height / 2);parentNode.style.backgroundImage url( can.toDataURL(image/png) );
};const waterMarker {mounted(el: DirectiveBinding, binding: DirectiveBinding) {addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);}
};export default waterMarker;页面使用
templatediv classcard content-box v-waterMarker{ text: Geeker Admin, textColor: rgba(180, 180, 180, 0.6) }span classtext水印指令 /span/div
/templatescript setup langts namewatermarkDirect/scriptstyle
.content-box {width: 100vw;height: 100vh;
}
/style拖拽指令
位置draggable.ts
/*需求实现一个拖拽指令可在父元素区域任意拖拽元素。思路1、设置需要拖拽的元素为absolute其父元素为relative。2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值并改变元素的 left 和 top 值4、鼠标松开(onmouseup)时完成一次拖拽使用在 Dom 上加上 v-draggable 即可div classdialog-model v-draggable/div
*/
import type { Directive } from vue;
interface ElType extends HTMLElement
{parentNode: any;
}
const draggable: Directive {mounted: function (el: ElType){// 拖拽let oDiv el; //当前元素oDiv.onmousedown function (e: any){//鼠标按下计算当前元素距离可视区的距离let disX e.clientX - oDiv.offsetLeft;let disY e.clientY - oDiv.offsetTop;let oParent oDiv.parentNode; //获取到父元素//移动时计算元素距离可视区的距离document.onmousemove function (e: any){//通过事件委托计算移动的距离let l e.clientX - disX;let t e.clientY - disY;// 不允许超出父元素let w oParent.clientWidth - oDiv.offsetWidth;let h oParent.clientHeight - oDiv.offsetHeight;if (l 0){l 0;}else if (l w){l w;}if (t 0){t 0;}else if (t h){t h;}//移动当前元素oDiv.style.left l px;oDiv.style.top t px;};//鼠标抬起时候移除事件document.onmouseup function (){document.onmousemove null;document.onmouseup null;};}}
};export default draggable; 页面使用
templatediv classcontent-boxspan classtext拖拽指令 /spandiv v-draggable classdrag-box我可以拖拽哦~/div/div
/templatestyle langscss scoped
.content-box {position: relative;//requiredwidth: 500px;height: 500px;border: 1px solid #ccc;.drag-box {position: absolute;//requiredwidth: 100px;height: 100px;background-color: #ccc;}
}
/style防抖指令 位置debounce.ts
/*** v-debounce* 按钮防抖指令可自行扩展至input* 什么是防抖防抖就是指触发事件后在n秒内函数只能执行一次如果在n秒内又触发了事件则会重新计算函数执行时间。* 接收参数function类型*/
import type { Directive, DirectiveBinding } from vue;
interface ElType extends HTMLElement {__handleClick__: () any;
}
const debounce: Directive {mounted(el: ElType, binding: DirectiveBinding) {if (typeof binding.value ! function) {throw callback must be a function;}let timer: NodeJS.Timeout | null null;el.__handleClick__ function () {if (timer) {clearInterval(timer);}timer setTimeout(() {binding.value();}, 500);};el.addEventListener(click, el.__handleClick__);el.addEventListener(input, el.__handleClick__);},beforeUnmount(el: ElType) {el.removeEventListener(click, el.__handleClick__);el.removeEventListener(input, el.__handleClick__);}
};export default debounce; 页面使用 高亮搜索
templatediv classcard content-boxspan classtext防抖指令 /span!-- el-button typeprimary v-debouncedebounceClick防抖按钮 (0.5秒后执行)/el-button --br /el-input v-debouncedebounceInput v-model.trimiptVal placeholder防抖输入框 (0.5秒后执行) stylewidth: 200px /sectionul v-ifflaga v-for(item, index) in listArr :keyindex :hrefitem.link classlink v-cope666li v-htmlitem.uname/li/a/ul/section/div
/templatescript langts setup
import { onMounted } from vue;
// 进入页面时自动聚焦到搜索框
onMounted(() {// ts-ignoredocument.querySelector(.el-input__inner).focus();
});
// import { ElMessage } from element-plus;
// const debounceClick () {
// ElMessage.success(我是防抖按钮触发的事件 );
// };
// 双向绑定的搜索默认值
let iptVal refstring();
// 被搜索的列表真实项目中应该是从后台获取的数据
let listArr: Array{ uname: string; link: string } reactive([{uname: Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本,link: https://blog.csdn.net/m0_57904695/article/details/129730440?spm1001.2014.3001.5501,},{uname: 【提高代码可读性】—— 手握多个代码优化技巧、细数哪些惊艳一时的策略,link: https://blog.csdn.net/m0_57904695/article/details/128318224?spm1001.2014.3001.5502,},{uname: 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用,link: https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501,},{ uname: Vue3项目 —— Vite / Webpack 批量注册组件, link: https://blog.csdn.net/m0_57904695/article/details/128919255?spm1001.2014.3001.5501 },{uname: Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动,link: https://blog.csdn.net/m0_57904695/article/details/128740216?spm1001.2014.3001.5501,},
]);
let flag refboolean(false);
const debounceInput () {// 初始化 恢复高亮flag.value false;// 被搜索的列表真实项目中应该是从后台获取的数据listArr reactive([{uname: Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本,link: https://blog.csdn.net/m0_57904695/article/details/129730440?spm1001.2014.3001.5501,},{uname: 【提高代码可读性】—— 手握多个代码优化技巧、细数哪些惊艳一时的策略,link: https://blog.csdn.net/m0_57904695/article/details/128318224?spm1001.2014.3001.5502,},{uname: 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用,link: https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501,},{ uname: Vue3项目 —— Vite / Webpack 批量注册组件, link: https://blog.csdn.net/m0_57904695/article/details/128919255?spm1001.2014.3001.5501 },{uname: Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动,link: https://blog.csdn.net/m0_57904695/article/details/128740216?spm1001.2014.3001.5501,},]);// console.log(这里输出 , iptVal.value.split());let searchVal iptVal.value.split();if (iptVal.value ) return;// 输入框的值转为数组方便循环在循环得到搜索框的每一项与列表中的每一项进行匹配如果匹配到就替换标签高亮展示searchVal.forEach((searchValItem: string) onReplace(searchValItem));
};
// 高亮替换标签函数
function onReplace(searchValItem: string) {// 循环列表 { listArrItem } 列表的每一项listArr.forEach((listArrItem) {// 如果搜索框的值不在列表中直接终止返回if (listArrItem.uname.indexOf(searchValItem) -1) return;// 替换的标签样式let hightStr em stylecolor: #333333;font-weight: bold;font-style: normal;background-image: url(https://t8.baidu.com/it/u1501552470,2690656309fm167app3000fPNGfmtautoq100sizef624_21);background-repeat: repeat-x;background-position-y: bottom;background-size: 100% 8px;${searchValItem}/em;//错误写法假如已经有高亮em标签了在根据输入框的值匹配会把已有的高亮标签也替换掉导致乱码页面卡死 【重要】// let reg new RegExp(searchValItem, gi);// 不匹配已有em/em 高亮标签的内容 【重要】,如果是let reg new RegExp((?![^]*|[^]*\/em)${searchValItem}, gi);listArrItem.uname listArrItem.uname.replace(reg, hightStr);flag.value true;});
}
/scriptstyle langscss scoped
// a.link 这是一个交集选择器即同时满足span和.highth的元素
a.link {// 去掉默认色color: #333333;// 去掉下划线text-decoration: none;// 鼠标移入时的样式:hover {color: #4a8cd6;text-decoration: none;}
}
/style节流指令
位置throttle.ts
/*需求防止按钮在短时间内被多次点击使用节流函数限制规定时间内只能点击一次。思路1、第一次点击立即调用方法并禁用按钮等延迟结束再次激活按钮2、将需要触发的方法绑定在指令上使用给 Dom 加上 v-throttle 及回调函数即可button v-throttledebounceClick节流提交/button什么是节流在一定时间内只执行一次函数如果这个时间内再次触发则重新计算时间。
*/
import type { Directive, DirectiveBinding } from vue;
interface ElType extends HTMLElement {__handleClick__: () any;disabled: boolean;
}
const throttle: Directive {mounted(el: ElType, binding: DirectiveBinding) {if (typeof binding.value ! function) {throw callback must be a function;}let timer: NodeJS.Timeout | null null;el.__handleClick__ function () {if (timer) {clearTimeout(timer);}if (!el.disabled) {el.disabled true;binding.value();timer setTimeout(() {el.disabled false;}, 1000);}};el.addEventListener(click, el.__handleClick__);},beforeUnmount(el: ElType) {el.removeEventListener(click, el.__handleClick__);}
};export default throttle; 页面使用
templatediv classcard content-boxspan classtext节流指令 /spanel-button typeprimary v-throttlethrottleClick节流按钮 (每隔1S秒后执行)/el-button/div
/templatescript setup langts namethrottleDirect
import { ElMessage } from element-plus;
const throttleClick () {ElMessage.success(我是节流按钮触发的事件 );
};
/script长按指令
位置 longpress.ts
/*** v-longpress* 长按指令长按时触发事件*/
import type { Directive, DirectiveBinding } from vue;const directive: Directive {mounted(el: HTMLElement, binding: DirectiveBinding) {if (typeof binding.value ! function) {throw callback must be a function;}// 定义变量let pressTimer: any null;// 创建计时器 2秒后执行函数 const start (e: any) {if (e.button) {if (e.type click e.button ! 0) {return;}}if (pressTimer null) {pressTimer setTimeout(() {handler(e);}, 1000);}};// 取消计时器const cancel () {if (pressTimer ! null) {clearTimeout(pressTimer);pressTimer null;}};// 运行函数const handler (e: MouseEvent | TouchEvent) {binding.value(e);};// 添加事件监听器el.addEventListener(mousedown, start);el.addEventListener(touchstart, start);// 取消计时器el.addEventListener(click, cancel);el.addEventListener(mouseout, cancel);el.addEventListener(touchend, cancel);el.addEventListener(touchcancel, cancel);}
};export default directive;页面使用
templatediv classcard content-boxspan classtext长按指令 /spanel-button typeprimary v-longpresslongpress长按2秒触发事件/el-button/div
/templatescript setup langts namelongpressDirect
import { ElMessage } from element-plus;
const longpress () {ElMessage.success(长按事件触发成功 );
};
/script 注册所有自定义指令
import { App } from vue;
import auth from ./modules/auth;
import copy from ./modules/copy;
import waterMarker from ./modules/waterMarker;
import draggable from ./modules/draggable;
import debounce from ./modules/debounce;
import throttle from ./modules/throttle;
import longpress from ./modules/longpress;const directivesList: any {// Custom directivesauth,copy,waterMarker,draggable,debounce,throttle,longpress
};const directives {install: function (app: AppElement) {Object.keys(directivesList).forEach(key {// 注册所有自定义指令app.directive(key, directivesList[key]);});}
};export default directives;// 最后在mian.ts引入import { createApp } from vue;import App from ./App.vue;const app createApp(App);1import directives from /directives/index;
2app.use(directives)如果想要从头搭建一个看我这一篇文奥
结合 服务器后端前端完成 vue项目 后台管理系统_管理系统卡片列表_0.活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包后端node.js代码前端源码 以及文档接口说明 结合 服务器后端前端完成 vue项目 后台管理系统https://blog.csdn.net/m0_57904695/article/details/122648464?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167955900816800226551070%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257Drequest_id167955900816800226551070biz_id0utm_mediumdistribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-122648464-null-null.blog_rank_defaultutm_term%E5%90%8E%E5%8F%B0spm1018.2226.3001.4450
贡献者
HalseySpicydenganjia结语
本文到这里就要完结了感谢你的阅读再见 分享快乐,留住感动. 2023-3-23 16:40:22 --活在风浪里
