- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue3根据后台的地址动态显示路由
1.router.js 正常路由那种写法， 我这里路由是放在index的子路由里了import { createRouter, createWebHashHistory } from "vue-router"export const constRoutes = [ { path: '/', name: 'index', meta: { title: "首页" }, component: () => import('@/views/index/
2022-05-30 10:57:03
832
1
原创 vue换地址栏左边的logo
先在根目录下新建个 favicon.ico 图标文件然后找到build文件夹下的webpack.dev.conf.js和webpack.prod.conf.js 分别添加这行代码 favicon: path.resolve('favicon.ico'),在webpack.dev.conf.js代码 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject:
2022-03-16 14:58:11
777
原创 vue使用 Tinymce富文本编辑器
1，目录结构2.index.vue<template> <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container"> <textarea :id="tinymceId" class="tinymce-textarea" /> <div class="editor-custom-btn-container"> <edi
2022-01-21 09:24:25
665
原创 node.js使用bcryptjs加密和解密
1，安装npm install bcryptjs2.引用1，加密var bcrypt = require('bcryptjs');var salt = bcrypt.genSaltSync(10);var hash = bcrypt.hashSync("加密的内容", salt);2.解密bcrypt.compareSync("加密的内容", hash);
2022-01-12 19:53:59
2574
2
原创 vue封装网络请求
新建utils文件夹，新建request.js文件import axios from "axios";import {BASE_URL} from "@/api/api"// const url = "http://zhengxie.imlimit.com/index/";const url = BASE_URL+ '/index/'const url1 = BASE_URLimport { ACCESS_TOKEN, JsonReturnCode } from "./mutation-type
2021-11-05 14:43:38
180
原创 uniapp微信支付
that.$request.register(‘wx_pay/buildOrderInfo’, {id: that.id, //微信支付的订单idtype:this.type,}).then(res => {uni.requestPayment({provider: ‘wxpay’,orderInfo: res,success: function(res) {that.closePopup()uni.showToast({title: ‘支付成功’,})setTimeout(r
2021-10-19 12:09:43
98
原创 vue实现不同语言的切换
安装vue-i18n： npm install vue-i18n --save-dev在main.js中添加这些代码import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n( { locale: window.localStorage.getItem('language') == null ? "zh" : window.localStorage.getItem('language'), //.
2021-10-18 18:10:49
1021
原创 vue处理网页的seo问题
再mian.js中访问后台接口router.beforeEach((to, form, next) => { _AXIOS({ url: "/seo/list", }).then(item => { let res = item.data.data if (to.name == "index" || !to.meta) { document.title = res.title; } else if (to.meta.title) {
2021-10-12 15:32:30
157
原创 vue使用wow.js
先安装npm install wowjs --save-dev注意："animate.css"版本要选择: "^3.7.2 要不然动画不显示然后再main.jsimport 'animate.css'import {WOW} from 'wowjs'Vue.prototype.$wow = new WOW({ boxClass: 'wow', // default animateClass: 'animated', // default offset: 150, // defau
2021-10-11 17:00:02
404
原创 vue实现锚点跳转，并且防止被导航栏遮盖住
//html代码 <div class="dark_anchor" id="rental" style="height: 100px; width: 100%; margin-top: -100px“ /> <rental />// 方法集合methods: { external(id) { document.getElementById(id).scrollIntoView({ block: "start",
2021-10-09 10:08:50
405
原创 ios和安卓热更新
先生成wgt文件，注意版本号要比现在的高app.vue代码<script> export default { onLaunch: function() { // #ifdef APP-PLUS plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { uni.request({ url: 'https://www.modo9123.com/api/user/appVersion'
2021-09-18 11:17:14
182
原创 解决ie不兼容es6的问题
引入browser.min.js并使用这个<script type="text/babel"> </script>有很多是因为swiper版本的问题，如果要兼容ie，得下载低版本得 swiper2 版本
2021-09-13 15:50:58
264
原创 uniapp解决在nvue不能获取节点信息得问题
// #ifdef APP-NVUE const dom = weex.requireModule('dom') // #endif const result = dom.getComponentRect(this.$refs.examplebody, option => { console.log('getComponentRect:', option) this.$emit("getNavTab",option.size.height)})
2021-09-07 11:55:26
1194
2
原创 uniapp地图实现点击回到当前位置
<map :latitude="latitude" id="around-food-map" :longitude="longitude" />onControltap(control) { uni.createMapContext("around-food-map", this).moveToLocation({ longitude: this.longitude, latitude: this.latitude });},
2021-09-06 11:43:38
1618
原创 uniapp在返回上一页时提示信息
onBackPress(e) { if (e.from == "backbutton") { uni.showModal({ title: '提示', content: '离开本页面将不会保存您输入的任何数据', success: (res) => { if (res.confirm) { uni.navigateBack({ delta: 1 }); } } }); return true
2021-09-02 11:43:59
1482
原创 vue如何在地址默认加后缀
效果如输入http://zhengxie.imlimit.com浏览器自动生成为http://zhengxie.imlimit.com/nationwide/mian.jsimport Vue from "vue";import App from "./App";import router from "./router";import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";imp
2021-08-31 18:19:19
1892
2
原创 ios上架
1.如果需要获取地址权限，必须在询问授权时提示为什么要获取权限2.如果页面有用户生成的信息，需要加举报或者投诉功能3.在用户列表，也需要有投诉或者拉黑，屏蔽等功能4.注意页面信息不要有测试等不正规的字...
2021-08-31 17:55:02
60
原创 每八条分一组
for (var i = 0, len = res.length; i < len; i += 8) { this.menu.push(res.slice(i, i + 8)); }
2021-08-27 18:28:36
71
原创 uniapp中字体加粗问题
在小米手机中，font-size：600；是没有什么效果的，但是在苹果或者华为就生效，所以必须统一成font-size：700；样式才能统一
2021-08-20 12:03:54
8325
3
原创 vue实现微信登录
href: "https://open.weixin.qq.com/connect/qrconnect?appid=wx6a65d99bc69d5708&redirect_uri=" + encodeURIComponent(window.location.href) + "&response_type=code&scope=snsapi_login&state=a4016624a4d80350483d6be39573b15e#wec.
2021-08-17 17:26:56
494
原创 uniapp在app端自定义地图样式
<map layer-style="c29e758aea2d2a1873049aeb81dab986"> </map>中间这行字符串是在高德地图上获取自定义地图的样式id
2021-08-17 13:35:54
1375
原创 解决uniapp得scoll-view下拉刷新不复位得问题
html代码<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="getList" scroll-anchoring @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherabort="refresherabort" :refreshe
2021-08-09 14:17:09
2372
原创 vue生成的时间戳在ios上显示NAN的问题
解决vue生成的时间戳在ios上显示NAN的问题 let issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); //判断当前是否是ios的Safari浏览器if (issafariBrowser) { let start_time = item.start_time.replace(/-/g, '/') //将时间的格式由 xx-xx- xx
2021-07-31 10:36:36
669
原创 uniapp实现页面滑动
uniapp实现页面滑动整体代码<template> <view> <scoll :list="scoll" @getIndex="getIndex1" :activeIndex.sync="activeIndex" class="padding" :index="index" ref="scoll" /> <swiper :style="{height:comHeight-swiperheight+'px'}" :current="active
2021-07-20 16:03:17
2541
原创 原生js实现瀑布流
```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit.
2021-07-09 10:36:06
56
原创 vue封装网络请求
1.新增util文件夹在util文件夹里新增http.js,负责axios的封装import Vue from "vue";import axios from "axios";import { Message } from "element-ui";const postAxios = (data, resolve, reject) => { const request = axios.create({ // API 请求的默认前缀 baseURL: "/index",
2021-07-07 14:22:50
145
原创 原生js实现图片懒加载
html代码 <img class="lazay" data-src="`+ element.picture + `"></div>js代码 var server = new IntersectionObserver(callback) // 图片懒加载 function lazay() { let lazay = document.querySelectorAll(".lazay") //获取图片节点
2021-06-30 10:02:12
60
原创 原生js访问网络请求
原生js访问网络请求` function ajax(opt) {let url="https://xxxxx.com" opt = opt || {}; opt.method = opt.method.toUpperCase() || 'POST'; opt.url =url+ opt.url || ''; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = o
2021-06-21 18:22:20
2623
原创 uniapp实现小红书登陆页面背景图无限滚动效果
<template> <view class="uni-navbar"> <view class="img"> <image @load="loads" :style="'height:'+height+'rpx;top:'+top+'rpx'" src="../../../static/login/1.png" mode="" /> <image :style="'height:'+height+'rpx;top:'+t
2021-06-17 14:14:02
1597
2
原创 在uniapp中使用swiper处理滑动边界问题
在用uniapp做项目的时候发现tab页切换到边界的时候会漏出半个屏幕的空隙，而正常的tab切换则是滑到边界后切换到下一个选项卡，后来百度好久，终于找到了这个解决的办法<template> <view > <scoll :list="scoll" @getIndex="getIndex1" :activeIndex.sync="activeIndex" class="padding"></scoll> <swiper :style="{
2021-06-15 16:52:09
3469
3
原创 uniapp快速解决app通知栏高度的问题
.uni-navbar{padding-top:var(--status-bar-height);}
2021-06-08 15:05:39
587
1
原创 uni实现线条跟随导航
<template> <view> <scroll-view scroll-x class="nav-tab-wrap" :throttle="false" @scroll="scrollEvent" scroll-with-animation :scroll-left="scrollLeft"> <view class="nav-tab"> <block v-for="(item,index) in list">
2021-06-03 13:38:41
117
原创 怎么将vue项目中地址上的#号去掉
<template> <div id="app"> <!-- <keep-alive> <router-view v-if="isRouterAlive"></router-view> </keep-alive> --> <router-view v-if="isRouterShow"></router-view> </div></tem
2021-05-25 14:50:58
956
原创 在vue中怎么分享到空间，微博，朋友圈
这里写自定义目录标题在vue中怎么分享到空间，微博，朋友圈新的改变`在vue中怎么分享到空间，微博，朋友圈在之前的项目中碰到了需要将当前网址分享出去的需求，找了好久代码，终于找了一个比较简单方便的。新的改变` data() { return { title:"牵着蜗牛去旅行", dec:"miandas", img:"" } }, methods: { shares(type) {
2021-04-09 14:18:44
329
原创 使用gulp-file-include对前端公共部分进行封装
当我们在画页面的时候，总有部分是和其他页面一模一样的，比如页头、页尾等，这样就导致一个地方的修改要在其他N个页面手动重复修改，这样很耗费耐心，又容易犯错，这时候gulp-file-include就显得很有作用安装gulp-file-includenpm install --save-dev gulp-file-include2.创建gulpfile.js文件const fileinclude = require('gulp-file-include')function fileInclude
2020-12-15 19:50:33
514
1
原创 学习日记
学习日记2020-08-31一、 申请微信小程序账号选择注册的账号类型选择小程序类型，可以具有更出色的体验，可以更快捷地获取与传播填写账号信息(1).邮箱：需是未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱(2).密码：正常的类型3.激活邮箱信息4.信息登记5.补全小程序信息二、安装与使用微信开发者工具1.文档-工具-微信开发者工具，下载微信开发者工具2.登录微信开发者工具，选择小程序选项3.微信公众平台-账号信息，将APPID复制进 微信开发者工具-详情
2020-09-07 08:19:00
78
原创 background-size属性的使用方法
CSS中background-size属性的使用方法CSS里的background-size属性能够决定如何在指定的元素里展示。可以随心所欲的控制背景图片的大小。background-size的语法：background-size有几个预定义的值，但也可以像其它size属性一样使用数字：contain: 包含，整个背景图都要被包含在元素内，没有超出的部分。cover: 覆盖，背景要覆盖元素的所有区域，不能有空白出现。长度/百分比: 数字值使用"length"|"percentage"时，第一个
2020-08-21 07:07:09
1575
原创 HTML中行内元素和块级元素的区别
HTML中行内元素和块级元素的区别1，行内元素和块级元素可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display:inline,块级元素display:block。2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总会在新的一排开始排列，各个块级元素占一行，垂直向下排列，若想使其水平方向排列，可以使用左右浮动(float:left/right)让其水平方向排列。3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高(li
2020-08-10 20:40:02
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人