- 博客(41)
- 收藏
- 关注
RSS订阅原创 判断用户是否离开了当前页面
它无法判断用户是否正在关闭页面。当用户关闭标签页时，visibilitychange 事件可能会触发（变为 hidden），但我们无法区分这是切换还是关闭。浏览器在处理页面卸载时，并不会等待unload事件处理器中的异步操作。
2025-09-04 11:45:42
191
原创 评分以五颗星展示封装组件
评分以五颗星展示封装组件 第一步接收score和size(代表评分和五角星大小) props: { score: Number, size: Number } HTML部分 <template> <div class="star" :class="`star-${size}`"> <p class="star-item" v-for="(sc,...
2020-03-13 21:33:54
290
1
原创 Vue中固定高的div做展开与收缩操作
Vue中固定高的div做展开与收缩操作 HTML <div class="downUp transition-dom" ref="box" @click="funAnimate"></div> CSS .downUp { height: 36px; } .transition-dom { transition: all .2s linear 0s; } javasc...
2020-03-13 08:59:24
1912
原创 vue/no-side-effects-in-computed-properties
Unexpected side effect in “listShow” computed property vue/no-side-effects-in-computed-properties 报错原因 if (!this.totalCount) { this.isShow = false return false } 在ESLint的情况下，computed中不能直接修改data中的数...
2020-03-12 09:35:51
5753
原创 商品详情页的子路由
商品详情页的子路由 首页列表->详情页 首页的子组件ShopsListItem.vue中 showDetail(id) { this.$router.push({ path: '/detail', query: { id } }) } 问题：子路由跳转参数不会随之携带 Detail.vue的mounted中就保存this.id = this.$rout...
2020-03-11 17:19:15
403
原创 better-scroll横向滚动，初始化宽度和请求数据之间
better-scroll横向滚动，初始化宽度和请求数据之间 请求数据 需要初始化的页面 mounted() { this.$store.dispatch('getGoodsList', () => { // this._initScorll() }) } vuex中 const actions = { // 1.获取了goodsList,同时赋值了goo...
2020-03-08 17:33:25
375
原创 vue-cli4中定义scss常量
vue-cli4中定义scss常量 第一步：/src/assets/css/config.scss $green: #02a774; 第二步：Yes/选择scss vue add style-resources-loader 第四步：vue.config.js文件 const path = require("path"); module.exports = { pluginOptions: {...
2020-02-24 14:03:42
1692
原创 双飞翼布局(先加载中间，左右宽度为200，中间自适应)
双飞翼布局 先加载中间，左右宽度为200，中间自适应 <div class="main"> <div class="container"> <div class="center">中间</div> </div> <div class="left">左</div> <div cla...
2020-02-23 18:01:33
265
原创 抖动和节流
抖动和节流 <input id="search" type="text"/> <div id="content" style="height: 150px;line-height: 150px; text-align: center;background-color: gray;"></div> <script> let num =...
2020-02-23 13:25:40
267
原创 微信小程序App中的值
微信小程序App中的值 detail.js中点击加入购物车 onAddCart(){ // 3.1获取商品对象 const obj = {} obj.iid = this.data.iid obj.imageURL = this.data.topImages[0] obj.title = this.data.baseInfo.title obj....
2020-02-19 15:38:54
355
原创 登录-后台管理系统
后台管理系统登录流程 输入账号和密码，点击登录按钮 login(){ this.$refs.loginForm.validate(async (valid) => { if(!valid) return; const { data:res } = await login(this.loginForm) if(res.meta.status !...
2020-02-17 09:33:04
8365
原创 登录-微信小程序
登录流程 App.js中 const TOKEN = 'token' App({ //全局变量 globalData: { token: '' }, onLaunch: function() { // 1.先从缓存中取出token const token = wx.getStorageSync(TOKEN) // 2.判断token是否有值 if...
2020-02-15 10:52:17
193
原创 微信小程序中组件的传值
微信小程序中组件的传值 组件与页面之间的样式隔离 Component({ options: { //isolated:默认值隔离 //apply-shared:页面影响组件 //shared:相互影响 styleIsolation: "isolated" } }) 页面向组件传值 // 页面向组件传值 Component({ properties: { t...
2020-02-15 10:33:17
645
原创 WXS微信小程序
WXS微信小程序 目的：在WXML中是不能直接调用Page/Component中定义的函数的(实现Vue中的过滤功能) 第一种写在.wxml中 <wxs module="info"> var message = "hello world" var name = "codewhy" var sum = function(num1,num2){ return num1 ...
2020-02-13 17:25:20
358
原创 git tag命令
git tag命令 git add . git commit -m "提交文字" git tag 01_知识点：打tag git tag：查看tag命令 git reset --hard "复制的值"：回退 git push --tags：push到github中
2020-02-13 11:08:59
166
原创 组件中图片加载完成，执行$emit
组件中图片加载完成，执行$emit watch: { //detailInfo是props传过来的值 detailInfo() { //imagesLength统计图片的数量 this.imagesLength = this.detailInfo.detailImage[0].list.length; } } @load="imgLoad" imgLoad(...
2020-02-07 10:21:51
180
原创 富文本vue-quill-editor
富文本vue-quill-editor npm install vue-quill-editor --save main.js中 import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' ...
2020-02-06 14:41:32
141
原创 表格数TreeTable
表格数TreeTable npm i vue-table-with-tree-grid -S main.js中引入 import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table',TreeTable) 使用 <tree-table :data="cateList" :columns="colum...
2020-02-06 14:17:55
276
原创 iconfont的使用
iconfont的使用 Font class下载至本地 取五个文件 iconfont.css iconfont.eot iconfont.svg iconfont.ttf iconfont.woff src/assets/icon main.js中引入 import './assets/icon/iconfont.css'
2020-02-05 15:06:32
235
原创 swiper
swiper npm install vue-awesome-swiper --save main.js中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSw...
2020-02-05 13:49:21
131
原创 vue.config.js
vue-cli4的vue.config.js配置文件 const path = require('path') function resolve(dir){ return path.join(__dirname,dir) } module.exports = { // 浏览器配置 devServer:{ open:true }, // 文件...
2020-02-05 08:51:49
109
原创 vuex
vuexvuex使用computed监听属性中使用抽离模块 vuex使用 computed监听属性中使用 computed:{ count(){ return this.$store.state.count } } import { mapState } from 'vuex' computed:mapState({ count:'count' }) //...为展开运算符，让它与其...
2020-02-04 15:30:25
117
原创 分支命令
分支命令 创建 git checkout -b order 推送分支到github git push -u origin order 代码提交 git status git add . git commit -m "文字描述" git push 合并分支到master git checkout master git merge order git push ...
2020-02-04 13:21:32
253
原创 滚动到一定位置,导航条固定
滚动到一定位置,导航条固定 两个tab-control <tab-control class="home-tab-control" @tabClick="tabClick" :tabList="['流行', '新款', '精选']" ref="tabControl1" v-show="isTabFixed" /> <tab...
2020-02-04 12:32:27
651
原创 better-scroll
better-scroll 安装 npm install better-scroll@next -S 把better-scroll封装成一个组件 <template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> ...
2020-02-04 10:20:47
131
原创 pm2管理应用
pm2管理应用 npm i pm2 -g 启动项目：pm2 start .\app.js --name 自定义名称 查看运行项目：pm2 ls 重启项目：pm2 restart 自定义名称(id值) 停止项目：pm2 stop 自定义名称(id值) 删除项目：pm2 delete 自定义名称(id值) ...
2020-01-31 16:25:12
236
原创 项目优化策略vue.config.js
项目优化策略 为开发模式与发布模式指定不同的打包入口 src/main-dev.js src/main-prod.js vue.config.js文件里面 module.exports = { //chainWebpack链式编程 //configureWebpack操作对象编程 chainWebpack: config => { // 发布模式 ...
2020-01-31 16:16:49
269
原创 发布环境下移除console
发布环境下移除console npm install babel-plugin-transform-remove-console --save-dev babel.config.js文件里 // transform-remove-console:项目发布阶段 const prodPlugins = [] if(process.env.NODE_ENV === 'production'){ ...
2020-01-31 11:05:25
647
原创 NProgress进度条
NProgress进度条 第一步 npm install --save nprogress 第二步:main.js中引入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 第三步:使用 在axios.request中开始:NProgress.start() 在axios.response中结束:NProgress...
2020-01-30 11:04:51
229
原创 时间格式化
时间格式化方式一：自写过滤器方式二：date-fns插件 方式一：自写过滤器 Vue.filter('dateFormat',function(originVal){ const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2,'0') c...
2020-01-28 09:35:11
183
原创 FastClick移动设备延迟
FastClick移动设备延迟为什么？解决 为什么？ 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。 解决 npm install fastclick main.js文件中 import FastClick from 'fastclick' FastClick.attach(d...
2020-01-16 10:29:46
107
原创 postcss-px-to-viewport
移动端适配postcss-px-to-viewport安装根目录下新建postcss.config.js文件 安装 npm install postcss-px-to-viewport --save-dev 根目录下新建postcss.config.js文件 module.exports = { plugins: { autoprefixer: {}, "postcss-px-...
2020-01-16 10:23:16
837
原创 axios封装
axios需求:同时发送两个请求默认配置封装axiossrc/network/request.js 需求:同时发送两个请求 //axios.all([]) axios.all([axios({ url:'' }),axios({ url:'' })]).then(axios.spread((res1,res2) => { console.log(res1) })) 默认配置 axio...
2020-01-09 10:28:46
300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人