- 博客(36)
- 收藏
- 关注
RSS订阅原创 评分以五颗星展示封装组件
评分以五颗星展示封装组件第一步接收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
187
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
1756
原创 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
5105
原创 商品详情页的子路由
商品详情页的子路由首页列表->详情页首页的子组件ShopsListItem.vue中showDetail(id) { this.$router.push({ path: '/detail', query: { id } })}问题：子路由跳转参数不会随之携带Detail.vue的mounted中就保存this.id = this.$rout...
2020-03-11 17:19:15
312
原创 better-scroll横向滚动，初始化宽度和请求数据之间
better-scroll横向滚动，初始化宽度和请求数据之间请求数据需要初始化的页面 mounted() { this.$store.dispatch('getGoodsList', () => { // this._initScorll() })}vuex中const actions = { // 1.获取了goodsList,同时赋值了goo...
2020-03-08 17:33:25
316
原创 vue-cli4中定义scss常量
vue-cli4中定义scss常量第一步：/src/assets/css/config.scss$green: #02a774;第二步：Yes/选择scssvue add style-resources-loader第四步：vue.config.js文件const path = require("path");module.exports = { pluginOptions: {...
2020-02-24 14:03:42
1507
原创 双飞翼布局(先加载中间，左右宽度为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
170
原创 抖动和节流
抖动和节流<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
177
原创 微信小程序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
259
原创 登录-后台管理系统
后台管理系统登录流程输入账号和密码，点击登录按钮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
8141
原创 登录-微信小程序
登录流程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
121
原创 微信小程序中组件的传值
微信小程序中组件的传值组件与页面之间的样式隔离Component({ options: { //isolated:默认值隔离 //apply-shared:页面影响组件 //shared:相互影响 styleIsolation: "isolated" }})页面向组件传值// 页面向组件传值Component({ properties: { t...
2020-02-15 10:33:17
540
原创 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
245
原创 git tag命令
git tag命令git add .git commit -m "提交文字"git tag 01_知识点：打taggit tag：查看tag命令git reset --hard "复制的值"：回退git push --tags：push到github中
2020-02-13 11:08:59
92
原创 组件中图片加载完成，执行$emit
组件中图片加载完成，执行$emitwatch: { //detailInfo是props传过来的值 detailInfo() { //imagesLength统计图片的数量 this.imagesLength = this.detailInfo.detailImage[0].list.length; }}@load="imgLoad"imgLoad(...
2020-02-07 10:21:51
105
原创 富文本vue-quill-editor
富文本vue-quill-editornpm install vue-quill-editor --savemain.js中import VueQuillEditor from 'vue-quill-editor'// require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'...
2020-02-06 14:41:32
90
原创 表格数TreeTable
表格数TreeTablenpm i vue-table-with-tree-grid -Smain.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
208
原创 iconfont的使用
iconfont的使用Font class下载至本地取五个文件iconfont.cssiconfont.eoticonfont.svgiconfont.ttficonfont.woffsrc/assets/iconmain.js中引入import './assets/icon/iconfont.css'
2020-02-05 15:06:32
148
原创 swiper
swipernpm install vue-awesome-swiper --savemain.js中import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSw...
2020-02-05 13:49:21
86
原创 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
73
原创 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
76
原创 分支命令
分支命令创建git checkout -b order推送分支到githubgit push -u origin order代码提交git statusgit add .git commit -m "文字描述"git push合并分支到mastergit checkout mastergit merge ordergit push...
2020-02-04 13:21:32
149
原创 滚动到一定位置,导航条固定
滚动到一定位置,导航条固定两个tab-control<tab-control class="home-tab-control" @tabClick="tabClick" :tabList="['流行', '新款', '精选']" ref="tabControl1" v-show="isTabFixed" /><tab...
2020-02-04 12:32:27
551
原创 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
65
原创 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
152
原创 项目优化策略vue.config.js
项目优化策略为开发模式与发布模式指定不同的打包入口src/main-dev.jssrc/main-prod.jsvue.config.js文件里面module.exports = { //chainWebpack链式编程 //configureWebpack操作对象编程 chainWebpack: config => { // 发布模式 ...
2020-01-31 16:16:49
191
原创 发布环境下移除console
发布环境下移除consolenpm install babel-plugin-transform-remove-console --save-devbabel.config.js文件里// transform-remove-console:项目发布阶段const prodPlugins = []if(process.env.NODE_ENV === 'production'){ ...
2020-01-31 11:05:25
526
原创 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
172
原创 时间格式化
时间格式化方式一：自写过滤器方式二：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
116
原创 FastClick移动设备延迟
FastClick移动设备延迟为什么？解决为什么？移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。解决npm install fastclickmain.js文件中import FastClick from 'fastclick'FastClick.attach(d...
2020-01-16 10:29:46
57
原创 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
733
原创 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
198
原创 url更新不刷新页面的两种方式
路由两种方式：location.hash和history.pushState更改地址不刷新页面方式一(hash模式)location.hash = 'a' ==>https://www.baidu.com/#a方式二(history模式)history.pushState({},'','home')==>https://www.baidu.com/home更改地址不刷新页面方式一(...
2020-01-06 16:35:30
862
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人