- 博客(35)
- 收藏
- 关注
RSS订阅原创 使用Vue + vue-i18n搭建国际化网站
两个文件夹的对象名和key值需完全相同，value值根据语言来变动。调用this.$i18n.locale = 'xxx' 即可实现。3.langs文件夹下新建语言文件（zh.js、en.js等）2.i18n文件夹下新建i18n.js文件和langs文件夹。通过i18n 插件内置的 $t 语法编写文案。1.在src根目录下新建i18n文件夹。在VUE上挂载i18n实例。
2022-10-28 16:13:17
842
1
原创 VUE设置和清除定时器
keep-alive > 有缓存的作用，可以使被包裹的组件状态维持不变，当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件，会多出两个生命周期钩子: activated 与 deactivated。在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样，但更有优势。
2022-10-26 17:36:53
15944
1
原创 VScode Vue项目使用html代码自动补全插件
打开文件方式：在VScode中同时按住Ctrl+Shift+P，搜索配置文件。（3）父子标签：输入父标签>子标签，按下tab键。（2）多个相同标签：输入标签名*5，按下tab键。（4）兄弟标签:输入兄标签+弟标签，按下tab键。（1）单个标签：输入标签名称，按下tab键。
2022-10-20 17:45:51
8969
原创 Git使用命令行拉取项目、提交代码
1.打开GitHub，选择项目，复制项目地址2.在电脑上新建一个项目文件夹，在文件夹里点击右键——>Git Bash Here，打开Git命令行3.输入git clone + 项目地址4.拉取成功，可以用编译器打开项目。
2022-10-20 12:02:32
8414
原创 Swiper实现渐显渐隐产品轮播图
效果图通过渐显渐隐的方式自动轮播产品图，点击底部的分页器也可以切换图片1.swiper插件下载地址https://3.swiper.com.cn/download/index.html2.加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="path/to/...
2021-08-31 11:07:42
1374
原创 纯CSS实现地图标记光圈扩散效果
效果图给地图上相应位置的定位添加光圈扩散效果，光圈由小变大，颜色由深色过渡到浅色，鼠标悬浮在圆点上时出现文字标签，大大丰富地图的视觉效果。html代码<div class="map-bg"> <p class="region-item"> <span class="region-spot">●</span> <span class="region-tab">美国分公司</span.
2021-08-30 14:37:42
1387
原创 Ubuntu16.04升级php至7.3
Linux操作系统：Ubuntu16.04.3原php版本：7.0添加软件源的扩展工具sudoapt-getinstallsoftware-properties-common apt-transport-https lsb-release ca-certificates添加php的PPA源add-apt-repository ppa:ondrej/php出现OK说明添加成功。更新软件源缓存sudoapt-get update4.安装Php7.x相关的软件...
2021-08-30 11:39:05
779
原创 React Native解决在ios13暗黑模式下状态栏都为白色的问题
修改node_modules/react-native/React/Modules/RCTStatusBarManager.m文件将RCT_ENUM_CONVERTER(UIStatusBarStyle, (@{ @"default": @(UIStatusBarStyleDefault), @"light-content": @(UIStatusBarStyleLightContent), @"dark-content": @(UIStatusBarStyleDefault),})
2020-05-29 18:36:02
1188
原创 mac系统解决RN项目启动时Could not get resource ‘https://dl.google.com’的问题
原因：电脑配置代理后，下载的时候没有走代理，因此无法下载'https://dl.google.com'’中的东西解决方案：在终端运行命令：cd .gradleopen .打开gradle.properties修改～/.gradle/.gradle.properties文件中的代码为：# systemProp.https.proxyPort=1080systemProp.http.proxyHost=127.0.0.1# systemProp.https.proxyH..
2020-05-20 09:44:16
727
原创 JS传递数组给PHP后端
前端无法直接传递数组给后端，需要先将数组转化为JSON字符串格式，PHP接收JSON字符串后再将其转化为数组进行使用。1.JS将数组转化为JSON字符串JSON.stringify(data)2.PHP将JSON字符串转化为数组json_decode($_GET["data"], true);...
2020-05-11 14:06:29
2427
原创 React Native使用FlatList渲染列表
1.引入FlatList组件import { FlatList } from 'react-native';2.编写列表组件class DeviceList extends Component { //转换时间戳 getTime = (timeStamp) => { var date=new Date(parseInt(timeStamp)* 1000); var...
2019-12-24 09:17:41
831
原创 React使用Redux管理数据
1.文件目录2.state.jsexport default { areaIndex: 0, token: { accessToken: '', idToken: '', refreshToken: '' }}3.index.jsRedux 提供createStore这个函数，用来生成 Store。createStore函数接受另一个函数作为参数，返回...
2019-12-19 19:06:02
132
原创 封装axios请求
1.新建request.js文件，封装axios请求import axios from 'axios';const instance = axios.create({ baseURL: 'https://XXXX' //接口url前缀});//请求拦截处理instance.interceptors.request.use(async function (config) {...
2019-12-18 15:19:45
226
原创 react native使用ModalDropdown实现下拉选择框
参考博客链接：https://blog.csdn.net/qq_39910762/article/details/827711081.安装npm i react-native-modal-dropdown -save2.引入import ModalDropdown from 'react-native-modal-dropdown';3.使用<ModalDrop...
2019-12-16 09:19:38
5431
原创 React双重循环渲染棋盘
1.非循环渲染（写死） render() { return ( <div> <div className="board-row"> {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}...
2019-12-09 10:14:57
1350
原创 VUE局部封装axios接口
1.在src目录下新建api文件夹，新建js文件2.封装axios接口import axios from "axios";import router from "../router";import {Dialog} from "vant";//请求拦截器let instance = axios.create({ baseURL:"https://baby.xmn.top...
2019-11-23 16:08:53
485
原创 移动端VUE实现一周课程表
效果图点击课程弹出课程详情代码使用嵌套的v-for循环去实现<template> <div class="class-table"> <div class="table-wrapper"> <div class="tabel-container"> <table> ...
2019-11-13 15:14:34
4343
2
原创 使用localStorage存储对象
localSstorage无法直接存储对象，可以利用json.stringify与JSON.parse的转换达到目的。json.stringify：将对象转换为 JSON 字符串JSON.parse：将JSON 字符串转换为对象function storageObj(obj) { var Str = JSON.stringify(obj); //将对象序列化 l...
2019-10-30 22:59:45
2199
原创 VUE页面实现点击按钮删除某一条数据
弹出的对话框和轻提示使用的是Vant-UI框架中的组件<template> <div class="body"> <div v-for="(item,index) in data"> <van-cell-group class="panel"> <button class="delete" @cl...
2019-09-20 17:26:41
21643
原创 html根据地址栏携带的参数改变网站的title
<script> let url = window.location.href; //获取地址栏的url let id=""; if(!sessionStorage.getItem("id")){ //若本地存储的id值不存在 if (url.indexOf("?") != -1) { let str = url.subs...
2019-09-20 11:22:25
791
原创 VUE+Vant实现下拉刷新和上拉加载
使用Vant的PullRefresh组件和List 组件<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" ...
2019-09-18 20:27:19
9240
6
原创 Echarts饼图样式详解
option = { title : { text: '某站点用户访问来源', //大标题 subtext: '纯属虚构', //小标题 x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b...
2019-08-27 16:19:02
2856
原创 Echarts折线图柱形图样式详解
option = { title: { text: '折线图堆叠', top: '10%', left: 'center', }, legend: { //展现了不同系列的图例（标记，颜色和名字）。可以通过点击图例控制哪些系列不显示。 data:['邮件营销','联盟...
2019-08-27 15:10:16
506
原创 使用CSS实现鼠标悬停时图标旋转效果
效果图代码<span class="other">其他<i class="el-icon-arrow-down el-icon--right icon-arrow"/></span> .icon-arrow{ transition: all 0.2s ease-in-out; -webkit-transition: ...
2019-08-16 11:05:02
8114
原创 VUE使用计算属性和filter筛选内容
搜索框<el-row style="text-align: left;margin-bottom: 20px"> <el-col :span="16"> <el-input v-model="mySearch" size="small" placeholder="请输入内容" class="input-with-select"/>...
2019-08-08 16:56:09
3003
原创 VUE根据滚动条与顶部的距离固定左侧导航栏
在有顶部导航栏的情况下，呈现左侧导航栏固定的效果不能简单地使用fixed来实现，因为当滚动条下拉时导航栏菜单也需要改变位置，而不是固定在页面的某一位置。页面效果1.滚动条处于顶部2.滚动条下拉到一定位置实现代码<template> <div> <div v-show="!isCollapse" id="left" cla...
2019-08-08 01:26:32
6188
原创 CSS定义或修改没有类名和id名的元素样式
在使用第三方ui库element ui时需要修改一个没有类名和id名的元素DIV的样式，可以采用在CSS中设置的方式。首先找到该元素的某一个带有id名或类名的父级元素，然后使用子元素选择器向下逐层选择直到获取到要修改的元素进行样式定义。选择器：nth-child(n)含义：选择父元素下的第n个子元素例：<div id="map"> <div>...
2019-08-03 19:51:25
1394
原创 VUE根据路由跳转改变头部导航栏文字
效果图步骤如下：1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字{ name:"琴房管理系统", path:"/myHome", component:() => import("../page/common/myHome.vue")}2.父组件传值2.1.在父组件APP.vue...
2019-06-19 22:33:36
3664
原创 VUE用layer实现弹出提示框
效果图步骤如下：1.安装vue-layernpm install vue-layer2.引入layerimport Vant from 'vant';import layer from 'vue-layer'Vue.prototype.$layer = layer(Vue);3.在页面中使用layer实现弹出提示框html代码<li class="...
2019-06-19 20:01:34
12555
原创 vue-quill-editor富文本编辑器的使用
效果图步骤如下：1.在cmd中安装依赖npm install vue-quill-editor –save2.在main.js中引入import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'impor...
2019-06-15 22:32:44
350
原创 VUE实现token登录验证
实现这个登录功能的过程真是一波三折，中途出现了bug，整了两三天才解决了问题，心力交瘁，简直一个头两个大，感觉自己的毅力和耐心又提升了一个层次ORZ好在最终在同学的帮助下解决了bug，不过我又再次感受到了作为一个菜鸟的浅薄，大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤，以防以后再犯错1.封装store对token的操作方法首先在src目录下...
2019-04-01 17:47:14
9780
8
原创 使用Vue.set()方法实现响应式修改数组数据
在页面中显示数组数据时发现了一个问题，当在methods方法中修改数组数据后，虽然数组已经发生改变，但是改变后的数据并没有渲染到页面上。这是因为在VUE中，如果在实例创建之后添加新的属性或者改变属性到实例上，它将不会触发视图更新。而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的，同时触发视图更新，动态响应数据的变化。用法如下：Vue.set(object,index,v...
2019-03-28 18:58:43
10698
2
原创 VUE用v-show指令控制导航栏的隐藏和显示
在一个网页项目中，为了界面的美观整洁有时候导航栏需要隐藏起来，而v-show指令可以动态控制dom元素的显示和隐藏。以下是用v-show指令实现这个功能的过程1.给需要隐藏的dom元素添加v-show指令isShow为一个变量，为true时该元素显示，为false时该元素隐藏<div class="bottom" v-show="isShow">2.在script...
2019-03-24 22:29:20
9016
原创 VUE实现底部导航栏
在做一个VUE网页项目时，需要实现底部导航栏的功能，点击相应的按钮进行页面的切换。由于第一次开发这种网页项目，对框架不太熟悉，于是去网上搜寻了一些资料，参考别人的做法，实现了这个底部导航栏。现在记录一下这个导航栏的实现过程。1.首先写好导航栏的样式和布局，做出静态效果。<template> <div class="bottom" v-show="isShow...
2019-03-24 18:17:03
14167
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人