随笔分类 - Vue
vue
摘要：父组件： <row-base investor="index.yearLoss" number="68" per-title="index.tenMillion" ></row-base> 子组件： <template> <div> <div class="row_left row_base"> <
阅读全文
摘要：参考： https://www.jianshu.com/p/0ceef28f99f2 实现效果： 实现步骤： 1、vuex中menu.js minLeftMenuWidth: 35, // 折叠时左侧菜单的宽度 maxLeftMenuWidth: 180, // 展开时左侧菜单的宽度 const t
阅读全文
摘要：参考： https://www.jianshu.com/p/4b96919e3622 https://blog.csdn.net/joyce_lcy/article/details/78840371（内容全） 一：使用i18n 1、在src目录下建立文件夹：lang 2、en.js： const z
阅读全文
摘要：参考： 实现用户登录及token验证： https://blog.csdn.net/qzcrystal/article/details/106884810 https://www.cnblogs.com/tt-ff/p/11736463.html NProgress使用参考： https://blo
阅读全文
摘要：实现原理 1. 可以在vuex中维护一个isLoading 的变量 2. 在 router.beforeEach 钩子中 设置 isLoading = true , 在 router.afterEach 中 设置 isLoading = false Vuex： actions.js： export
阅读全文
摘要：DOM：input <el-input @click.native="onClickInput" @input="onInput" @keypress.native.enter="onEnterPress" placeholder="搜索" prefix-icon="el-icon-search"
阅读全文
摘要：在学习网易云音乐项目的时候，有一个历史搜索记录的功能， 就是你点击的关键词被记录下来，然后显示在搜索历史记录里； 主要实现方法： 项目中使用的是 'good-storage' : https://www.npmjs.com/package/good-storage 1、npm i good-stor
阅读全文
摘要：https://blog.csdn.net/edc3001/article/details/86833558 可以参考
阅读全文
摘要：官网链接：https://cn.vuejs.org/v2/guide/components-slots.html 项目中具名插槽使用的较多。 封装的通用提示组件，如： 上图截的是注销提示，有的时候不同的情况下提示组件的提示内容不一样，这就要根据具体情况更改 组件中的text内容： 首先父组件使用Pr
阅读全文
摘要：效果图： DOM部分： 子组件，也就是封装的Dialog.vue DOM部分： <template> <transition name="fade"> <div class="dialog-wrap" v-show="showMask"> <div class="dialog-mask"></div
阅读全文
摘要：https://www.cnblogs.com/jiayeyuan/p/10595215.html
阅读全文
摘要：父组件： DOM部分 <el-table-column prop="img" :label="label" width="180"> <template slot-scope="scope"> <div class="img-wrap"> <img v-lazy="scope.row.album.p
阅读全文
摘要：实现点击分页器，平滑到对应的dom组件 主要用到的方法：Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoV
阅读全文
摘要：外面的盒子div包裹着里面的图片； 通常情况下，会给外面的盒子一个padding-top: 100%， 相当于占位符，当图片还没有加载出来的时候，占住位置，防止白屏 <div class="img-wrap"> <img :src="img" alt /> </div> .img-wrap { po
阅读全文
摘要：<PlayListCard class="card-item" v-for="item in playlists" :key="item.id" :id="item.id" :img="item.coverImgUrl" :name="item.name" :desc="`播放量：${item.pl
阅读全文
摘要：https://www.jianshu.com/p/8350b611e5bb
阅读全文
摘要：DOM部分： <el-dialog title="登录" :visible.sync="loginDialogVisible" width="30%"> <!-- 登录方式 --> <div class="login-type"> <div v-for="item in loginType" :ke
阅读全文
摘要：cli-4的脚手架配置 因为组件的引用，经常会遇到import * from '../../../components/common/***.vue‘这样的引入格式，太复杂了，所以可以在vue里面配置路径别名 首先在最外层，和package.json同级目录里面新建一个vue.config.js作为
阅读全文
摘要：实现效果： 代码：第一张图的效果 <transition name="fold"> <div class="shopcart-list" v-show="listShow"> <div class="list-header"> <h1>购物车</h1> <span>清空</span> </div>
阅读全文
摘要：为了实现过渡的效果，如图： 主要用到Vue 的 transition: DOM结构部分： <transition name="fade"> <div class="detail" v-show="showDetail" @click="closeDetail"></div> </transition
阅读全文
浙公网安备 33010602011771号