精华内容
下载资源
问答
  • 今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 点击后的不可点击状态 2、代码实现 <template> <div class="my-code"> <input class="my-code-input" type="text" v-model="login_...

    1、先看看效果图

    未点击获取验证码的按钮状态
    在这里插入图片描述
    点击后的不可点击状态
    在这里插入图片描述

    2、代码实现

    <template>
    	<div class="my-code">
    		   <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captcha">
    		   <div class="my-code-get" @click="get_captcha" id="new_yan">
    		       <span v-show="show">Get Captcha</span>
    		       <span v-show="!show">{{ count }} s</span>
    		   </div>
    	</div>
    </template>
    
    <script>
        import store from '@/store'
        import Vue from 'vue'
        import $ from 'jquery'
    
        export default {
            name: "register",
            data () {
                return {
                    show: true,
                    count: 60,
                    timer: null,
                }
            },
            methods: {
                get_captcha() {
                     if (this.login_form.username === '' ) {
                        alert('Phone number or mailbox cannot be empty')
                    } else {
                        if(this.timer == null){
                            getValidate(this.login_form.username).then(response => {
                                const data = response.data
                                console.log(data)
                                console.log('成功')
                            }).catch(error => {
                                console.log(error)
                                alert(error)
                            })
                        }  
                        if (!this.timer) {
                            this.count = 60;
                            this.show = false;
                            $(".my-code-get").addClass("huise")
                            // 将鼠标设置为不可点击状态
                            document.getElementById('new_yan').style.cursor = 'not-allowed'
                            this.timer = setInterval(() => {
                                if (this.count > 0 && this.count <= 60) {
                                    this.count--
                                } else {
                                    this.show = true
                                    clearInterval(this.timer)
                                    this.timer = null
                                }
                            }, 1000)
                        }
                    }
                }
            },
            created: function() {
            },
            watch:{
                timer: function(val){
                    console.log(val)
                    if(val == null){
                         //  监听timer变化,移除不可点击样式
                        $(".my-code-get").removeClass("huise")
                        document.getElementById('new_yan').style.cursor = 'pointer'
                    }
              }
            }
        }
    </script>
    
    <style scoped>
        .my-input{
            text-align: left;
            display: block;
            width: 400px;
            height: 35px;
            padding: 3px;
            margin: 20px calc(50% - 200px) 20px calc(50% - 200px);
            background:none;  
            outline:none;  
            border:0px;
            border-bottom: 2px solid #dcdcdc;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
            box-sizing: border-box;
            font-family: PingFangSC-Regular;
            font-size: 16px;
        }
        .my-code{
            overflow: hidden;
        }
        .my-code-get{
            float: left;
            width: 120px;
            height: 35px;
            background-color: rgb(7, 187, 127);
            margin: 0 auto 20px 0;
            line-height: 35px;
            font-family: PingFangSC-Regular;
            color: #ffffff;
            border-radius: 5px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .my-code-get:active{
            background-color: #0F996B;
        }
        .my-code-get:hover{
            cursor: pointer;
        }
        .my-code-input{
            float: left;
            text-align: left;
            display: block;
            width: 280px;
            height: 35px;
            padding: 3px;
            margin: 0 auto 20px calc(50% - 200px);
            background:none;  
            outline:none;  
            border:0px;
            border-bottom: 2px solid #dcdcdc;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
            box-sizing: border-box;
            font-family: PingFangSC-Regular;
            font-size: 16px;
        }
        .my-code-input:focus{
            border-bottom: 2px solid #0F996B;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
        }
        .huise{
            background-color: #dcdcdc !important;
            color: black;
        }
    </style>
    
    展开全文
  • vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击。 解决方法,将div换成button。

    vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击。
    解决方法,将div换成button

    展开全文
  • Vue SSR不可不知的问题

    千次阅读 2018-10-10 20:00:00
    点击上方公众号,快速关注)作者:ChokCocowww.cnblogs.com/coco1s/p/8882542.html本文主要介绍Vue SSR(vue服务端渲染...

    (点击上方公众号,可快速关注)


    作者:ChokCoco

    www.cnblogs.com/coco1s/p/8882542.html


    本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题。

    SSR的应用场景

    1.SEO需求

    SEO(Search Engine Optimization,搜索引擎优化),是一种利用搜索引擎规则,提高网站在搜索引擎内自然排名的技术。通常这需要页面内容在页面加载完成时便已经存在。SEO需求的存在与互联网技术的发展历程密不可分。在互联网产生之初,网页使用超文本链接协议,将服务器的信息传递给客户端。而后出现了专门为人们检索信息的搜索引擎。随着前端技术的不断发展,出现了前后端分离的纯前端项目,由于这类项目需要页面加载完成后再异步获取数据渲染,因此大部分搜索引擎无法获取到这类项目的内容。Vue SSR正是基于此类需求而给出的一种技术方案。利用nodejs搭建页面渲染服务,在服务端完成之前需要在客户端完成的页面渲染工作,输出给SEO更友好的页面。

    除Vue SSR方案外,也可以选择Prerender(https://github.com/prerender/prerender)作为替代方案。Prerender和Vue SSR的相同点是都需要在服务端完成页面的渲染,不同点在于Prerender采用无界面虚拟浏览器Phantomjs去渲染输出页面,而Vue SSR是基于vue组件的渲染。相比来说Prerender的通用性更强,任何页面都适用,而Vue SSR则只适用于vue项目,但由于Vue SSR是基于代码层面的直接渲染,不需要像Prerender那样再去拉取静态资源,因此速度更快。

    至于应该使用哪一种技术方案,就要视需求和实际情况取舍了。

    2.首屏渲染速度

    如在上面SEO需求中提到的,目前前后端的分离的前端项目需要先加载静态资源,再异步获取数据,最后渲染页面,在这个过程中的前两部页面都是没有数据的,影响了首屏的渲染速度,也就影响了用户的体验。 目前对于首屏渲染速度的提升有许多方案,在ssr之外还有龙骨,墓碑,数据直出。相比于这些方案ssr方案实现是最复杂的,但效果也是最好的。

    下图是项目使用服务端渲染前后的首屏加载时间对比,可以明显看出服务端渲染将白屏时间和首屏完成渲染的时间都减少了50%左右。

    640?wx_fmt=png

    3.Vue SSR方案的选择

    目前Vue SSR的实现有两种实现,一种是基于官方Vue SSR指南文档的官方方案,一种是vue.js通用应用框架--NUXT。 官方方案具有更直接的控制应用程序的结构,更深入底层,更加灵活,同时在使用官方方案的过程中,也会对Vue SSR有更加深入的了解。 而NUXT提供了平滑的开箱即用的体验,它建立在同等的Vue技术栈之上,但抽象出很多模板,并提供了一些额外的功能,例如静态站点生成。通过NUXT可以根据约定的规则,快速的实现Vue SSR。

    开发中容易遇到的一些问题

    1.一套代码两套执行环境

    vue的生命周期钩子函数中, 只有 beforeCreate和 created 会在服务器端渲染(SSR)过程中被调用,这就是说在这两个钩子函数中的代码以及除了vue生命周期钩子函数的全局代码,都将会在服务端和客户端两套环境下执行。如果在两套环境的代码中加入具有副作用的代码或访问特定平台的API,将出现各种问题。比如服务端没有window、document对象, 如果加了对这个对象的引用和操作,将在服务端引起报错中断。

    因此,总结起来,最容易犯的错误就是不判断环境就去使用window、document对象。

    解决方案:

    (1)在beforeCreate,created生命周期以及全局的执行环境中调用特定的api前需要判断执行环境

    (2)使用adapter模式,写一套adapter兼容不同环境的api

    2.服务端数据的预获取

    官方方案使用Vuex在服务端预获取数据。 在服务端添加vue钩子函数,获取数据后,将数据保存在vuex的store结构中,同时渲染页面。

    在数据预获取阶段注册的钩子函数中,最好只进行数据的获取和保存,不进行其他任何涉及this的操作。因为此时的this是服务端的this,是所有用户共享的this,进行操作将发生一些不可预知的错误。

    举个例子,比如想在数据预获取的钩子函数中操作data数据。 首先,数据预获取的钩子函数在运行时还没有vue的实例,因此根本拿不到关于vue实例的任何东西;其次,进行的存取操作都是在所有用户的公共变量下进行的,一旦成功进行了存取操作,必然是所有用户的存取操作。

    同时需要注意的是,vuex在Vue SSR方案下,应使用惰性注册的方案。如果不使用惰性注册方案,而是在一开始vuex初始化实例的时候就把所有的模块统一注册,将会出现多个页面共用许多模块的问题。

    如我们有store模块如下:

    
     
    1. // store/modules/foo.js

    2. export default {

    3.  namespaced: true,

    4.  // 重要信息:state 必须是一个函数,

    5.  // 因此可以创建多个实例化该模块

    6.  state: () => ({

    7.    count: 0

    8.  }),

    9.  actions: {

    10.    inc: ({ commit }) => commit('inc')

    11.  },

    12.  mutations: {

    13.    inc: state => state.count++

    14.  }

    15. }

    则在路由组件内,需要按如下代码惰性注册vuex模块

    
     
    1. // 在路由组件内

    2. <template>

    3.  <div>{{ fooCount }}</div>

    4. </template>

    5. <script>

    6. // 在这里导入模块,而不是在 `store/index.js` 中

    7. import fooStoreModule from '../store/modules/foo'

    8. export default {

    9.  // 数据预获取生命周期,在服务端运行

    10.  asyncData ({ store }) {

    11.    //惰性注册store模块

    12.    store.registerModule('foo', fooStoreModule)

    13.    //执行foo命名空间下名为inc的action操作

    14.    return store.dispatch('foo/inc')

    15.  },

    16.  // 重要信息:当多次访问路由时,

    17.  // 避免在客户端重复注册模块。

    18.  destroyed () {

    19.    this.$store.unregisterModule('foo')

    20.  },

    21.  computed: {

    22.    fooCount () {

    23.      //获取store数据

    24.      return this.$store.state.foo.count

    25.    }

    26.  }

    27. }

    28. </script>


    总结起来就是,在服务端预获取数据的钩子函数中,不要进行额外的操作,任何对于数据的额外操作都要在vuex的体系下进行,vuex在Vue SSR方案下,应使用惰性注册的方案。

    3.接口代理的问题

    由于前端平时开发时的接口很多都是线下的,因此需要对于接口的地址进行代理切换。我们平时用的最多的是fiddler和charles等端口代理软件。但是ssr在数据预获取时走的是服务端,不是浏览器,因此不能通过这两个工具进行代理。

    办法有两个,一个是修改服务器的host地址,这个方法在开发阶段只需要更改本机的host就好,但是在提测阶段需要修改服务器的host,如果两个项目在同一个机器上测试,将不可避免的造成冲突。 第二个方法是使用axios的代理功能,因为axios对于ssr有天然的适配性,因此99%的项目都会用它。而它自带的proxy功能,可以帮助我们方便的做接口代理。

    代理配置文件如下:

    
     
    1. // config/dev-host

    2. export default {

    3.   https: '192.168.183.80',

    4.   http: '192.168.183.80'

    5. }

    代理设置代码如下:

    
     
    1. import Axios from 'axios';

    2. import https from 'https';

    3. import devHost from '../config/dev-host';

    4. let proxy = (isDev) => {

    5.  if (!isDev) {

    6.    return;

    7.  }

    8.  let proxy = null;

    9.  if (devHost.https) {

    10.    //如果存在https的代理,则设置https的代理

    11.    proxy = {

    12.      host: devHost.https,

    13.      port: 443

    14.    };

    15.    //可以配置忽略https的证书认证

    16.    Axios.interceptors.request.use(function (config) {

    17.      config.httpsAgent = new https.Agent({rejectUnauthorized: false});

    18.      return config;

    19.    });

    20.    Axios.defaults.proxy = proxy;

    21.  } else if (devHost.http) {

    22.    //如果存在http的代理,则设置http的代理

    23.    proxy = {

    24.      host: devHost.http,

    25.      port: 80

    26.    };

    27.    Axios.defaults.proxy = proxy;

    28.  }

    29. }

    30. export default proxy

    4.cookie穿透

    由于客户端的http请求首先达到SSR服务器,再由SSR服务器去后端服务器获取相应的接口数据。在客户端到SSR服务器的请求中,客户端是携带有cookie数据的。但是在SSR服务器请求后端接口的过程中,却是没有相应的cookie数据的。因此在SSR服务器进行接口请求的时候,我们需要手动拿到客户端的cookie传给后端服务器。这里如果使用是axios,就可以手动设置axios请求的headers字段,达到cookie穿透的目的。

    
     
    1. let addCookie = (config) => {

    2.    // 判断客户端请求中是否携带cookie

    3.    if(!process.browser && config.req && config.req.headers && config.req.headers.cookie){

    4.        //将客户端请求携带的cookie添加到SSR服务端请求的header中

    5.        config.headers =  config.headers || {};

    6.        config.headers.cookie = config.req.headers.cookie;

    7.        delete config.req;

    8.    }

    9.    return config;

    10. }

    5.路由模式

    vue有两种路由模式,一种是hash模式,就是我们经常用的#/hasha/hashb这种,还有一种是history模式,就是/historya/historyb这种。因为hash模式的路由提交不到服务器上,因此ssr的路由需要采用history的方式。

    异常处理问题

    1.异常来自哪里?

    (1)服务端数据预获取过程中的异常,如接口请求的各种异常,获取到数据后对数据进行操作的过程中出现的错误异常。

    (2)在服务端数据预获取的生命周期结束后的渲染页面过程中出现的异常,包括各种操作数据的语法错误等,如对undefined取属性。

    2.怎么处理异常

    (1)官方处理方法

    抛出500错误页面,体验不友好,产品不接受。

    (2)目前采用的方法

    a.服务端数据预获取过程中出现的异常,让页面继续渲染,不抛出500异常页面,打错误日志,接入监控。同时,在页面加入标志,让前端页面再次进行一次数据获取页面渲染的尝试。

    b.页面渲染过程的异常。由于目前渲染过程是vue提供的一个插件进行的,异常不好捕获,同时出现问题的概率不是很大,因此还没有做专门的处理。

    代码如下:

    entry-server.js服务端部分:

    
     
    1. Promise.all(matchedComponents.map(component => {

    2.    //代码略,参见官方文档

    3. })).then(() => {

    4.    //代码略,参见官方文档

    5. }).catch(err => {

    6.    //官方代码在这里直接抛出异常,从而走500错误页面

    7.    //我们做如下处理,首先打印错误日志,将日志加入监控报警,监控异常

    8.    console.log('rendererror','entry-server',err);

    9.    // 其次,增加服务端预渲染错误标识,前端拿到标志后重新渲染

    10.    context.serverError = true;

    11.    //最后,将服务端vue实例正常返回,避免抛500

    12.    resolve(app)

    13. })    

    index.template.html页面模板部分增加如下js代码:

    
     
    1. // 服务端渲染错误标识

    2. window.__serverRenderError = {{serverError || false}};    

    entry-client.js客户端部分:

    
     
    1. // ...忽略无关代码

    2. router.onReady((currentRoute) => {

    3.    // ...忽略无关代码

    4.    //如果拿到服务端的错误状态,则执行客户端渲染程序

    5.    if(window.__serverRenderError){

    6.        feCompatibleRende(currentRoute);

    7.    }

    8.    app.$mount('#app');

    9. })    

    10. // node报错时前端路由重渲染

    11. function feCompatibleRende(route){

    12.    let matched = router.getMatchedComponents(route);

    13.    console.log('前端兼容渲染执行');

    14.    Promise.all(matched.map(c => {

    15.        if (c.preFetch) {

    16.            return c.preFetch({

    17.                store,

    18.                route,

    19.                req: {

    20.                    headers: {

    21.                        cookie: document.cookie

    22.                    }

    23.                }

    24.            })

    25.        }

    26.    })).then(() => {

    27.        console.log('ok');

    28.    }).catch((e)=>{

    29.        console.error(e);

    30.    })

    31. }

    总结:总结起来一句话,为了更好的体验,不要出现500。

    性能

    ssr可以提高首屏加载的速度,减少白屏时间,通过以下设置可以提高性能,减少服务器资源的占用,加快访问速度。

    (1)页面级别的缓存 将渲染完成的页面缓存到内存中,同时设置最大缓存数量和缓存时间。 优势:大幅度提高页面的访问速度 代价:增加服务器内存的使用

    
     
    1. const LRU = require('lru-cache');//删除最近最少使用条目的缓存对象

    2. // 实例化配置缓存对象

    3. const microCache = LRU({

    4.  max: 100,//最大存储100条

    5.  maxAge: 1000 // 存储在 1 秒后过期

    6. })

    7. //http请求处理

    8. server.get('*', (req, res) => {

    9.  //根据url获取缓存页面    

    10.  const hit = microCache.get(req.url)

    11.  //如果有缓存则直接返回缓存数据

    12.  if (hit) {

    13.    return res.end(hit)

    14.  }

    15.  renderer.renderToString((err, html) => {

    16.    res.end(html)

    17.    //将页面缓存到缓存对象中

    18.    microCache.set(req.url, html)

    19.  })

    20. })

    (2)组件级别的缓存 适用:纯静态组件,v-for中循环的子组件

    
     
    1. 在大多数情况下,你不应该也不需要缓存单一实例组

    (3)接口级别的缓存

    
     
    1. 适用:通用性强的接口

    2. 将通用的接口缓存到内存,减少服务端接口请求的时间

    3. 代码如下:

    
     
    1. import axios from 'axios'

    2. import qs from 'qs'

    3. import md5 from 'md5'

    4. const LRU = require('lru-cache');//删除最近最少使用条目的缓存对象

    5. const microCache = LRU({

    6.  max: 100,//最大存储100条

    7.  maxAge: 1000 // 存储在 1 秒后过期

    8. })

    9. export default {

    10.  get(url, data) {

    11.    //通过 url 和参数, 生成一个唯一的 key

    12.    const key = md5(url + JSON.stringify(data))

    13.    //如果命中缓存则返回缓存

    14.    if (microCache.has(key)) {

    15.      return Promise.resolve(microCache.get(key))

    16.    }

    17.    return axios.get(url,{params:data}).then(res => {

    18.      //如果需要缓存,则缓存

    19.      if (data.cache) microCache.set(key, res)

    20.      return res

    21.    })

    22.  }

    23. }

    安全

    因为做了node服务,因此安全方面也需要考虑。

    (1)DDOS攻击

    最基本的DDOS攻击就是利用合理的服务请求来占用过多的服务资源,从而使合法用户无法得到服务的响应

    应对:

    1.提升硬件设备

    硬件性能越好,提供的服务并发能力越强,这样即使有小量的DDOS攻击也可以不影响正常用户的访问。

    2.在服务端只做最基本的处理

    在服务端不做过多复杂的数据处理,可以有效的提高ssr的性能。

    3.日志只打印关键部位的关键信息

    打印日志过多将耗费服务器资源,影响服务器的性能。

    4.DDOS流量清洗

    部署流量清洗相关设备,可以对网络中的DDoS攻击流量进行清除,同时保证正常流量的通过。

    5.DDOS软硬件防火墙

    软件防火墙解决方案为将软件防火墙部署到被保护的服务器上,优点是成本低、方便、灵活,缺点是作用有限、占用资源。

    硬件防火墙解决方案为安装防火墙硬件,优点是效果好,缺点是成本高。

    (2)sql注入

    就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令 例如: 游戏pc详情页的代码为http://game.zhuanzhuan.com/detail/1001306437923405830?metric=e32aeb1b742c27af0ec80cef4b51b654

    而攻击者将url替换为http://game.zhuanzhuan.com/detail/select%20*%20from%20user?metric=e32aeb1b742c27af0ec80cef4b51b654

    应对:

    1.对参数进行校验

    在服务端的entry文件中添加校验代码,执行组件的校验规则

    
     
    1.  /*

    2.  ** 执行组件的校验方法

    3.  */

    4.  let isValid = true

    5.  Components.forEach((Component) => {

    6.    if (!isValid) return

    7.    if (typeof Component.options.validate !== 'function') return

    8.    isValid = Component.options.validate(app.context)

    9.  })

    10.  //验证不通过则返回404

    11.  if (!isValid) {

    12.    // Render a 404 error page

    13.    return render404Page()

    14.  }

    (3)数据泄露

    使用vuex的情况下,如果不使用惰性加载,容易造成数据泄露的情况发生。

    关于任何需要登录获取数据的情况,建议不在服务端进行,只在客户端进行



    【关于投稿】


    如果大家有原创好文投稿,请直接给公号发送留言。


    ① 留言格式:
    【投稿】+《 文章标题》+ 文章链接

    ② 示例:
    【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

    ③ 最后请附上您的个人简介哈~



    觉得本文对你有帮助?请分享给更多人

    关注「前端大全」,提升前端技能

    640?wx_fmt=png

    640?wx_fmt=jpeg

    展开全文
  • vue 不是内部或外部命令,也不是运行的程序 或批处理文件 我的问题 就环境变量没有配置 下面以window 10 系统说下我的处理方法 点击此电脑,全局搜索vue.cmd ,这个步骤你需要确认vue 安装成功了,然后在安装...

    vue 安装 vue-cli 成功之后 控制台查看vue的版本 提示

    vue 不是内部或外部命令,也不是可运行的程序 或批处理文件

    我的问题 就环境变量没有配置

    下面以window 10 系统说下我的处理方法

     

    点击此电脑,全局搜索vue.cmd ,这个步骤你需要确认vue 安装成功了,然后在安装一下

    然后就把路径放到环境变量中

     

    点击桌面上的此电脑--右键--属性--高级属性--环境变量--在系统变量中双击Path然后把路径新增里面即可

    下面截图部分图片

     

     

     

    然后关闭控制台, 再次打开输入vue -V 查看

     

    成功了

    展开全文
  • 即:在新增时只要求是否配置默认为否且不可点击,但编辑时就比较麻烦了,首先判断是否配置是“是”还是“否”,若“是”,则两个都不可点击,若“否”,则两个都可点击。 1.刚开始写代码时,实现新增时不可点击很...
  • CheckBox设置不可点击

    万次阅读 2017-12-29 16:55:42
    checkbox 设置不可点击(当外面布局有点击事件与checkbox冲突时使用) 在 xml 文件 checkbox 属性中加入: android:enabled="false"   更多好内容戳下面: https://blog.csdn.net/wuqingsen1...
  • 1. 主要的代码就是这两句 picker-options="expireTimeOption" ... //disabledDate 文档上:设置禁用状态,参数为当前日期,要求返回 Boolean return date.getTime() < Date.now() - 24 * 60 * 60 ...
  • 设置可编辑和不可编辑,先上效果图 1.不可编辑状态 2.可编辑状态 通过点击按钮实现切换编辑状态 代码 1.关于vue 使用editor,请移步参考我另一篇文章: vue 集成ueditor(百度富文本编辑器)以及使用后端...
  • button中的disabled属性只能通过js来动态修改,在vue能根据绑定数据模型来动态改变button的disabled属性,但能根据绑定数据模型动态改变button的类名达到这一效果。 HTML代码: <el-form> <el-...
  • Vue设置每隔1秒才能点击事件

    千次阅读 2018-09-06 12:49:39
    方式1 设置标志位 // 点击站点名 handleclick (name) { let that = this if (this.flag) { //逻辑代码 } this.flag = false this.timerID = setTimeout(function () { console...
  • vue滑动进度条组件,可点击、可拖拽

    千次阅读 热门讨论 2019-11-24 19:29:17
    刚好碰到一个功能是audio自定义播放样式的,但又没有相关的组件,因此自己封装一个,分享给大家。大家根据自己的需求进行样式的修改,其中有bug和不足的,欢迎大家指出。 效果图 录屏有点边框,请忽略~ 组件c-...
  • Vue UI:Vue开发者必不可少的工具

    万次阅读 2018-07-10 10:32:53
    译者按: Vue.js相关的开发工具越来与好用! 原文: Vue UI: A First Look 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 随着最新的稳定版本Vue CLI 3...
  • select下拉框中某一项不可选置灰 一, html <div class="sale"> <select @change="GetCountyData()"> <option>请选择</option> <option v-for="(item,index) in da...
  • Vue防止按钮连续点击

    千次阅读 2020-03-27 11:19:02
    在main.js 创建全局指令 Vue.directive('throttle', { inserted(el, binding) { el.addEventListener('click', () => { el.style.pointerEvents = 'none'; if (!el.disabled) {...
  • 主要介绍了vue循环中点击选中再点击取消(单选)的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用Vue.js实现点击对图片进行缩放的效果,主要包括利用v-for进行图片渲染,模块的class切换
  • 今天小编就为大家分享一篇VUE解决 v-html能触发点击事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue点击事件

    千次阅读 2019-12-21 16:45:21
    首先是一个按钮是灰色并且不可点击 然后当输入值时按钮变色,且可以点击 代码如下: <div class="extract" @click="extractBtnFlag && extract()" :class="{ 'backGround': isClick }"> <...
  • 设置RadioGroup下所有radioButton均不可点击正常地说一般要是使一个控件不可点击,不外乎使用以下几种方法 - setEnable - setClickable - setFocusable但是对于RadioGroup而言以上均失效,想要达到使RadioGroup下...
  • vue点击拖动进度条

    千次阅读 2020-03-16 20:15:03
    但是很多插件都只实现拖拽事件,基于以上两个原因,自己封装了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件。 目前该组件只实现了拖拽...
  • 后端管理系统,需要添加tabs需要,所以,使用vue做了一个动态添加tabs和删除tabs的功能。 最后的效果图: ...3.首页固定,不可删除,其余动态生成的tabs皆可以删除 4.点击tabs右上角的删除时,如...
  • Vue DevTools使用修正方法

    万次阅读 2017-04-14 15:32:48
    因为工作要求,目前主要在用Vue.js技术栈开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了...
  • 创建Vue项目 vue-cli脚手架的安装使用 1.输入命令找到npm 的配置路径npm config list 2.查看此路径下有没有vue.cmd ...②第二种就是直接复制vue.cmd所在的路径,然后不用点击新建,找到path点击编辑,在里面新建
  • 购物车操作数量时,禁止连续点击减少数量: 新建文件夹:banreclick.js import Vue from 'vue' // 代码 const pointDoms = []; // 使用这个指令的所有DOM对象 Vue.directive('points', { inserted(el, binding) { ...
  • antdesignvue中a标签点击事件触发

    千次阅读 2020-10-12 10:53:38
    将触发属性名改为@click
  • Vue.之. 动态设置按钮Disabled

    千次阅读 2019-06-23 18:49:00
    Vue.之. 动态设置按钮Disabled   按钮代码如下:  添加了一个 属性 :disabled="isAble" ,控制:更新按钮、重置按钮 1 <el-form-item> 2 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,223
精华内容 19,289
关键字:

vue做不可点击设置

vue 订阅