随笔分类 - vue
摘要：话不多说先看效果： 设计思路： 罐是做了三个位置（中=>左，左=>右，右=>中）的动画效果，每个罐轮流使用一次，来实现旋转的效果。 中间的光亮做了个变形延迟。 罐的透明效果是使用了三层，即最底层是粒子不透明图片，中层是液体组件，最上层是罐体png图片。都是用了绝对定位，请务必设置好位置。 液体组件中
阅读全文
摘要：效果：左右窗口移动到隐藏后，旁边的小窗口会随着移动贴边。 知识点：兄弟组件通信 1.新建Bus.js文件 Bus.js内容： import Vue from 'vue'; export default new Vue(); 2.引入文件 import Bus from "@/common/js/Bu
阅读全文
摘要：右键可以新增、编辑和删除节点、连线。点击保存可输出节点列表与连线列表，传给后台直接保存。 显示的时候， 用到组件：vue-super-flow 下载：npm install vue-super-flow 局部使用： <template> <super-flow></super-flow></temp
阅读全文
摘要：表格的每行都是可以随意拖动，任意排序的。 下载一个拖动的插件：sortable.js 下载： $ npm install sortablejs --save 引用：import Sortable from 'sortablejs'; 代码： <!-- 一定要绑定row-key --> <el-tab
阅读全文
摘要：图片下载 down() { // 保存二维码 var oQrcode = document.querySelectorAll('.h5 img') var url = oQrcode[0].src this.downloadIamge(url, '二维码') }, downloadIamge (im
阅读全文
摘要：动画：先放大 再消失 <template> <div class="app"> <div> <button @click="show = !show">切换</button> </div> <!-- 插入DOM元素和移除dom元素动画同时进行 --> <transition name="h1"> <
阅读全文
摘要：首先放上一张vue兼容性的图 vue项目于IE浏览器的兼容性问题(针对promise问题) 一，VUE项目一般会使用axios，而axios又是基于promise的，所以，IE任何版本都不支持（trident内核的全不行） 解决方案一： /*ie兼容 Promise*/ isIE(); functi
阅读全文
摘要：css中postcss的插件Autoprefixer是什么？ Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。 优点： （1）、写纯净的css，不必学习特殊语言（如Sass），也不必记住其使用环境；（2）、与最新的规则同步； 使用： npm in
阅读全文
摘要：链接分享： https://www.jianshu.com/p/93510591290b
阅读全文
摘要：父组件中使用： <file :kindId="kindId" @refresh="refresh"></file> import file from './components/file.vue'; components: { file }, data() { return { kindId: nu
阅读全文
摘要：vue2的防抖处理(自定义指令) 在utils/index.js 文件中 // 防抖 立即执行 function debounce(fn, arg) { // delay = delay || 1000; let delay = 1000; let timeout; return function(
阅读全文
摘要：<span :style="{ color: setStatusColor(scope.row.status) }"> {{setStatusCN(scope.row.status) }} </span> computed: { setStatusColor() { return function
阅读全文
摘要：class： <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> <div v-bind:class="[isActive ? 'activeClass' : '', 'errorClass']"></di
阅读全文
摘要：只能输入数字 并保留小数点后两位： <el-input maxlength="20" onkeyup="value=value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"></el-input> 1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式： <e
阅读全文
摘要：watch: { // 方式一： 'cityName.name': { handler(newName, oldName) { // ... }, deep: true, immediate: true //立即执行 } //方式二： cityName(newName, oldName){ // .
阅读全文
