Harrietjia的博客

效果gif：主要数据结构：规格项：goodsSpecs: [ { attr:"颜色", valueList:[{"title": "红"},{"title": "黄"}]}, { attr:"尺寸", valueList:[{"title": "大"},{"title": "中"},{"title": "小"}] }]table表格头默认的数据：tableHeaderList: ['stock', 'withhold_stock', 'market_pric.

实现方法步骤：1. 下载babel-polyfill以及es6-promisecnpm install --savebabel-polyfilles6-promise2.在main.js顶部进行引入import'babel-polyfill'importpromisefrom'es6-promise'promise.polyfill()3.为防止vue-router在ie中不起作用添加一下代码(可以不写）newVue({router,s...

created() { if (window.Notification) { // 浏览器通知--window.Notification if (Notification.permission == "granted") { console.log("允许通知") }else if( Notification.permission != "denied"){ console.log("需要通知权限") .

服务器端server 和 客户端client服务端渲染主要使用vue-server-renderer插件https://www.cnblogs.com/aliwa/p/8505284.html通过vue-cli3构建一个SSR应用程序https://juejin.cn/post/6844903678646681607#heading-9vue项目迁移nuxthttps://zhuanlan.zhihu.com/p/55129840...

主要使用了vuedraggable插件和element-ui库每个组件通过按需引入的方式引入到装修页面安装依赖要使用npm 不然会报错 npm run dev运行后打开http://localhost:3001/#/design文件结构分析附上GitHub的demo地址：https://github.com/harrietjia/vue-page-design 可以通过代码进一步分析 有帮助的请帮忙点下star...

<div class="fixed-box" > <img class="rotate" :class="[{'r1': shrinkPacket}, {'r2': !shrinkPacket}]" src="../../../assets/images/consume_packet.png"/> </div>.fixed-box { position: fixed; left: 5px; bottom: 6rem; width.

最后的效果是这样的 ，关于PDF文件显示就交给后端了，因为这个项目需要显示电子章和后端生成的文字所以直接后端生成图片更省事。首先第一个坑直接引入hammer.js手势没触发要用npm安装"vue2-hammer": "^2.1.2"关于手势启用的方法 一定要放在mounted里而且PDF图片要已经返回，这里主要监听pan(移动)和pinch（缩放）// 启动缩放功能 setPinch() { let that = this; let oldSca..

TextWidthChange(e) { let odivParent = e.currentTarget.parentNode; //获取目标父元素 let dx= e.clientX;//当你第一次单击的时候，存储x轴的坐标。 let dw= odivParent.offsetWidth;//存储默认的div的宽度。 docum...

PDFhttps://www.jianshu.com/p/94cf6ddcb299https://segmentfault.com/a/1190000016963084

方法change （改变页面）tap （点击）turning （正在翻页）prev （前一页）next （后一页）翻到指定页面：handleSwitchManual(index) { if (index === this.currentIndex) return; this.$refs["turn"].toPage(index); t...

方法select （选择日期）monthChanged （滑动移动月份）传入参数： options: { type: Object, default: function() { return { header_bg_color: "#ffffff", //头部颜色 header_font_color: "#ffa300"...

// app.vuewatch: {$route: {immediate: true,deep: true,handler(to) {// 微信浏览器判断const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger')// 解...

1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面:router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权...

项目要求多语言 最好是可以根据后台配置的显示首先是安装npm install vue-i18n -S当然也可以这样：<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>然后需要在main.js中引入文件1、添加locales文件夹新建一个locales文件夹，存放...

<div class="video-list"> <ul ref="newArray1" class="zq-waterfall-left"> <li @click="toVideo(item)" v-for="item in newArray1"> <img class="vide...

vue+Swiper模仿抖音页面播放开发需求又来了 要模仿抖音做视频播放还要上下滑动。 找了下资料Swiper可以。先上效果图，1是播放 2是暂停 3是滑动中原理主要是通过position:absolute 控制层级z-index来控制视频的播放，全局的video标签只有一个。上代码：<template> <div class="wrap">...

第一种方法、在main.js里面，此时模式mode要为 history，页面需要设置<keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> 做缓存const router = new VueRouter({ mode: 'hi...

vue的微信语音功能，录音+对接口返回amr音频播放最近的新项目需要调用微信的录音功能，但是后台又不给音频转码，无奈之下就踏上了研究前端音频编码器这东西。...

一直用vue-cli创建项目，差点把原生引入vue的写法忘了，刚好项目有个需求就来做个小练习。首先要先把富文本tinymce-4.7.5的js下载回来。tinyMCE下载地址:https://www.tiny.cloud/get-tiny/self-hosted/其中tinyMCE默认为英文，如需中文需要下载语言扩展包，下载地址：https://www.tiny.cloud/get-t...

&lt;template&gt; &lt;div&gt; &lt;!--container--&gt; &lt;div id="map" style="width:100%; height:100%"&gt; &lt;div class="m-t-10" style="width:100%; height:3rem"&a

# webapp vue2.x仿饿了么app项目总结  项目地址：https://github.com/harrietjia/vue2-webapp.git如果觉得有帮助，希望可以在右上角给我个star支持一下，谢谢！部分截图：## 实现功能：```• Goods、Ratings、Seller组件视图均可上下滚动• 商品页 点击左侧menu，右侧list对应跳转到相应位置• 点击list查看商品详...

原生 js使用 getElementById 比较麻烦的地方需要为元素设置 id设置 id 之后，无法复用，因为一个页面中不能存在两个相同的 id双向绑定 v-model分两种情况input 默认为空。这种情况使用 v-model 最方便，通过 this.inputName 即可获取到对应的值。input 有默认值。即，设置了 value 属性的 Input。这种情况不能使用 v-model。否则...

前言　　在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数，子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改变时，就要通过自身告诉父组件我的值发生改变了，然后父组件在通知其他两个购物车组件值发生改变...

我对solt的理解是当组件中某一项需要单独定义，那么就应该使用solt。 举例说明。例如项目中需要一个模态框提示 付款成功，付款失败。那么这个模态框也就仅仅差这几个字或者是状态图片而已。那么此时应用solt就是一个非常不错的选择。单个slot　　除非子组件模板包含至少一个 &lt;slot&gt; 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将...

记录下思路：先在HTML中用v-on:input ="inputFunc" 来监听input框value内容的变化，如果内容更新会调用inputFunc函数~~js：在watch中监听绑定的关键字的变化，当关键字变化的时候请求接口，然后根据返回的数据重新渲染参考：https://www.cnblogs.com/sunshinedream/p/9003811.html...

前言：    在Vue中引用外部SCSS(SCSS里面使用了图片)时，loader报错：* ../images/xxx.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped...

我这里总结了下实现tab功能的3个思路，仅供参考。1. 切换content或者直接切换内容这种思路下，我们首先把结构搭建起来，然后用一个变量selected表示tab当前展示的位置，给li标签添加mouseenter或click事件，将当前的index传递进去： html代码:&lt;div class="hd"&gt; &lt;ul class="clearfix"&gt; ...

1、引入第三方js文件，npm安装不了2、在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=&gt;{ var cd = new Date(); var lunar = calendarNU.solar2lunar();//此处是引用插件方法 this.time =...

认识插件想要开发插件，先要认识一个插件是什么样子的。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-c...

Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。 1. 数据绑定vue 指令以 v- 前缀标示，数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下：&...

转载自： https://www.cnblogs.com/rlann/p/7457601.html需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:&lt;template&gt; &lt;div class="accept-container"&gt; &lt;div class="go-back" v-show="goBackState" @click...

1）利用oninput属性来触发搜素功能　　2）利用RegExp来对字符串来全局匹配关键字，利用replace方法来对匹配的关键字进行嵌入高亮的&lt;span class="gaoliang"&gt;标签，最后利用v-html来嵌入html标签来达到关键字高亮显示代码　　1）HTML  搜索框部分绑定input事件（搜索框独立出来，作为一个基础组件（叫SearchToolbar.vue），嵌入到...

&lt;template&gt; &lt;div&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt; export default { data() { return { websock: null, } },...

router.jsroutes: [{            path: '/',            name: 'HelloWorld',            component: HelloWorld,            meta: {                title: "HelloWorld",    要现实的title                sh...

父子组件的生命周期顺序我们先用vue-cli搭建一个项目。（用什么搭建并不重要，我这里为了快速模拟就偷懒不自己配置webpack了） 父组件: app.vue&lt;template&gt; &lt;div id="app"&gt; &lt;hello&gt;&lt;/hello&gt; &lt;/div&gt;&lt;/template&gt;&lt

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  =&gt; home 内容， about按钮 =&gt; about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home ...