什么是vue插件? 从功能上说，插件是为Vue添加全局功能的一种机制，比如给Vue添加一个全局组件，全局指令等； 从代码结构上说，插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数，还可以接收一个可选的参数，用于配置插件：var myplugin = { install:function(Vue, options){ ... } } 从意义上来说，正如jQuery的$.fn使jQuery有了一个庞大的生态一样，Vue的插件机制使Vue形成了一个生态系统，你可以...
本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：效果如见：1.html代码<!DOCTYPE html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js文本段落展开和收拢效果</title><script type="text/javascript" src="//www.gxlcms.com/ajaxjs/jquery-1.6.2.min.js"></script> </head> <body><div id="container"> <div id="wrap"><div><h1>这一段文字是可以折叠展开的，点击下面...
业务场景：在后台管理系统表格模块中，我们请求回来的数据类似性别等等，后台给我们返的不是男，或者女，而是给我们返回的是0和1，或者是A和B；但是怎么在表格中显示成男和女呢，这里就需要用到数据转换 formatter属性 具体代码如下： <el-table:data="tableData"highlight-current-rowstyle="width: 100%"><el-table-columnprop="name"label="姓名"><el-table-columnprop="authority":formatter="formatRole"label="角色"></el-ta...
因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处 搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种 flow-chart 代码写法繁琐，不是json就可以解决，效果也比较丑,PASS darge-d3 github :https://github.com/dagrejs/dagre-d3 效果图下载里面的demo,改一下json就可以了 // States var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", "CANCELED", "ABOLISHED" , "DELETED",...
在实现复制前，对之前的拖拽排序组件属性进行了修改。 摒弃了value中的content属性，拖拽组件暴露的render函数，利用这个属性进行组件内部子组件的渲染，这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。为了实现Data和model的脱藕，和sortKey一样，组件增加codeKey属性。拖拽复制的效果如下：由于实现组件的核心是根据value数据来渲染页面，因此实现拖拽复制功能，只需要在“拖拽释放”的时候，将被拖拽方的数据放到当前...
最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下代码如下:<el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: createAt, order: descending}" @sort-change="sortChange">如图所示,表格最前面有一个复选框 代码很简单<el-table-column type="selection" width="65"></el-table-column>删除按钮的代码如下:代码如下:<el-b...
因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。 进入正题，先看下效果图： 其实js做这个效果还是挺简单的，因为在css中我们可以设置一个元素的 position: fixed; ，这样它就可以固定在那里，这样不管页面怎么滚动，它的位置都不受影响，所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可...
前言这几天为了熟悉vue.js框架，还有webpack的使用，就准备搭建一个发布和浏览markdwon的简单WEB应用。原本是想着用bash脚本和busybox的httpd来作为后台服务，但是bash脚本解析和生成JSON非常不方便，而用Java语言写又觉得部署不方便，所以就想到了正在用到的Node.js，于是就有了这篇博文。（文末有本文代码的github地址） 简单例子首先，从搭建最简单的 Hello world 开始，建立以下目录、文件和内容。 建立项目及运行projectweb-s...
勾选 form.on(radio(yesHave), function (data) {$("input[name=hasPrepaidVoucher][title=有]").attr(checked,true);form.render(); });取消勾选 form.on(radio(noIssuer), function (data) {debugger;$("input[name=voucherIssuer]").removeAttr(checked);form.render(); }); 以上这篇layui中使用jquery控制radio选中事件的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
一.目标提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色；二.实现原理1.准备不同主题色的样式文件；2.将用户的选择记录在本地缓存中；3.每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可； 三.具体实现思路1.准备四个对应不同主题色的样式文件： 2.在主页给用户提供主题色选择的html：```<span...
layui的tab也默认是切换，不会刷新，想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true.以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
js实现： layui.use([table,form], function() { $ = layui.jquery; table = layui.table; tableIns = initTable(); }); //加载列表 function initTable(){ // 执行渲染 tableIns = table.render({ id: idTest, elem : #deviceTable, // 指定原始表格元素选择器（推荐id选择器） size: lg, height : full-20, // 容器高度 url : /csCloud-admin/deviceController/getDeviceList.do, where: { orgId:$("#orgId").val(), coldNum:$("...
在小程序中使用Echart图表 Echart UI构建（柱状图）Echart 假数据Echart 动态设置数据柱状图UI示例// Echart config，包括init data 和style及数据类型var option = {animation: false,//提高页面加载速度，关闭echart的动画grid: [//grid section UI...],xAxis: [//xAxis section UI...],yAxis: [//yAxis section UI...],series: [{//左侧坐标轴UI ...data: [100, 100, 100, 100, 100],},{//左侧柱状图 UI 及数据...data: [66, 54...
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。 以bootstrap-vue中的Alert组件为例，分一下几步进行： 1、定义一个vue文件实现对原组件的再次封装 main.vue <template><b...
在实现省市二级联动时，如果省份和城市写在一个数组对象中。可以根据，点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断 iView中的on-change事件 on-change事件：即选中的Option变化时触发，默认返回 value。（value在这里只支持String和Number类型）1、html部分<template><Form ref="formValidate" :model="formValidate" :rules="ruleValidate"><FormItem prop="province" label="省份"><Select v-model=...