前端框架 (vue+ layui 等)
文章平均质量分 68
vue/ layui
兮家小二
傻傻的小男孩,qq:1720696548 wx:1720696548
展开
-
vue2 使用 Sortable 库进行拖拽操作
我们使用的 npm 安装,不需要其他东西,只需要下方标注的主要代码部分,其中的css为演示展示用,无实际用处。原为npm 版, 抽取成 UMD 版便于大家学习参考。3、打开htm 即得到上方 展示效果中 相同效果。个人开源项目(通用后台管理系统)–>2、复制下方代码到 .html。1、本地新建 .html文件。原创 2022-11-09 20:58:49 · 2437 阅读 · 0 评论 -
vue首页加载优化,vue使用cdn加载插件,vue cdn优化
问题: vue 线上打开首页速度太慢,js文件太大,且全部走当前服务器获取 js/css 数据,服务器带宽也跟不上处理方式: 把一些 js/ css 使用 cdn 的方式进行加载优化后使用 cdn 地址加载,浏览器可以快速拉取到数据1、配置排除依赖2、配置cdn地址3、关闭打包生成 map.js 文件定义配置信息加入配置externals = 排除cdn 信息注入到配置中2、public/index.html读取 main.js 注入的配置3、效果查看1、首页会写入 css/js 文件2、原创 2022-06-28 15:43:11 · 2018 阅读 · 1 评论 -
vue2 使用 markdown插件 v-md-editor
v-md-editor 官方文档地址:https://code-farmer-i.github.io/vue-markdown-editor/zh/2、main.js 全局引入插件3、二次封装插件1、二次封装2、main.js 全局引入( 第二部已加入)在 components 目录下创建 v-md-editor 文件夹并创建文件 index.vueindex.vue 代码如下4、使用在任意地方使用效果如下,图片上传支持 cv, qq,wx截屏上传个人开源项目(快速开发项目利器- 通用后原创 2022-06-17 21:05:08 · 6275 阅读 · 6 评论 -
vue2 使用富文本插件 vue-tinymce(tinymce)
富文本组件: vue-tinymce 配置教程1、package.json 添加依赖及对应版本dependencies 依赖管理下添加"tinymce": "^5.3.1","@packy-tang/vue-tinymce": "^1.0.0",加好了 npm install 一下2、vue-tinymce 组件进行二次封装在 src/components/ 下创建 vue-tinymce/index.vue 组件 (对vue-tinymce进行二次封装)<template原创 2022-05-14 15:09:06 · 7066 阅读 · 0 评论 -
Layui 数据表格添加 switch 开关,并传递自定义值
1、展示switch 开关效果2、添加 switch 开关代码{ field: 'state', width: 90, title: '禁/启用', templet: function (res) { let menuId = res.id; if (res.state == 0) {原创 2020-06-21 09:05:57 · 6523 阅读 · 3 评论 -
layui ,select 事件失效处理
select 标签上添加lay-filter="test" 如下: <select lay-filter="test" class="type" style="width:200px;height: 30px"> <option th:each="type:${types}" th:value="${type}" th:text=...原创 2019-04-01 09:24:03 · 3500 阅读 · 0 评论 -
Layui --带复选框的树菜单插件(layui / layuiadmin 模板下载)
转载–https://blog.csdn.net/xianglikai1/article/details/78247059csdn资源下载–待定转载 2019-06-14 21:37:36 · 3588 阅读 · 1 评论 -
layuiAdmin -自定义右弹出页面功能
展示效果1、添加点击按钮 <!-- 弹出右边测试菜单 --> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="test"> <i class="layui-icon ">右弹出</i>原创 2020-06-21 10:39:06 · 4701 阅读 · 2 评论 -
layui 数据表格取当前页数 / calss选择器获取
layui 获取当前页和当前条数//获取当前页var recodePage = $(".layui-laypage-skip .layui-input").val();//获取当前页条数var recodeLimit = $(".layui-laypage-limits").find("option:selected").val();...转载 2019-09-05 16:42:16 · 1958 阅读 · 1 评论 -
layui + layer弹出层增删改的操作
一、弹出层说明 /* ========== 弹出层说明 ==============*/ function useradd() { // useradd(),点击事件 //var pageNum = $('.uid').val(); layui.use('layer', function () { ...原创 2019-03-23 10:20:18 · 10605 阅读 · 1 评论 -
通用管理后台系统 spring-boot-plus2 (自研)
项目地址:https://gitee.com/wslxm/spring-boot-plus2 (目前最新版在 1.x 分支)项目历程该 项目完全为作者个人自研 开发, 已在多个项目中进行开发实践, 后端已经相对趋于稳定演示地址layui版: http://xijia.plus (2022年将移除layui版)– 账号: 10000– 密码: 10000vue版: 开发中 (计划于 2021 年 12月底完成全部开发)vue版初版样式风格演示一、项目说明1、这是开发一个后原创 2021-10-17 09:17:32 · 912 阅读 · 0 评论 -
vue七 、uni-app 说明
uni-app 插件市场: https://ext.dcloud.net.cn使用uni-app写小程序(只写小程序)uni-app + ant-weappvant – https://github.com/youzan/vant-weappvant 使用参考:https://www.cnblogs.com/roseAT/p/11200203.html...原创 2020-02-02 11:44:42 · 277 阅读 · 0 评论 -
vue 六 、Element (UI组件) 及 Avue + Avue-cli (二次封装 Element 及后台管理模板)及 Vant (移动端UI组件)
一、ElementElement 官方文档:https://element.eleme.cn/#/zh-CN/component/installationElement 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。1、安装Elementnpm i element-ui -S2、配置 Element (main.js)...原创 2020-01-29 19:18:49 · 3597 阅读 · 0 评论 -
vue 五、vuex 的使用(状态管理)
前篇:vuex 是什么?有什么用?vuex 是什么?Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了什么时候用vuex?老生常谈的话题,每个人的使用动机不同可能结果就不同,站在系...原创 2020-01-29 11:19:32 · 348 阅读 · 0 评论 -
vue 四、Component 组件使用及组件之间的通信(props, EventBus )
一、组件的基本使用使用组件(等于html引入html)跟组件(父组件)<template> <div> <h3>父组件</h3> <hr /> <!-- 使用组件 --> <helloWorld /> </div></template><script&g...原创 2020-01-28 19:59:06 · 1007 阅读 · 1 评论 -
vue 三、Axios (ajax 框架) 在vue 项目中的使用
ajax 与 axios的区别刚刚接触axios有好多疑惑。它和ajax有什么关系呢和区别呢?接下来一起看下:1.区别axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。下面列出代码来对比一下:axios:a...原创 2020-01-28 15:27:26 · 2924 阅读 · 0 评论 -
vue 二、vue-cli (脚手架)和 vue-router (路由)的使用
一、脚手架安装及创建vue项目(vue-cli 4)1、安装npm install -g @vue/cli 安装脚手架2、先切换到存放代码的目录vue 查看是否正常执行,PowerShell 无法执行查看:https://blog.csdn.net/qq_41956789/article/details/999984183、打开vue 后台vue ui创建完成后...原创 2020-01-27 16:54:12 · 3446 阅读 · 0 评论 -
vue 一、vue 基本使用 , v- 指令,及生命周期,template组件模板 、watch数据监听
一、下载vue 专用开发工具HbuilderX(也可以使用其他)傻瓜式下载安装即可HbuilderX下载:https://www.dcloud.io/hbuilderx.html二、vue的第一个例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&...原创 2020-01-27 13:18:10 · 1168 阅读 · 0 评论