elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <div><el-radio-group v-model="radioSex" @change="changeHandler"><el-radio class="radio" label="man">男</el-radio><el-radio class="radio" label="woman">女</el-radio> </el-radio-group> </div> export default {name: Radio,data () {return {radioSex: man}},methods: {changeHandler(value) {console.log(改变之后的值是: +...
最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？ 试了试 Vue 的 transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。 最终效果 某列的数据由 X 位置上升到 Y 位置的过渡效果技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点，哈哈哈 实现方式 这个过渡效果一共由三部分组成： 在 Y行 位置插入 X行 位置的数据，添加一个高度展开效果，...
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图二、组件要实现的功能 1. 如果有传入坐标点，则定位到坐标点 2. 如果没有传入坐标点，则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后，右侧要显示拖动后的经纬度和地址 6. 点击确定按钮，返回最后的坐标点和地名给父组件 三、 组件实现具体代码<t...
页面权限控制 页面权限控制是什么意思呢？ 就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 Vue 动态添加路由及生成菜单 这是我写过的一篇文章， 通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。 另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就让访...
一、前言 vuejs中的事件绑定，使用<v-on:事件名 = 函数名>来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。 二、事件绑定方式 1、 直接在标签中写js方法 <button v-on:click="alert（'hi'）">执行方法的第一种写法</button> 2、调用method的办法 <button v-on:click="run()">执行方法的第一种写法</button><button @click="run()">执行方法的 简写 写法</button> export default { d...
前言 在深入了解Vue动态创建Component前先了解一下常规组件声明形式。Vue 的组件通常可以通过两种方式来声明，一种是通过 Vue.component，另外一种则是 Single File Components（SFC） 单文件组件 。常规组件声明与注册// 定义一个名为 button-counter 全局注册的组件 Vue.component("button-counter", {template: <button v-on:click="count++">You clicked me {{ count }} times.</button>,data() {return {count: 0}} });new Vu...
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 先看下官网描述，如下图 observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个...
由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。 这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。 所以理论上有2种方法解决： 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞，而且没啥资料，放弃。2 的话比较可行。 部分禁止 pjax 打开 publi...
录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js 1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserM...
过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方： 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper"></div>过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载...
在vue1.x版本里是自带里几个基础的过滤器的（虽然不怎么用到）。 到了vue2.x版本之后，内置到几个过滤器就被删掉了，如果需要用到过滤器，就要开发者自己去定义。 可以把过滤器定义在某个组件内部，但这样就成了局部过滤器，在别的组件里是无法使用的。所以通常不会这么做。 也可以把过滤器写在main.js里。但如果项目中存在多个过滤器，这会使main.js文件看上去很庞大，不便于后期维护。 所以通常会新建一个js文件，专门用来存放所...
滚动固定位置有多种方法 1 css3 粘性定位 position:sticky； top:20px；2直接position：fixed；给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式 滚动监听事件中使用this.$refs.xxx.style.color=‘xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所以通过动态绑定来解决。 具体： ** html绑定<p class="ptop1" :style="pstyle"><i...
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。 is 预期：string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作。 示例： <!-- 当 `currentView` 改变时，组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于is的定义和用法 至于用在tab切换中，大概就是： <template><div><div>#动...
本文实例为大家分享了Vue实现表格批量审核功能的具体代码，供大家参考，具体内容如下 1 前端部分 效果如下图所示：1.1 html部分<el-form-item><el-button type="success" icon="el-icon-search" @click="auditServer()" :disabled="this.sels.length === 0">批量审核</el-button><el-button @click="toggleSelection()">取消选择</el-button></el-form-item></br><el-table border :fit="true" ref="multipleTable" height="520" :...
一、介绍 简介：在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。 图片介绍： 1、在用户选择单选或多选时会有A,B,C,D,E五个选项2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）问题引入：当用户选择不同的题库时会产生不同的form表单选项，这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断，这个时候就需要两个rules...