最近搭建了公司的后台管理系统， 而且系统还比较庞大， 要实现以下几点： 菜单权限， 根据不同权限显示不同的菜单操作权限， 比如有些账号没有新增权限， 有些没有修改或者删除权限数据权限， 比如统计概况， 普通管理员不能看到公司营业概况，但能看到自己所属区域的概况显示权限， 比如列表， 运营能看到那一列的签约金额，但市场不能看到签约金额这一列到目前为止还在构建中， 已经解决菜单权限和操作权限。菜单权限： 最开始的...
说明做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。 控件演示github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！控件使用概要 基于element-ui树形控件的二次封装提供编...
最近一直在研究使用vue做出来一些东西，但都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，所以这篇我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。 这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page 准备工作 在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。 这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加...
本文介绍了vue 粒子特效的示例代码，分享给大家，具体如下：实现效果：没错，你看到的上图那些类似于星座图的点和线，是由vue-particles生成的，而且能与用户鼠标事件产生互动。 传送门：vue-particles 使用教程npm install vue-particles --save-dev main.js文件： import Vue from vue import VueParticles from vue-particles Vue.use(VueParticles) App.vue 文件——一个简单的例子： <template> <div id="app"><vue-particl...
前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。 不同以往的IFRAME标签，那种方式比较Low，另外有其他的一些BUG。本文思路是把HTML请求以来，以v-html的形式加载到页面内部。注册全局组件【v-html-panel】 1.HtmlPanel.vue文件 <template><div><mu-circular-progress :size="40" v-if="lo...
1、父组件引入子组件，子组件的加载问题products.vue引入dlAddProd弹框（dlAddProd.vue），由于<div v-show="visible">，所以在products页面加载时，dlAddProd会被加载。但是el-dialog中的body部分不会被加载（不管有没有加v-if指令）；dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框，但此时只有dlBlankAdd会被加载，dlEditProd不会被加载（<div v-if="visible">）；2、注意的地方由于element-UI的弹框组件el-dialog在其...
在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。 下面是代码片段： <div class="fav-fold-panel" v-if="!typeChange" draggable="true" @dragstart="drag($event)"@dragover="allowDrop($event)"><!-- 面板内容 --><div class="favTitle-card" :data="favPanelAllData" v-if="foldDone"><favPanel v-for...
本文介绍了vue父子组件的嵌套的示例代码，分享给大家，具体如下：组件的注册： 先创建一个构造器var myComponent = Vue.extend({template: ... })用Vue.component注册，将构造器用作组件(例为全局组件)Vue.component(my-component , myComponent)注册局部组件： var Child = Vue.extend({ /* ... */ })var Parent = Vue.extend({template: ...,components: {// <my-component> 只能用在父组件模板内my-component: Child} })注册语法...
Vue中组件的作用域是隔离的，父组件中的数值子组件看不到！也就是说，用angular作比喻，组件的scope天生是scope:()的！ 如果父组件需要往子组件中传数据，此时应该使用标签属性： <div id="app"><my-compo c="886"></my-compo> </div>子组件中，用props声明这个值即可。并且在template里面可以直接使用{{c}}来获得这个属性，而不需要写为{{this.props.c}} import Vue from "vue";const MyCompo = Vue.extend({template : `<div><h1...
需求 只能输入数字输入字母和特殊字符自动过滤掉输入完成失焦自动加.00 如果输入了小数自动四舍五入为22.22类似这样格式效果图可以使用在普通js和angular里面，vue 直接调用 先上调用的函数 /*** User: sheyude* Date: 2017/9/4 0004* Time: 上午 10:51**/ let number = {twoWay: true,bind:function (el) {el.addEventListener(blur,function () {// let value = formatNumber(el.value,2,0)let value(function(){value = formatN...
如今laravel来到5.4版本，更方便引入vue了，具体步骤如下：1.下载laravel5.4,这边是下载地址（里面的配置文件都写得差不多了）！2.打开package.json内容如下 { "private": true, "scripts": { "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "node node_modul...
用Vue/React这类双向绑定框架做后台系统再适合不过，后台系统相比普通前端项目除了数据交互更频繁以外，还有一个特别的需求就是对用户的权限控制，那么如何在一个Vue应用中实现权限控制呢？下面是我的一点经验。 权限控制是什么 在权限的世界里服务端提供的一切都是资源，资源可以由请求方法+请求地址来描述，权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源。具体的说，前端对资源的访问通常是由...
一、下载bootstrap-datetimepicker时间选择器js，css文件。 1. github地址:bootstrap-datetimepicker 2. 官方网站地址:官网bootstrap-datetimepicker地址，有具体的例子与解释 二、在vue项目文件中引入 import ./assets/css/bootstrap.min.css import "./assets/css/bootstrap-datetimepicker.min.css" import ./assets/js/bootstrap.min import ./assets/js/bootstrap-datetimepicker.min.js三、具体代码如下： <template> <div c...
0x00 前言 VueJS 社区里面关于富文本编辑器的集成也不少了，但是之前小调研了一下，基本上就是 quill,medium-editor，因为之前用 AngularJS 用过 medium-editor，并且需要自定义某些按钮，而且最好还是选中弹出式的，所以就决定用 medium-editor。 社区里面 star 较多的就是这个了：vue-medium-editor，但是打开它官网，看了看文档，越看越别扭，来看看它用法： <!-- index.html --> <medium-editor :text=myText :options=options...
一.绑定Class属性。 绑定数据用v-bind:命令，简写成: 语法：<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数， 这里，{active: isActive}是对象参数，active是class名,isActive是一个布尔值。下面是一个例子： 绑定对象字面量 html： <div id="classBind"><span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">状态:{{alert}}{{isSafe}}</span> <...