- 博客(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
7069
原创 vue+Element-ui实现登录注册表单
登录注册表单验证通过Element-ui的表单实现登录注册的表单验证效果图如下注册登录表单登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求// 登录表单验证的代码// template的代码<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
2020-07-13 19:48:44
7141
3
原创 vue+Element-ui的el-table的多级内容渲染
将多层内容渲染到表格里面如渲染下面的数据，将一个对象渲染成一行数据，和平常的table表格的数据渲染不一样，这个不能直接渲染出来，需要加第三方的label来渲染数据tableData: [ { name: 'Huawei P40', properties: [ { description: '颜色', value: '红色' }, { description: '内存',
2020-07-08 08:28:34
8733
2
原创 vue+Element-ui的el-dialog弹出层的应用，及实现el-dialog拖拽效果
Element-ui的el-dialog的应用1.安装element-uinpm i element-ui -S2.全局引用**在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
7061
2
原创 vue+element表格的内容和编辑
element-ui引用el-table1.安装element-uinpm i element-ui -S2.全局引用**在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
2130
1
原创 在vue中xml格式和json的互转
xml和json之间的互转1.安装依赖//在项目文件下安装依赖 npm i x2js2.引入，在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
4180
原创 vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库，可以实现打印功能github地址github地址: https://github.com/crabbly/print.js安装printnpm install print-js --save将print.js放如src文件夹内在main.js引用printimport Print from './libs/Print/print'Vue.use(Print)print.js的代码// 打印类属性、方法定义/* eslint-disab
2020-05-20 14:26:52
6196
3
原创 微信小程序-组件的使用
在页面上需要将数据显示为树形结构，多个页面上使用，所以将树形结构封装成一个组件，在页面上引用即可。在文件夹下新建一个component的文件夹。
2022-08-05 18:47:13
825
原创 创建一个微信小程序
打开微信开发者工具，微信登录后，选择小程序，点击“+”按钮，新建一个小程序，项目名称和项目目录可以自己定义，输入AppId。可以生成一个基本的项目。，没有注册的话，点击“立即注册”，选择小程序，进入填写页面填写信息，注册成功后，可以在设置找的自己的AppId。是当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab，：让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。：类似与html文件，编写页面的标签。：类似于css文件，编写页面的样式。..
2022-08-03 19:45:25
436
原创 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
5568
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
5385
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
4373
原创 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
6158
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
430
原创 vue中使用muuri动态布局(一)
muuri官方文档：https://muuri.dev/GitHub地址：https://github.com/haltu/muuri添加链接描述Muuri是一个JavaScript布局引擎，它允许您构建各种布局（不是开玩笑！），并使它们具有响应性、可排序、可过滤、可拖动和/或动画。muuri的简单的使用安装 muurinpm i muuri在组件中引用import Muuri from "muuri"<div class="muuri"> <div
2021-11-26 11:28:14
1206
原创 chrome安装vue-devtools
chrome 安装 vue-devtools插件方法1：在github下载vue-devtoolshttps://github.com/vuejs/vue-devtoolsnpm i // 下载依赖npm run build // 打包结果在打包的时候报错，无法打包成功方法2：全局安装vue-devtools（1），安装npm i -g vue-devtools在node全局安装文件夹中可以看到以下，说明安装成功（2）加载插件，打开chrome的扩展程序页面在扩展程序页面，点击
2021-11-19 16:59:12
990
原创 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
8915
原创 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，更新高版本node1.在控制面版中将node删除，2.在node官网中下载14版本的node，重新
2021-10-25 17:26:13
7049
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
2081
原创 使用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// methodcropSuccess(imgDataUrl, field) {//
2021-06-22 14:10:46
766
原创 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
2434
原创 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
3918
4
原创 python的web开发
python实现web开发WSGI接口： 接受HTTP请求、解析HTTP请求、发送HTTP响应运行WSGI服务：针对每个HTTP请求进行响应# hello.pydef 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
251
原创 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
282
原创 node.js连接mysql，实现CRUD，解决Field ‘id‘ doesn‘t have a default value
node.js连接数据库初始化项目: 添加package.jsonnpm 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
687
原创 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
898
原创 vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap官网：github：https://github.com/ueberdosis/tiptap演示：https://www.vue365.cn/code_demo.php?id=975npm install tiptapnpm install tiptap-extensions该编辑器基于prosemiror，完全可扩展且无渲染。您可以轻松地将自定义节点添加为Vue组件。基础案例// 如果点击按钮，页面文本的样式没有改变，查看元素的标签是否已经改变，标签已改变，只是页面的样式
2021-04-02 10:58:15
2165
2
原创 vue+element的树组件的父子节点不相关联
父子节点不相关联在做一个项目的时候，用到了el-tree组件，且显示了checkbox，点击表格，显示右边树节点选中，且树节点有层级关系，问题：有的子节点是没有设置的，结果还是被选中了，后面查看文档，发现没有设置属性check-strictly（在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false）可以看到，有个属性是控制父子节点之间的关联的，默认是相关联，即选中了父节点，子节点就会被选中例：如下面的例子，未设置属性的时候，只要选中了父节点，所有的子节点就被选中<
2021-04-01 14:57:50
1976
原创 vxe-grid过滤列数据后，获取剩下的表格内容
获取过滤后表格内容// 获取过滤列后的表格数据this.$refs.xTable1.getTableData()结果：显示了所有数据和过滤后的数据，不管是单列过滤，还是多列过滤，都是显示当前页面显示的数据
2021-03-31 09:10:35
1580
原创 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
548
原创 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
28673
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
2084
原创 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
8111
2
原创 vue使用echarts-折线图
vue使用echartscharts的下载并引用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
1683
原创 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
2084
原创 @vue-cli脚手架新建项目
@vue-cli脚手架安装安装脚手架：npm install -g @vue/cli ，如果已经安装vue-cli需要先删除npm uninstall vue-cli -g创建项目创建项目：vue create hello-world下载依赖//安装vue-routernpm install vue-router//安装vuexnpm install vuex配置vue-routerimport Vue from 'vue'import VueRouter from 'v
2020-10-14 17:17:59
152
2
原创 js中string字符串的方法
string字符串方法1.转型函数var value = '25';var number = Number(value); // 转型函数console.log(typeof number);// number2.charAt()var stringValue = 'hello world';console.log(stringValue.length);// 11,字符串长度// charAt（） console.log(stringValue.charAt(6));// w， 在第6
2020-09-17 12:39:15
242
原创 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
4586
6
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人