刚用vuejs不久，求一些常用插件，有哪些好用的呢？

Question

刚接触vue不久，最近用vuejs开发一个站点，没有用第三方的ui组件，界面全部是自己画的，现在的问题是，需要一款弹框插件，要求内容布局样式全部可以定制化，还需要一款表单验证插件，你们用过哪些好用的呢？？？

1. 弹框插件（ui可高度定制化）
2. 表单验证插件
3. 输入限制（数字框输入其他内容时不容输入）
4. 倒计时——例如，点击一个获取验证码的按钮，然后倒计时60s后才能再次点击

或者说一下这些功能实现的思路也行，谢谢各位大牛了。

Answer 1

题主应该去看一些UI框架 这些组件都有

• vux
• vant
• mint-ui
• elementui
• iviewui

这些都是比较流行的框架，里边有你要的组件

<template>
    <div class="reg">
        <group class='regNum'>
            <x-input title="手机号码" :max="11" v-model='mobile' placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
        </group>
        <group>
            <x-input title="手机验证码" v-model='code' placeholder="请输入手机验证码" class="weui-vcode">
                <x-button style="background: #6594FE;" :disabled="isAble" slot="right" type="primary" mini @click.native='getCode'>{{btnText}}<span v-if="timer">{{timer}}s后重新发送</span>
                </x-button>
            </x-input>
        </group>
    
        <button style='width:90%;color:#fff;margin-top:2em;' @click='sbmit' class="weui-btn weui-btn_primary">下一步</button>

    </div>
</template>
<script>
    import {XInput,XButton,Checklist,Group,CheckIcon} from 'vux'
    export default {
        components:{
            XInput,
            XButton,
            Checklist,
            Group,
            CheckIcon
        },
        data:function() {
            return{
                code:'',
                mobile:'',
                pageHeader:true,
                pageName:'忘记密码',
                pageFooter:false,
                demo2:false,
                bg:{white:false,grey:true},
                start:false,
                timer:0,
                isAble:false,
                btnText:'获取验证码'
            }
        },
        
        methods:{
            finish(){

                this.timer=0;
                this.btnText='获取验证码'
                this.isAble=false;
            },
            getCode(){

                let mobile=this.mobile;
                if( mobile == ''){
                    this.$vux.toast.show({
                        text: '请填写手机号',
                        type: "warn"
                    })
                    return;
                }

                //验证手机号
              var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
              if(!myreg.test(mobile))
              { 
                  this.$vux.toast.show({
                      text: '请输入正确的手机号！',
                      type: "warn"
                  })
                  return false; 
              }

              this.timer=5;
              this.btnText=''
              this.start=true;
              this.isAble=true;
              let vm=this;
              var int=setInterval(function(){
                  vm.timer--;
                  if(vm.timer==0){
                      clearInterval(int);
                      vm.finish();
                  }
              },1000)



            },
            sbmit(){
                let code= this.code;
                let mobile=this.mobile;
                if(code =='' || mobile == ''){
                    this.$vux.toast.show({
                        text: '请填写完整信息',
                        type: "warn"
                    })
                    return;
                }

            }
        },    
        mounted(){
        
        },


    }
</script>

Answer 2

vue的思想就是组件化
你要的东西，你学下怎么写插件，然后自己写就行了！完全不需要用现成的，不可能高度定制化的

Answer 3

element

Answer 4

推荐两个网址：awesome搜索Vuejs
github awesome-vue
这里面有你需要的组件库。
需要高度定制，最好的方案就是自己写。

Answer 5

弹窗用layer，这个用的比较多