Vue Element
小小程序员——Tracy
你说 程序员是青春饭吗?
展开
-
Vue 响应式原理 defineProperty 监听对象属性的改变 观察者模式
不要认为数据发生改变,界面跟着更新是理所当然的。 Vue 背后做了很多的操作才实现了这个效果1.Vue 内部是如何监听的呢一个变量 message 数据的发生了改变呢?答: Object.defineProperty -> 监听对象属性的改变2.监听到了数据改变,Vue 又如何知道要通知哪些人来让界面发生刷新呢?既: 页面有三个 {{message}} {{message}} {{message}}, 它怎么知道要通知这三个地方呢?答: 利用“发布订阅者模式” Object原创 2021-12-03 10:07:58 · 385 阅读 · 0 评论 -
添加商品到购物车 Vuex
商品详情/购物车页面 code<template> <div class="home">购物车车 <button @click="addGood(1)">Add Good1</button> <button @click="addGood(2)">Add Good1</button> <button @click="addGood(3)">Add Good1</button> <ul原创 2021-11-01 14:17:27 · 583 阅读 · 0 评论 -
点击标题滚动到对应的 section, 滚动到对应的section 对应的标题高亮
<template> <div class="home"> <tab-control class="tab-control" ref="tabControl" :titles='["商品", "参数", "评论", "推荐"]' @tabClick="tabClick" /> <scroll class="scroll" ref="scroll" :probeType="3" :pullUpLoad="true" @scroll="handleScrol.原创 2021-11-01 14:23:49 · 336 阅读 · 0 评论 -
Vue 获取元素的 offsetTop 可能会遇到的坑
在哪里才能获取到正确的 offfsetTop? 1.created 肯定不行,压根通过 this.$refs 获取不到元素 2.mounted 也不行,数据还没有获取到 3.updated 也不行,获取到了数据 Dom 还没有渲染 4.$nextTick 也不行,因为 dom 渲染了但是图片还没有加载完毕 5.在图片都加载完毕后获取元素的 offsetTop, 这里注意防抖函数的应用普通 元素用的是 this.$refs.元...原创 2021-10-26 11:37:19 · 9387 阅读 · 1 评论 -
时间戳的格式化 filters:
数据库一般存的日期数据都是一个时间戳,很少存字符串html code: {{ good.time| showDate}}filters:{ showDate(value) { //1.先将时间戳转化为日期格式 const date = new Date (value*1000) ; //因为 new Date 中要传一个到毫秒的时间戳,而我们的时间戳是到秒,所以 * 1000 //2.将 date 进行格式化...原创 2021-10-11 11:20:42 · 183 阅读 · 0 评论 -
给子组件传递复杂数据
在 js 文件中定义类//Es6 写法export classPerson{constructor(data1,data2){this.name=data1.name;this.age=data2.age;}}//Es5 写法export functionPerson(data1,data2){this.name=data1.name;this.age=data2.age;}在父组件接受到数...原创 2021-10-09 17:23:01 · 73 阅读 · 0 评论 -
vue 返回上一页&跳转到其他页面
返回上一页this.$router.back();this.$router.go(-1);跳转到其他页this.$router.push('/home'); // html5 的 history 模式: pushStatethis.$router.replace('/home'); //返回不了上一页原创 2021-09-30 15:49:03 · 513 阅读 · 0 评论 -
让 Home 页面离开的时候保持原来的状态
思路1. 用 keep-alive 让页面不要销毁<keep-alive include="HomePage"> <router-view /></keep-alive>Tips:include 不设置的话,所有页面都不销毁,设置 include 是组件 name 为 “HomePage”的不销毁2.离开的时候保留一个位置信息3.进来时,将位置设置为原来保存的位置信息即可 注意,最好回来时betterscroll 设置下 r...原创 2021-09-30 15:43:52 · 120 阅读 · 0 评论 -
tab-control 吸顶效果
css 设置它是一个比较新的属性,所以不是所有浏览器都能实现position:sticky;top:40px; //必须设置 top 的位置来确定它滚动到距离上面是哪里才开始 stickyJS 设置思路1.必须知道滚动到多少时,开始有吸顶效果 看这个元素距离上边的距离是多少,用属性 offserTop 注意,这个属性值如果不准,是因为页面加载的时候图片是后加载的。这个值如果是在图片加载之前返回的就不准。需要先判断该元素上面的图片是否都加载完毕了,然后再开始计算这个值。...原创 2021-09-27 11:07:23 · 153 阅读 · 0 评论 -
查看大图:图片可以缩放,可以拖拽
<template> <!-- 该页面用于“查看大图”,只放一个图片;图片可以缩放,可以拖拽 encodeURIComponent("https://www.baidu.com/"); http://localhost:8080/showbigimg/参数 eg: http://localhost:8080/showbigimg/http%3A%2F%2Ft.sciencemate.com%2Fpublic%2Fupload%2Ffiles%2Fmeeting%2.原创 2021-09-24 14:34:56 · 318 阅读 · 0 评论 -
vue 修改 v-html 中元素的样式 style失效问题
用三个右箭头来搞定<style scoped> .content>>> .kxb-center span.kub-title{ /* vue 想改变 v-html 的东西就得这么写 */ margin-top: 20px; font-size: 18px; font-family: PingFangSC-Medium, PingFang SC; font-weight: bold; color: rgba(26, 26, 26, 1); text-a原创 2021-05-13 10:52:14 · 716 阅读 · 0 评论 -
tab 切换
<ul> <li v-for="(item, index) in movies" v-bind:class="{active: keyVal === index}" v-on:click="tabShift(index)"> {{item}}</li> </ul> <div v-show="keyVal == 0">tab 1 content </div> <div...原创 2021-04-02 15:29:49 · 53 阅读 · 0 评论 -
vue-fullpage.js 全屏滚动
全屏滚动安装npm i vue-fullpage.js引入import Vue from ‘vue’import VueFullPage from ‘vue-fullpage.js’Vue.use(VueFullPage);使用<div> <full-page ref="fullpage" :options="options" id="fullpage"> <div class="section"> First section转载 2021-05-29 09:23:59 · 349 阅读 · 0 评论 -
监听窗口变化
mounted() { window.onresize = () => { //监听窗口变化切换tab 显示方式 this.getClientWidth(); }; }, methods: { getClientWidth() { //获取浏览器可视区域宽度 this.clientWidth = `${document.documentElement.clientWidth}`; if (this.clien.原创 2021-05-30 11:08:46 · 439 阅读 · 0 评论 -
整屏垂直滚动
<template> <div class="fullPage" ref="fullPage"> <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle"> <div id="slide1" class="k原创 2021-05-30 13:23:59 · 82 阅读 · 0 评论 -
让图片必须是圆的
<div class="kxb-padding-content kxb-padding-top-0 kxb-padding-bottom-0 kxb-pointer kxb-textcolor-white" @click="toPerson(item)" :style="{'min-height':specialGuestsMbImageWidth + 'px'}" &g..原创 2021-06-03 16:11:12 · 46 阅读 · 0 评论 -
文字很多的横向滚动处理
思路如下:文字很多的话 ,计算下要显示的文字的长度,根据文字长度来计算滚动时间和滚动偏移的位置mounted 中设置://计算滚动文字的长度const animateTextlength = this.meeting.importantInfo.toString().replace('<span style="color:red;">', '').replace('</span>', '').trim().length;//因为文字的大小是 18px, 所以这里是.原创 2021-07-26 17:17:30 · 391 阅读 · 0 评论 -
二级分类,下拉展示更多
<template> <div :class="{ ['theme-' + activeIndex]: true }"> <div class="first-nav" :class="{ overflow: !firNavShowMore }"> <div class="first-nav-items"> <span class="btnborder" v-for="item in firstNavList"...原创 2021-06-03 13:29:40 · 337 阅读 · 0 评论 -
mobile masthead nav
navBar.vue/*mobile 的 nav bar 一般都是 44px 的高度*/<template> <div class="nav-bar"> <div class="left"> <slot name="left"></slot> </div> <div class="center"> <slot name="center"></slot> </.原创 2021-09-22 16:42:42 · 71 阅读 · 0 评论 -
components - tabbar mobile 底部导航
TabBar.vue<template> <div class="tab-bar"> <slot></slot> </div></template><script>export default { name: "TabBar",}</script><style scoped>.tab-bar { display: flex; /*让它一直处于底部 左右占满*/ p原创 2021-08-10 10:30:57 · 208 阅读 · 0 评论 -
Tab 默认样式覆盖处理
@media only screen and (min-width: 999px) { // 在 PC 端 tab 的显示方式做一些处理 .kxb-col-12-12 /deep/ .el-tabs--left .el-tabs__header.is-left { /** tab 宽度 */ width: 25%; min-width: 300px; } .kxb-col-12-12 /deep/ .el-tabs__item { text-align: l原创 2021-05-30 13:47:15 · 341 阅读 · 0 评论 -
Element Table Pagination 分页
ElementTable显示图片 <el-table-column label="PC 图片"> <template width="300" slot-scope="scope"> <img :src="scope.row.urlPc" class="avatar" /> </template> </el-table-column>原创 2021-05-18 10:16:49 · 119 阅读 · 0 评论 -
el-menu 导航菜单 item 过多的显示问题
aa原创 2021-03-31 17:37:01 · 5764 阅读 · 1 评论