- 博客(57)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue+Element实现el-tree节点的拖拽
节点拖拽 实现树节点拖拽效果，在树中有三层，通过对每一层设置一个专有的属性，通过这个属性来判断点击的是那一层 // 第一层设置folderId，第二层设置fileId，第三层设置imgId // 实现代码，el-tree控件中的draggable可以设置节点可拖拽，allow-drop表示即将放入的节点，allow-drag是移动的节点 <template> <el-tree :data="data" node-key="id" :expand-on-click-node="fals
2020-08-20 19:31:29
7489
原创 vue+Element-ui实现登录注册表单
登录注册表单验证 通过Element-ui的表单实现登录注册的表单验证 效果图如下 注册 登录表单 登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求 // 登录表单验证的代码 // template的代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
2020-07-13 19:48:44
7499
3
原创 vue+Element-ui的el-table的多级内容渲染
将多层内容渲染到表格里面 如渲染下面的数据，将一个对象渲染成一行数据，和平常的table表格的数据渲染不一样，这个不能直接渲染出来，需要加第三方的label来渲染数据 tableData: [ { name: 'Huawei P40', properties: [ { description: '颜色', value: '红色' }, { description: '内存',
2020-07-08 08:28:34
9167
2
原创 vue+Element-ui的el-dialog弹出层的应用，及实现el-dialog拖拽效果
Element-ui的el-dialog的应用 1.安装element-ui npm i element-ui -S 2.全局引用 **在main.js引用** import ElementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUi); 3.在.vue文件应用代码 // .vue文件的代码 <template> <div> <el-butt
2020-07-06 12:46:18
7654
2
原创 vue+element表格的内容和编辑
element-ui引用el-table 1.安装element-ui npm i element-ui -S 2.全局引用 **在main.js引用** import ElementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUi); 3.在.vue文件引用element-ui的表格的代码 <template> <el-table :data=
2020-07-02 13:37:45
2302
1
原创 在vue中xml格式和json的互转
xml和json之间的互转 1.安装依赖 //在项目文件下安装依赖 npm i x2js 2.引入，在main.js中引用 import x2js from 'x2js' Vue.prototype.$x2js = new x2js() 3.使用，将xml转为json // 将下面的xml转为json格式 var xmlStr = `<alexa ver="0.9" url="http://coursesweb.net/" home="0" aid="="> <sd
2020-06-12 18:57:41
4785
原创 vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库，可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 安装print npm install print-js --save 将print.js放如src文件夹内 在main.js引用print import Print from './libs/Print/print' Vue.use(Print) print.js的代码 // 打印类属性、方法定义 /* eslint-disab
2020-05-20 14:26:52
6747
3
原创 微信小程序-组件的使用
在页面上需要将数据显示为树形结构，多个页面上使用，所以将树形结构封装成一个组件，在页面上引用即可。在文件夹下新建一个component的文件夹。
2022-08-05 18:47:13
1296
原创 创建一个微信小程序
打开微信开发者工具，微信登录后，选择小程序，点击“+”按钮，新建一个小程序，项目名称和项目目录可以自己定义，输入AppId。可以生成一个基本的项目。，没有注册的话，点击“立即注册”，选择小程序，进入填写页面填写信息，注册成功后，可以在设置找的自己的AppId。是当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab，：让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。：类似与html文件，编写页面的标签。：类似于css文件，编写页面的样式。..
2022-08-03 19:45:25
621
原创 vxe-grid筛选渲染
vxe-grid筛选渲染 表格数据过多时，需要过滤数据 代码： // index.vue <template> <div style="height: 400px"> <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { ret
2021-12-31 15:30:48
6817
6
原创 vxe-grid可编辑渲染
vxe-grid可编辑渲染 自定义单元格渲染后，需求在自定义的单元格能够编辑单元格的数据，这个时候需要用到edit-render，可编辑渲染，通过点击单元格显示编辑项，修改单元格数据 代码 <template> <div style="height: 400px"> <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid> </div> </template> &
2021-12-29 14:18:58
6721
1
原创 vxe-grid单元格渲染
vxe-grid单元格渲染 有时候表格显示的内容不是我们需要的，这个时间可以使用单元格渲染，自定义显示的内容 单元格渲染的使用 // index.vue <template> <div style="height: 400px"> <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid> </div> </template> <script> expo
2021-12-28 11:02:28
5539
原创 vue3实现页面刷新
vue3实现页面刷新 在muuri的复杂实现中，拖动元素后，只能刷新页面才能重置回初始状态 在组件中实现页面的刷新功能 //App.vue页面 //html： <template> <HelloWorld v-if="isRouterAlive"></HelloWorld> </template> <script> import { provide, ref, nextTick } from "vue"; import HelloWorl
2021-12-01 09:14:38
6416
2
原创 vue + muuri的复杂应用(二)
muuri的复杂应用 创建一个多列组件的页面，使用muuri实现在不同列之间拖动 页面展示：如下图，能够将不同的元素在不同列之间拖动 代码实现： <div class="drag-container"></div> <div class="board"> <div class="board-column todo"> <div class="board-column-container">
2021-11-27 10:30:35
593
原创 vue中使用muuri动态布局(一)
muuri 官方文档：https://muuri.dev/ GitHub地址：https://github.com/haltu/muuri添加链接描述 Muuri是一个JavaScript布局引擎，它允许您构建各种布局（不是开玩笑！），并使它们具有响应性、可排序、可过滤、可拖动和/或动画。 muuri的简单的使用 安装 muuri npm i muuri 在组件中引用 import Muuri from "muuri" <div class="muuri"> <div
2021-11-26 11:28:14
1557
原创 chrome安装vue-devtools
chrome 安装 vue-devtools插件 方法1：在github下载vue-devtools https://github.com/vuejs/vue-devtools npm i // 下载依赖 npm run build // 打包 结果在打包的时候报错，无法打包成功 方法2：全局安装vue-devtools （1），安装 npm i -g vue-devtools 在node全局安装文件夹中可以看到以下，说明安装成功 （2）加载插件，打开chrome的扩展程序页面 在扩展程序页面，点击
2021-11-19 16:59:12
1201
原创 vxe-table(vxe-grid)自定义模块：列头
自定义列头模块 文档官网：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install 在列头上，有时候显示的title信息并不能满足我们想要显示的内容，这个时候查看文档，发现了自定义模块，使用插槽可以帮助我们实现自定义模板内容 使用slots 在插槽内容可以自定义模板，用css设置显示的样式 <template> <div> <vxe-grid border show-overflow
2021-11-18 11:50:33
11024
1
原创 Error: Cannot find module ‘unplugin-vue-components/vite‘
node版本过低导致模块未找到 Error: Cannot find module ‘unplugin-vue-components/vite’，模块未找到 在node_modules中可以找到这个模块，可是项目还是无法运行 方法1，重新安装模块 1.rimraf node_modules 删除 node_modules, 2.npm install 重新安装模块，结果运行的时候还是报这个问题 方法2，更新高版本node 1.在控制面版中将node删除， 2.在node官网中下载14版本的node，重新
2021-10-25 17:26:13
7372
2
原创 本地文件提交到gitee上报错的问题：error: src refspec master does not match any
push的时候无法提交成功 error: src refspec master does not match any error: failed to push some refs to 'https://gitee.com/xxxxxxx/cool-admin-midway.git' 问题的内容是： 错误：SRC ReFSPEC主控器不匹配任何。 错误：未能将某些引用推到’https://gitee.com/xxxxxxx/cool-admin-midway.git’ 也就是仓库为空。 解决办法： 利
2021-10-21 20:27:12
2853
原创 使用vue-image-crop-upload上传图片
安装 npm install vue-image-crop-upload 使用 // html <myUpload v-model="show" @crop-success="cropSuccess" :width="imgLength" :height="imgLength" /> // script // data // 宽，高 imgLength: 120, show: false // method cropSuccess(imgDataUrl, field) { //
2021-06-22 14:10:46
911
原创 vxe-grid实现相同行合并，
vxe-grid实现相同行合并 在vxe-grid表格内，有时候将一行拆分为多行，实现显示不同的内容，有些数据拆分行中是相同的内容，将相同内容列数据合并行，也有利于区分行之间的关系 // 实现代码 <template> <div> <vxe-grid border resizable ref="xGrid" height="600" :edit-config="{ trigger: 'click',
2021-06-11 14:13:46
3039
原创 node.js动态加载数据库数据响应到html页面
node.js响应html页面 // http.js // 开启监听，将请求处理放在luyou页面上 var http = require('http'); var luyou = require('./luyou') var server = http.createServer(); luyou.bind(server) server.listen(8090, function() { console.log('访问127.0.0.1:8090') }) //luyou.js // 将响应逻辑放
2021-04-22 19:47:26
4195
4
原创 python的web开发
python实现web开发 WSGI接口： 接受HTTP请求、解析HTTP请求、发送HTTP响应 运行WSGI服务：针对每个HTTP请求进行响应 # hello.py def application(environ, start_response): # 使用web框架 method = environ['REQUEST_METHOD'] path = environ['PATH_INFO'] start_response('200 OK', [('Content-Typ
2021-04-22 19:26:27
436
原创 node.js的模块引用
文件读写 //引入模块 var fs = require('fs'); // 读取文件 fs.readFile('./tt.txt', 'utf-8', function(err, data) { console.log(data); }) // 写入文件 fs.writeFile('./tt.txt', 'node.js中文网', function(err) { if (!err) { console.log('写入成功') } }); // 追加内容 fs.appendFile('./
2021-04-21 19:05:34
395
原创 node.js连接mysql，实现CRUD，解决Field ‘id‘ doesn‘t have a default value
node.js连接数据库 初始化项目: 添加package.json npm init 安装依赖： npm install mysql 连接数据库 var mysql = require('mysql'); var connection = mysql.createConnection({ // 设置连接信息 host: 'localhost', user: 'root', password: 'root', database: 'onepiece' // 数据库名
2021-04-21 08:54:09
881
原创 vue一维码，二维码生成
在项目中生成条形码和二维码 一.条形码 Github：https://github.com/lindell/JsBarcode 条码示例：https://codepen.io/lindell/pen/eZKBdO?editors=1010 条码生成器：https://lindell.me/JsBarcode/generator/ 安装依赖： npm install jsbarcode --save 简单案例： <template> <canvas id="barCode"&g
2021-04-08 13:38:41
1105
原创 vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap 官网： github：https://github.com/ueberdosis/tiptap 演示：https://www.vue365.cn/code_demo.php?id=975 npm install tiptap npm install tiptap-extensions 该编辑器基于prosemiror，完全可扩展且无渲染。您可以轻松地将自定义节点添加为Vue组件。 基础案例 // 如果点击按钮，页面文本的样式没有改变，查看元素的标签是否已经改变，标签已改变，只是页面的样式
2021-04-02 10:58:15
3296
2
原创 vue+element的树组件的父子节点不相关联
父子节点不相关联 在做一个项目的时候，用到了el-tree组件，且显示了checkbox，点击表格，显示右边树节点选中，且树节点有层级关系， 问题：有的子节点是没有设置的，结果还是被选中了，后面查看文档，发现没有设置属性check-strictly（在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false） 可以看到，有个属性是控制父子节点之间的关联的，默认是相关联，即选中了父节点，子节点就会被选中 例：如下面的例子，未设置属性的时候，只要选中了父节点，所有的子节点就被选中 <
2021-04-01 14:57:50
2329
原创 vxe-grid过滤列数据后，获取剩下的表格内容
获取过滤后表格内容 // 获取过滤列后的表格数据 this.$refs.xTable1.getTableData() 结果：显示了所有数据和过滤后的数据，不管是单列过滤，还是多列过滤，都是显示当前页面显示的数据
2021-03-31 09:10:35
1891
原创 js中json格式数据转csv格式数据，可复制到excel文件中
实现ctrl+c的效果，将数据复制到粘贴板中 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.value = Url2; docum
2021-03-29 15:41:13
744
原创 vxe-table中vxe-grid的使用
vxe-grid的使用 渲染表格的话，不可能所有的数据都是靠自己手动生成的，需要通过v-for渲染出来， v-for循环生成列 <template> <div> <vxe-table border="inner" highlight-hover-row highlight-current-row ref="xTable" height="300"
2021-01-14 19:49:20
30650
4
原创 vue + 基于socket.io-client与服务端实现即时消息交互
WebSocket介绍 基于TCP的协议，由通信协议和编程API组成，能在浏览器和服务器之间建立双向连接，以基于事件的方式，赋予浏览器实时通信的能力，即服务器和客户端之间可以同时发送并响应请求，且页面不刷新能够获取到数据。 安装依赖 npm install vue-socket.io --sava 全局引用 main.js文件中 import VueSocketIO from 'vue-socket.io' import SocketIO from 'socket.io-client' Vue.use(n
2021-01-13 19:42:25
2556
原创 vxe-table-安装使用
element-ui的表格功能比较少，所以找到vxe-table这个关于table的控件，可以满足大部分的需求，并且和各个ui库兼容 vxe-table的安装和引用 官网：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install // 安装 npm install xe-utils vxe-table // 引用 index.js import Vue from 'vue' import 'xe-utils'.
2020-11-12 19:30:08
8710
2
原创 vue使用echarts-折线图
vue使用echarts charts的下载并引用 npm install echarts -S 全局引用 main.js // 引入 import echarts from 'echarts' // 挂载 Vue.prototype.$echarts = echarts 简单案例 单根折线： <template> <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></di
2020-11-12 19:21:28
1836
原创 vue+element 日期选择器的定位问题
切换不同的日期选择器，定位错误 日期选择器定位错乱，切换其他的日期，如果是使用v-if来就行切换的话，切换的日期选择器的定位会错乱，变成left:0;top:0 <el-date-picker v-if="selectData === 'consecData'" type="daterange" class="datePicker" start-placeholder="起始日期" end-placeholder="结束日期" v-model="modeStartDate1" range-se
2020-10-15 18:42:04
2259
原创 @vue-cli脚手架新建项目
@vue-cli脚手架 安装 安装脚手架：npm install -g @vue/cli ，如果已经安装vue-cli需要先删除npm uninstall vue-cli -g 创建项目 创建项目：vue create hello-world 下载依赖 //安装vue-router npm install vue-router //安装vuex npm install vuex 配置vue-router import Vue from 'vue' import VueRouter from 'v
2020-10-14 17:17:59
251
2
原创 js中string字符串的方法
string字符串方法 1.转型函数 var value = '25'; var number = Number(value); // 转型函数 console.log(typeof number);// number 2.charAt() var stringValue = 'hello world'; console.log(stringValue.length);// 11,字符串长度 // charAt（） console.log(stringValue.charAt(6));// w， 在第6
2020-09-17 12:39:15
333
原创 js中多个数组对应下标相加
两个数组对应下标相加 两个数组对应下标进行相加，合并为一个新数组 如下：实现arr1+arr2 =>[5,7,9] var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; ==> [5,7,9] function addTwoArr(arr1, arr2) { if (arr2.length === 0) { return arr1; } else { arr1.map(function(value, index) { arr2[index]
2020-09-10 19:16:50
5030
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人