vue
莱米code
这个作者很懒,什么都没留下…
展开
-
swiper 组件实现 滑动到最后一个 slide 后,再次滑动触发跳转事件
该代码只测试了移动端 其他端原理应该相同技术栈swiper 6.xvue 2.xts思路借助 swiper 提供的 touch 事件当用户按下屏幕时,通过 touchStart 记录起始的位置通过 touchMove 不断更新坐标点,并判定是否到达可执行操作的临界点用户松手触发 touchEnd 事件,在这里面通过(方向,是否是最后一个,是否到达临界点)这些条件判断是否执行用户代码段核心代码 /** * 是否到最后一个 slide 了 */ isEnd: .原创 2021-07-06 20:07:18 · 3947 阅读 · 1 评论 -
Vue did you register the component correctly? For recursive components,make sure to provide the name
问题截图组件嵌套App MyComponent ADifferentComponent MyComponent问题原因这里的问题是,MyComponent既是它自己的父组件,又是它自己的子组件。这将使Vue陷入一个循环,每个组件都依赖于另一个组件。解决方案 components:{ 'feed-item': ()=> import('./FeedItem.vue') }参考地址https://stackoverflow.com/question原创 2020-12-02 18:09:32 · 324 阅读 · 0 评论 -
vue - symbol方式引入阿里巴巴字体库
官方链接找到想要使用的图标,添加入库添加到自己的项目(提前建好)进入项目5. 我的是vue项目,在 public - index.html 中添加复制的地址6. 在 App.vue 的 style 中写入样式.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}使用 并设置自己的样式原创 2020-08-22 22:47:39 · 663 阅读 · 1 评论 -
200行代码实现简易的 mvvm - vue
第一个知识点 - Object.defineProperty()说明: 直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。备注: 应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。在这里我们需要了解 get 和 set 方法const data = {}let value = ''Object.defineProperty(this.data, "msg", { get(){ /原创 2020-07-17 16:04:40 · 289 阅读 · 0 评论 -
vue h5 video 多视频无缝切换
思路页面中创建两个 video 标签在组件加载时同时加载两个视频资源(autoplay),暂时不播放的视频在 canplay 事件中调用暂停方法,使之实现预加载使用绝对定位将预加载的视频移出可视窗口第一个视频结束后,通过 ended 事件播放之前预加载的视频,同时将当前 src 切换为下一个需要播放的视频地址,完成缓存核心代码 <video ref="video" :class="{'video-hide':!playVideoTag}" autoplay @ended="onE原创 2020-06-17 20:23:13 · 5640 阅读 · 5 评论 -
vue router 路由跳转获取不到参数
问题:路由传参一直不能获取到参数, 未出现报错原因:混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 方法代码:错误写法 ... this.$router.push({ path: '/HealthDetectionChildNav', params: { title: item['name'], actionList: item['actionList'] }原创 2020-06-13 14:29:26 · 5204 阅读 · 5 评论 -
.eslintrc.js
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true }, extends: ['plugin:vue/rec...原创 2019-12-03 18:38:48 · 298 阅读 · 0 评论 -
新建vue项目流程
安装全局脚手架 npm install vue-cli -g创建模板 vue init webpack APIShow对工程设置运行 cd APIShow npm run dev原创 2019-12-01 21:42:30 · 107 阅读 · 0 评论 -
Vue 中的 v-bind 说明
最近在学习Vue, v-bind一直搞不懂,感觉属性绑定这个概念很模糊,通过以下例子解释v-bind.这是未加v-bind示例<input type="button" value="按钮" title="msg" id="app"><script> let app = new Vue({ el: '#app', data: ...原创 2019-08-14 20:21:17 · 456 阅读 · 0 评论