少年的范儿-CSDN博客

效果图代码如下a.子组件中wxml 中<view class="picker-city-area-content"> <picker bindchange="changeRegin" mode = "region" value="{{region}}"> <view class="picker-city-area-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view>

2022-03-15 15:36:39 733

原创在 vue 中基于 tinymce 封装的一个富文本编辑器组件

效果图过程安装对应的依赖（最好指定版本） npm install tinymce@5.0.3 -S npm install @tinymce/tinymce-vue@2.0.0 -S安装依赖的版本不同，可能会出现奇奇怪怪的问题！！！在项目的 public 目录下新建【tinymce】文件夹，整体目录结构如下到 tinymce 官网去下载汉化包 https://www.tiny.cloud/get-tiny/language-packages/将解压后的文件夹【l

2022-02-11 17:41:54 1083 4

原创 vuepress + GitHub 搭建一个在线文档

这是一个简易的配置，更复杂的配置还需前往vuepress官网进行配置，功能很强

2022-01-15 11:40:25 649

原创 vue 移动端中使用 vue-awesome-swiper 插件实现异形轮播

Vue 中使用 vue-awesome-swiper 插件实现异形轮播图

2021-12-08 11:40:21 2064 6

原创自定义封装小程序模态框（modal）

效果图代码如下modal 组件中wxml 部分<view class="mask" wx:if="{{show}}" bindtap="clickMask"></view><view class="modal-wrapper" wx:if="{{show}}"> <view class="modal-content" style="height:356rpx"> <view class="main-content">

2021-11-15 14:21:14 596

原创自定义封装小程序搜索框组件（search），支持按钮点击搜索和回车搜索

效果图代码如下1. 子组件中wxml 部分<view class="search-box-component"> <view class="search-content"> <view class="search-left"> <view class="search-icon" style="width:30rpx;height:30.3rpx;margin: 0 20rpx 0 28rpx;">

2021-11-15 13:45:11 2100

原创封装小程序日期选择器组件 picker-view

效果图日期组件中wxml 部分<view> <view bindtap="handleShowDatePicker">{{year}}-{{month}}<text wx:if="{{isShowDays}}">-{{day}}</text></view></view><view class="date-picker-container {{isShow ? 'active' : 'display-no.

2021-11-12 18:07:00 524

原创 CSS水波动画

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.

2021-10-27 11:31:09 329

原创 h5开发中使用JS-SDK，已封装

说明：参数 oType：是为了区分不同 JS接口列表里面的方法，传进去不同的值（自己定义），可以处理不同的方法，例如：当 oType 为 scan 时，调起微信的扫一扫功能；当 oType 为 location 时，可以获取当前的经纬度。当然，如果项目中只使用到一种JS接口，此参数可以不要。1. 在项目的utils下创建一个 wxTools.js 文件（自己想在哪创建就在哪创建）2. 代码如下：npm i weixin-js-sdkimport wx from 'weixin-js-sdk'

2021-08-20 13:27:34 1129

原创 h5唤起微信扫一扫

安装和使用npm install weixin-jsapiimport wx from 'weixin-jsapi'封装成一个方法import wx from "weixin-jsapi"// 获取签名的接口(wx.config 里面的几个参数)import { handleWxScanCode } from "@/api/tools" /** * 唤起微信支付 * 获取微信签名信息 * url: 当前扫码界面的url */const wxScanCode = (url).

2021-07-12 10:09:47 587

原创九步完成 vue-admin-template 动态渲染路由

这里使用的是 vue-admin-template 这个模板。可以从官网下载 vue-admin-template（基础模板）和 vue-template-admin（集成方案）这两个模板，对照这修改。链接1. 稍微整理一下页面修改后台的路由文件 src/router/index.jsexport const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'

2021-07-06 23:22:31 2274 9

原创 express 连接mysql数据库

let mysql = require('mysql')let options = { host: 'localhost', prot: '3306', user: 'root', password: 'root', database: 'databasename'}// 创建数据连接对象let con = mysql.createConnection(options)// 建立连接con.connect(err => { if(err)

2021-06-17 23:10:13 550

原创搭建一个基于 Vue + Vant 的移动端项目模板

项目模板说明通过 px2rem-loader 和 amfe-flexible 实现 px 自动转rem, 不想转rem的可以使用大写的 PX使用 less 或 scss ，项目中已经安装好依赖，根据自己的需求选择搭建步骤创建一个Vue项目vue init webpack my-vant-app //（详细步骤就不多说了。。。）安装 px2rem-loader 和 amfe-flexible 两个依赖npm install px2rem-loader –saven

2021-05-05 17:49:55 2766 3

原创 react 后台模板启动时报错 TypeError: Cannot read property ‘forEach‘ of undefined

两种解决方法1. 根据报错信息，找到 ReactRefreshEntry.js 文件，注释掉第 8 行，重启项目，刷新页面就可以了.2. 关闭 React Developer Tools 扩展插件，即可（如果未安装，也就不会报错）.

2021-05-04 21:29:11 794

原创 JS实现深拷贝常用的几种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS深拷贝的几种方法</title></head><body> <script src="htt

2021-04-29 08:50:47 146

原创 Echarts 堆叠图 tooltip 实现 “倒序展示”

修改 tooltip 前tooltip: { trigger: 'axis', axisPointer: { // 使用轴触发工具提示 type: 'shadow' // 默认为“影子”；也可以是“线”或“阴影” } },修改 tooltip 后tooltip: { trigger: "axis", formatter: function (params) { let

2021-04-23 15:45:31 1074

原创 Vue Element UI Upload 上传多张图片

<template> <div> <el-card> <h1>轮播图 - 图片上传管理</h1> <el-divider></el-divider>  <el-form ref="formRef" :model="uplo

2021-04-20 17:01:37 358

原创 Vue基于Element-UI二次封装日期选择器和分页组件

封装日期组件（在myDate.vue 文件中）<template> <div class="my-date"> <el-date-picker @change="handleChangeDate" v-model="selectDateValue" :value-format="formatDate" type="daterange" :align="align" unlink-panels

2021-03-23 12:07:26 844

原创原生 JS 封装的一些方法【更新中...】

/** * ----------- 使用说明 ---------------- * getNowDate: 获取当前日期和时间 * getDynamicDate: 获取动态日期和时间 * unique: 数组去重 ES6 * unique_: 数组去重 ES5 * toFormat: 实现数字千分位 * deepCopy: 深拷贝 * getDataType: 获取数据类型 * getDeviceType: 获取当前设备类型 * ascArray: 数组升序 * desArr

2021-03-11 23:43:16 120

原创 JS 数组的 every()、some() 、filter()、findIndex() 、find()、map()方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组的几种方法</title></head><body> <script> var

2021-01-19 09:51:28 183 3

原创盒子居中的几种常用方法

CSS 盒子居中的六种常用方法<div class="wrapper"> <div class="box"></div> </div>-------------------------------------最传统的方法.wrapper{ position: relative; width: 400px; height: 400px; background-color: aqua; } .box{ position: ab

2020-07-13 17:02:34 6532

少年的范儿的博客

原创微信扫码进入小程序的webview页面，发现左上角没有home键

原创 uniapp中二次封装jssdk和使用

原创 css3实现0.5px边框

原创搭建一个vue3+vant4+vite4+pinia 的移动端h5模板

原创 uniapp 小程序图片懒加载组件 ImageLazyLoad

原创 css 实现圆角渐变色效果

原创 vue3+vite+uniapp 封装一个省市区组件

原创 vue3+vite+ts项目中简单的二次封装axios

原创 nvm的简单使用

原创移动端H5封装一个 ScrollList 横向滚动列表组件

原创小程序日期（日历）时间选择器组件

原创封装小程序图片预览组件

原创 vue3中使用 wx-open-launch-app 标签及解决控制台警告的问题

原创服务器安装nginx步骤

原创 h5在微信内自定义分享遇到的坑

原创小程序使用 picker-view 自定义封装省市区三级联动组件

原创小程序基于 picker 封装省市区三级联动组件