Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数 示例：子组件 byMount.vue <template><div><div>mount content test!!</div></div> </template> <script > import Vue from Vue;export default {name: bycount,data () {return { }}, methods:{},} </script>父组件：<div class="dy...
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:<!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"><el-table-column type="index" label="序号" width="70"></el-table-column><el-table-column prop="status" label="状态"></el-table-column><el-table-c...
最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。 产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果 <video-playerclass="vjs-custom-skin"ref="videoPlayer1":options="playerOptions":playsinline="true":events="events"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@loadeddata="o...
代码实例： 代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <Col span="2" style="text-align: center;">...
1.静态效果图Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮 2.代码 <template><div id="app"><div class="icon-add-50" :style="iconstyle" @click=click @touchmove=touchmove @touchstart=touchstart(this,$event) @touchend=touchend></div></div> </template> <script> export default {name: App,data(){return{/*--------图标样式变量--------------*/iconrotate:45,//旋转degicontranslateX:100,//沿x轴...
前言 本文主要介绍的是vue.js提交按钮时进行简单的if判断表达式的相关内容，分享出来供大家参考学习，是一个简单的业务需求，下面话不多说了，看图说话 1：当充值金额没有填写的时候，会有Toast小弹框提示“请输入有效的充值金额”if (!this.money){console.log(money,money);Toast({message: 请输入有效的充值金额,duration: 2000});}2：当第二个框实收金额没有填写的时候，会有Toast小弹框提示“请输入有效的实付金额”else if (...
思路： 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions( 注： meta.btnPermissions是存放按...
这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。 事件分为两种情况： ?第一种： 不操作数据型 ?第二种： 操作数据型 <template><button @click="submit()" :disabled="isDisable">点击</button> </template> <script>export default {name: TestButton,data: function () {return {isDisable: false}},methods: {submit() {this.isDisable = truesetTimeout(() => {this.isDisable = false}, ...
先说一下用法： <zk-button class="btn btn-default">默认按钮</zk-button> <zk-button class="btn btn-default btn-round">默认按钮</zk-button> <zk-button class="btn btn-default btn-round" :speed="4" :opacity="0.6">定义速度和初始的波浪透明度</zk-button>原理： 这里用的是canvas + requestAnimationFrame（兼容性可以网上找一下解决方法） 绘制的波纹，有些用的是css transform + setTimeout做的，我感觉不太好。 模板（...
由于上传地址问题，需要自定义上传按钮，效果如图由于在页里面没有操作dom，所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。 首先是给ueditor添加自定义按钮： 1，打开ueditor.all.js,找到btnCmds，大概在27854行，如下图，在数组添加一个自定义的按钮名称，我写的是"love"ueditor.all.js 2，给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件，如下：给按钮添加事件...
在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！ 完成的效果如下： 为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。 接下来我们用代码来实现： <button class="button" @click="countDown">{{content}} ...
本人最近开始尝试学习vue.js。想使用vue写一个小例子，就选择做验证码按钮倒计时功能。 上网上搜了一下，也把他们的代码试了一下，自己出了很多问题。所以，需要写一篇基础入门的文章，避免后面人采坑。 这是按照网上写的HTML页面 <div class="register-pannel" id ="register-pannel"> <div class="register-l" align="center"> <div class="input-group" style="width: 300px;"> <input type="text" class="form-control"...
最近面试，被问到一个题目，vue做一个按钮组件；当时只是说了一下思路，回来就附上代码。 解决思路： 通过父子组件通讯（$refs 和 props）props接受参数, $refs调用子组件的方法来达到点击提交改变按钮状态，如果不成功则取消按钮状态在src/components/ 下建一个button.vue <template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的状态 调用cancel()可以切换 --> <!-- text为按钮文字 --><div c...
实例代码： <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>vue点击切换显示隐藏</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body><div id="example"><button v-text="btnText" @click="showToggle"></button><p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p></div><scrip...
遇到了一个业务场景： 某个按钮按下去之前需要先判断它是否登陆，如果没有登陆需要跳转到对应的登陆页面，否则就继续该按钮之后的操作。 对于这种问题，很显然不能每个按钮都去判断，所以我思考了一下结合自定义指令和vuex完成了相应的实现。 主要的代码实现 const directive = Vue.directive(permission-click, {bind: (el, binding, vnode) => {el.addEventListener(click, (e) => {if (!store.getters.isLogin) {store.dispatch...