梧桐芊羽-优快云博客

原创动态表单设计器推荐

表单设计器：根据需求定制，拖拽生成表单。以下是网站上查找到一些相关案例及demo，有兴趣可以访问看看，若有其他类似功能表单，也希望大家可以在评论区推荐下。代码：https://gitee.com/jjxliu306/ng-form-element。演示：https://jjxliu306.gitee.io/ng-form-element/Vue-form-making的vue3版本。

2024-01-02 21:57:54 1382

uniapp的vue3中使用uview-plus组件库。在插件市场中找到该组件并点击如下所示绿色按钮，弹出弹窗选择要导入的项目后，就会在uni_modules文件中生成如下文件内容。关于插件的下载区别，可参考：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html。在main.js文件中导入uview-plus组件库，添加如下。在uni.scss全局文件导入uview-plus的主题样式。在app.vue中添加uview-plus的样式。

2023-08-15 20:33:03 2739 1

原创 openlayer的飞行动画

openlayer飞行动画demo

2023-03-19 15:27:38 882

原创 geojson格式展示

获取geojson格式展示方式

2023-03-13 09:23:59 618

原创 volar插件总显示$event情况

volar插件安装后出现$event=>问题

2023-03-09 21:56:53 524

原创 cesium+vue

安装依赖yarn add -D cesium vite vite-plugin-cesium创建 vite.config.jsimport { defineConfig } from 'vite';import cesium from 'vite-plugin-cesium'; // 引入插件export default defineConfig({ plugins: [cesium()],});默认不设置加载出来的cesium如下所示，若要隐藏右上角按钮如下代码所示：<t

2022-05-15 13:58:47 615

原创 vscode报Could not find a declaration file for module ‘three/examples/jsm/libs/stats.module.js‘

vue3项目中添加第三方库的话，vscode报如下错误：Could not find a declaration file for module ‘three/examples/jsm/libs/stats.module.js’. ‘e:/three3d/vuepro3/node_modules/three/examples/jsm/libs/stats.module.js’ implicitly has an ‘any’ type.Try npm i --save-dev @types/three i

2022-01-04 18:16:30 6324 1

原创 uniapp中使用openlayer库

最近需要在uniapp上使用openlayer，于是网上查找相关资料貌似renderjs可以实现。顺便及记录下，可能不完善。renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。renderjs的主要作用有2个：大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力在视图层操作dom，运行for web的js库，fs，three.js，echart，mapbox库都可以使用大致步骤：1.openlayers官网下载openlayer包，地址如https:/

2021-08-12 21:19:24 6575 4

原创动态更换openlayer中ImageStatic的url地址

静态地图指定是非地图投影的普通地图，比如平面图，规划图，室内建筑等。偶尔会添加简单标注，定位，文字等。openlayer中的source类：ol.source.ImageStatic可以满足此需求。但本次例子只涉及imageStatic的地址切换。大致思路：判断是否是imageStatic实例，若有则删除原先存在的，再把最新的进行赋值。本例子仅供参考，建议多去官网查询api。官网地址：https://openlayers.org/ 及openlayers3例子：http://develop.smaryun

2021-07-27 22:22:57 1776 2

原创 vue自定义组件库发布到npm

vue组件做成npm包发布项目新建创建新项目cuttle：vue create cuttle修改项目结构及配置文件：修改src文件为examples，根目录下新建配置文件vue.config.js，并重写配置vue.config.js文件内容如下：module.exports = { // 重新配置入口 pages: { index: { // page 的入口 entry: 'examples/main.js',//默认是src/mai

2021-07-27 22:19:42 888 5

原创 git提交时报ssh: connect to host localhost port 22: Connection refused

https://www.freesion.com/article/7123240415/

2021-05-24 20:38:40 1716

原创 dayjs日期库使用

Dayjs 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 使用相同。目前moment、dayjs、date-fns是最常见的日期库，3者在体积大小差异：moment(功能多)>dayjs>date-fn(模块化加载)，但dayjs及date-fns基本可以替代monment，所以根据个人考虑对应库吧！此篇只介绍Dayjs，官方文档：https://dayjs.fenxianglu.cn/安装dayjs库 npm install dayjs --save项

2021-05-20 23:36:19 2253

原创 unia-app第三方app调用

一.uniapp开发的app打开第三方应用uniapp开发的app打开第三方应用，如淘宝，京东，QQ或本地安装好的apk等，并传递相关参数。可以参考此篇，下面这个是我通过uniapp打开本地安装apk，打开前提是必须知道包名。注意，此处的plus是5+Runtime的内部对象，所以普通浏览器是没有plus运行环境，普通浏览器运行plus api会输出plus is not defined错误，只能通过HBuilder真机运行，打包后或流应用环境下才能运行plus的api。 // 打开

2021-05-09 17:46:44 2100

原创 nuxt.js开发小记

1.Nuxt.js是什么？Nuxt.js 是一个基于 Vue.js 的通用应用框架，利用 Vue.js 开发服务端渲染的应用所需要的各种配置nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。确保npx(只要按照npm版本在5.2.0版本以上，则自动安装npx)//使用npx安装$ npx create-nuxt-app <项目名>//安装完进入项目目录并启动$ cd <project-name>$ npm run dev//编

2021-04-18 22:10:30 874 1

原创 302重定向：302 Moved Temporarily

字面上的区别就是301是永久重定向，而302是临时重定向；301适合永久重定向　　301比较常用的场景是使用域名跳转。比如，我们访问 http://www.baidu.com 会跳转到 https://www.baidu.com，发送请求之后，就会返回301状态码，然后返回一个location，提示新的地址，浏览器就会拿着这个新的地址去访问。　　注意： 301请求是可以缓存的，即通过看status code，可以发现后面写着from cache。　或者你把你的网页的名称从php修改为了htm.

2021-04-13 22:14:45 36506 1

原创 uni-app下拉刷新

在uni-app主要主要有两种方式进行下拉刷新，一种是通过 onPullDownRefresh() 方法进行，另一种是通过按钮点击触发。不过需要在page.json中配置才行。具体可以参考uni-app官网: 下拉刷新地址.在page.json文件配置对应的page节点，并在style中将enablePullDownRefresh设置为true，开启下拉刷新"page":[ { "path": "pages/classify/classify", "style": { "navi

2021-03-09 22:11:49 5362

原创 uni-app的头像上传

page.json配置路由 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/photo/photo", "style" : { "n

2021-03-06 14:08:56 2460 1

原创 uni-app添加uview组件库

在跟目录的pages.json文件下粘贴入下： "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" },在main.js导入相关import uView from 'uview-ui';Vue.use(uView);在uni.css中/** * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录

2021-03-03 22:01:12 4136 1

原创 vue报错npm ERR! chromedriver@2.46.0 install: `node install.js`

最近删除vue项目的node_modules后，运行npm i进行重装时报如下错误：code ELIFECYCLEnpm ERR! errno 1npm ERR! chromedriver@2.46.0 install: node install.js网上说这是vue-cli脚手架的一个bug，原因是chromedriver的部分文件被国内网络给墙掉了，无法下载完整chromedirver导致的。解决办法如下即可：npm install chromedriver --chromedriver_c

2021-01-28 21:35:52 1003

原创 vue的函数式组件functional

https://blog.youkuaiyun.com/deniro_li/article/details/86771526vue的函数式组件functional主要有以下特点：无状态（没有相应式数据）无实例（没有this上下文,无法像传统组件一样通过this获取属性）没有任何生命周期轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)在template标签里标明functional只接受props值不需要script标签Vue.component('my-comp

2021-01-14 23:29:52 7809

原创 form表单提交

<form id="formMsg" onsubmit="sendMsg()" method="post" role="form" class="php-email-form"> <div class="form-row"> <div class="col-md-6 form-group"> <input type="text" name="name" clas...

2021-01-04 12:33:29 304

原创 window重命名图片不带括号

在开发过程可能遇到一对凌乱的图片，全选后使用window时，直接重命名图片会导致图片后总带有括号，看着特别碍眼又不能挨个修改。所以，这时候，创建批处理文件.bat是个很好的选择。具体操作如下：1.在某个要命名的图片文件夹中，新建rename.bat文件，用编辑其打开后，复制如下代码：@Echo Off&SetLocal ENABLEDELAYEDEXPANSIONFOR %%a in (*) do (set "name=%%a"set "name=!name: (=!"set "nam

2020-12-28 22:56:31 3588 3

原创 vue编译报错webpackJsonp is not defined

vue项目打包之后报webpackJsonp is not defined，解决方式如下：修改build/webpack.prod.conf.js文件的插件HtmlWebpackPlugin，添加如下：chunks: ['manifest', 'vendor', 'app']

2020-12-01 22:11:52 3469

原创 vscode操作快捷键

VScode对多行编辑有两种模式。以下两种模式的切换前提先完成下面此操作：使用Shift+Ctrl+p快捷键调用查询输入栏，输入“cursor”，列表中会出现“切换多行修改键”这个选项。选择这个选项就可以在两种模式下切换。第一种模式1 Alt+Shift 竖列选择这种模式下只可以选择竖列，不可以随意插入光标。所以只限制于同一列且不间隔的情况下。第二种模式1 Shift+Ctrl 竖列选择2 Ctrl+光标点击选择多个编辑位点这种模式下不仅可以选择竖列，同时还可以在多个地方插入光标。

2020-11-21 15:03:21 497

原创解决code EINTEGRITY

项目开发环境遇到如下安装报错code EINTEGRITY，第一种错误如下所示：下载npm包是进行包的哈希检测导致的。执行如下命令：# 删除node_modules和package-lock.json文件，可以使用命令删除rm -rf node_modules rm -rf package-lock.json# npm清除缓存命令npm cache clean --force#重装下即可npm install...

2020-11-21 14:53:18 17621 4

原创 electron的devtools设置

mainWindow = new BrowserWindow({ height: sHeight, width: sWidth, useContentSize: true, autoHideMenuBar: true, //是否隐藏菜单 }) // mainWindow.webContents.openDevTools() //关闭开发者工具使用 mainWindow.webContents.closeDevTools(); mainWin..

2020-11-10 20:39:17 6961

原创 vue添加视频播放

<template> <div class="videopage"> <div class="vedio-body" @mouseover="handleControls(false)" @mouseleave="handleControls(true)"> <!-- <transition name="fade"> <div class="video-title" v-show="isControl"&gt

2020-10-22 21:57:53 1125

原创 react常见几种事件声明

第一种方式：箭头函数声明import React from 'react';class Login extends React.Component { constructor() { super(); this.state = {} } //箭头函数方式 onFinish = values => { console.log('Success:', values); }; onFinishFa

2020-10-14 17:22:06 1210

原创文件上传onUploadProgress使用

api/** * 添加音乐 */export function AddMusics(filelist, conf) { return http.post('/musicManage/addMusic', filelist,conf)}UploadMusic.vue<template> <div class="fileupload"> <div class="fileupload-title"> <el-button

2020-09-29 10:02:08 16753 1

原创 vue安装scss时报The “path“ argument must be of type string. Received undefined

在安装vue安装scss时报The “path” argument must be of type string. Received undefined解决方式：这个错误是sass-loader 版本造成的，此时的版本是 “sass-loader”:"^10.0.1",修改版本为 “sass-loader”: “^7.3.1”，重新使用命令安装npm i sass-loader@7 --D即可...

2020-09-23 15:04:40 3055 1

原创免费的天气api

这是最近网上查询到关于天气的api，大部分的接口都是收费，有部分接口虽然免费，但查询到的信息量特别不全。所以这里写目录标题天气API高德地图--天气查询[FREE API](https://www.free-api.com/)中国天气网天气API注：该接口最快3小时更新一次，包含基本天气信息、湿度、能见度、气压、空气质量指数等，可按地名、城市编号、IP查询该接口返回的json，version接口标识, v1:七天 v6: 实时1天如下所示：免费实况天气接口https://www.tianqiap

2020-09-16 21:55:14 32467 10

原创 html5拖拽事件

最近需要给项目添加拖拽功能属性，我决定使用HTML5新增拖放的API来实现。关于拖拽事件事件事件描述ondragstart （源元素）开始拖动时触发ondrag （源元素）拖动过程中触发ondragend（源元素）结束拖动时触发ondragenter （目标元素）源元素进入目标元素之内时触发ondragover （目标元素）源元素在目标元素区域内拖动时触发ondragleave （目标元素）源元素离开目标元素时触发ondrop （

2020-09-13 22:04:13 442

原创百度地图简单调用js及天气获取

http://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld注册一个百度账号后，并创建属于自己的应用，生成Ak，点我申请创建index.html，引用百度地图API文件。<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">源码<!DOCTYPE h

2020-09-01 20:07:42 3645 2

原创 vue监听某个对象属性变化

<template> <div class="test"> <div class="row"> {{studentName}} <input type="text" v-model="student.name" /> <input type="text" v-model="student.age" /> <input type="text" v-model="student.sex"

2020-08-25 20:24:49 13939

原创 angular10中的ngFor结构型指令使用

结构型指令是什么结构型指令是塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。在anugular中最常用的3个内置结构型指令NgIf，NgFor，NgSWitch。而今天我们要介绍的主角是ngFor指令的几个常见使用。若大家想要了解更多的话，请登录官网查看。https://angular.cn/guide/structural-directives#inside-ngfor在angular中遍历数组时，需要用到ngFor指令来给数组的每一项实例化模板。第一种使用方式：<ul>

2020-08-21 23:39:59 2622

原创 vue添加答题功能

前段时间项目要求添加一个答题功能，所以答题之前，要求创建答题题库。网上找了许多关于答题功能，最终，形成如下图所示答题要求，但适用于单选题和多选题，填空题不适用。1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题3.可以根据需要删除对应的答题选项，添加新答题类型本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创

2020-08-18 22:05:43 5382 10

空空如也

空空如也