yang_da_da的博客

用vue做了一个垂直滚动的日历，在这里记录一下实现(●’◡’●)效果

最近接到一个需求，需要一个客服悬浮按钮，可以拖拽并吸壁到页面周边，我们一起看看吧1.创建一个template，定义客服按钮，自定义v-drag指令<template> <div class="container"> <div class="btn" id="btn" :style="{ visibility: dialogVisible ? 'hidden' : 'visible' }" v-drag="{ set

1.两个div，一个outer，一个inner，inner设置absolute，滑动时改变inner的left值<div class="system-tabs"> <i class="el-icon-arrow-left" style="left: 13%" @click="arrowClick('pre')" ></i> <i class="el-icon-arr

参考官方API https://cn.vuejs.org/v2/api/#Vue-component创建baseComponents.js// 基础组件全局管理import ChooseModal from "_c/choose-modal";import Editor from "_c/editor";import GroupUpload from "_c/group-upload";import ICascader from "_c/i-cascader";import ICheck

项目菜单需要动态生成，vue文件是配置的，当文件不存在时，直接用import会报错终止程序，一番研究后发现可以特殊处理一下。component = () => { return new Promise((resolve, reject) => { var RemoteComponent = import ('@/view/' + menu.menuUrl + '.vue') RemoteComponent.then(res => {

基于iview的树选择器组件效果思路实现组件效果思路主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果实现模板部分trigger为custom，手动控制下拉框的显示，Input设为只读<Dropdown ref="dropdownRef" style="width:100%" trigger="c

1.main.vue引入iview Spin组件<Content class="content-wrapper"> <Spin fix v-show="loading"> <Icon type="ios-loading" size="18" class="spin-load"></Icon> <div>加载中...</div> </Spin> <keep-al

开发vue项目时，框架需要一个刷新按钮，手动刷新页面渲染，我们知道window.reload()，或者router.go(0)可以路由刷新，重新进入当前页面，但是这种方法的问题在于会导致页面白屏，用户体验不是很好。provide、inject方式我们在需要刷新的路由层级，<router-view>渲染的地方用v-if去控制页面刷新。在这里用App.vue举例<template> <div id="app"> <router-view v-if="

前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：image如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr

历时一周开发了一个简单的canvas实现的画板功能，这是在vue+elementui项目里开发的，支持画笔、橡皮擦、回退、清除、保存图片、切换颜色、设置宽度等。先看最终效果：1.我们先创建创建一个canvas元素<div class="canvas"> <canvas ref="canvas" id="canvas"></canvas></d...

目标vue项目中实现一个可拖拽的Table组件，并保存拖拽后的顺序安装Sortable$ npminstallsortablejs--save代码实现创建DragableTable.vue文件，定义template和props<template> <div> <Table ref="table" :columns...

主要还是用了v-model双向绑定的概念和render函数，遗憾的是自己不怎么会改step的样式和结构，所以不能自定义流程图的样子，以后再完善吧。效果是这样滴：主要的代码部分：&lt;Table&gt;是图1的表格，&lt;common-dialog&gt;定义了一个对话框，&lt;flow-chart&gt;定义了对话框的内容，也就是流程图啦 &lt;Table width="700" b...

前端小白捣腾了半天，官网的例子很精简但是对新手不友好啊，命名看的我云里雾里，自己简单改了一下1.App.vue&lt;template&gt; &lt;div&gt; &lt;child :propName="items"&gt; &lt;!--作用域插槽也可以具名！--&gt; &lt;li slot="slotName" slot-s

&lt;template&gt; &lt;div&gt; &lt;h1 v-text="title"&gt;&lt;/h1&gt; &lt;!--newItem为新加入的计划，将它与输入的文本双向绑定 回车时调用addNew方法！--&gt; &lt;input v-model="newItem" v-on:keyup.enter="a

1.静态传值（在父组件中赋值好props中属性的值传递给子组件）父组件&lt;template&gt; &lt;div&gt; &lt;input v-model="message"&gt; &lt;child message="hello"&gt;&lt;/child&gt; &lt;/div&gt;&lt;/template&g