精华内容
下载资源
问答
  • 上一节咱们已经实现注册页面的跳转,那么在这一节,咱们全用vant这个框架,把注册页面给完善起来。让它能够拥有基本的页面交互功能。 为下一步的登录、注册做好准备。 这是 vant官网, 在左侧的导航里,向下滚动...

    上一节咱们已经实现了注册页面的跳转,那么在这一节,咱们全用vant这个框架,把注册页面给完善起来。让它能够拥有基本的页面交互功能。
    为下一步的登录、注册做好准备。


    这是
    vant官网

    在左侧的导航里,向下滚动到,
    NavBar 导航栏

    先看【使用指南】把下面的代码加入到main.js中

    import { NavBar } from 'vant';
    Vue.use(NavBar);
    

    然后根据我们的需要,在register.vue文件中的template中,加入以下代码,

    <van-nav-bar
    			:title=msg
    			left-text="返回"
    			left-arrow
    			@click-left="goBackFn"
    			/>
    

    在register.vue文件中的script中,加入以下代码,

    data(){
    		return {
    			msg:'注册页面',
    
    			username:'',
    			password:'',
    			password2:'',
    
    			userErr:'用户名不能为空',
    			passErr:'密码不能为空'
    		}
    	},
    

    methods:{
    	// 回到上一步
    	goBackFn(){
    		this.$router.go(-1);
    	}
    }
    

    现在你应该能够看到一个导航条,并且你点击返回的时候,能够返回到上一页。


    接下来,咱们使用【Field 输入框】来实现用户输入的部分,
    点击:Field 输入框
    查看文档的使用指南,把下面的代码,加入到main.js中,

    import { Field } from 'vant';
    Vue.use(Field);
    

    我们使用Field的自定义类型,在register.vue文件中的template区域中,加入以下代码,

    <van-field
        v-model="username"
        required
        clearable
        label="用户名"
        placeholder="请输入用户名"
        @click-icon="username=''"
        :error-message="userErr"
        />
    
    <van-field
        v-model="password"
        type="password"
        required
        clearable
        label="密码"
        placeholder="请输入密码"
        @click-icon="username=''"
        :error-message="passErr"
        />
    
    <van-field
        v-model="password2"
        type="password"
        required
        clearable
        label="重复密码"
        placeholder="请重复输入密码"
        @click-icon="username=''"
        :error-message="passErr"
        />
    

    在script区域中加入以下代码,

    data(){
    	return {
    		msg:'注册页面',
    
    		username:'',
    		password:'',
    		password2:'',
    
    		userErr:'用户名不能为空',
    		passErr:'密码不能为空'
    	}
    }
    

    这时,我们的register.vue注册页面,虽然还没有添加相应的js方法,但就页面来讲已经初步完成。


    更快观看 更多教程内容,请扫下方二维码,关注微信公众号:web前端教室,谢谢。 更有前端学习群,让你组团学习,更快进步。

    展开全文
  • toast插件方法和vue install方法的使用 vue-cli环境下在根目录下创建componets文件夹,并在文件夹下...----index.js // 该文件用来引入其他组件,并在全局vue中注册 toast组件 <template> <div class="...

    toast插件方法和vue install方法的使用

    vue-cli环境下在根目录下创建componets文件夹,并在文件夹下创建三个文件

    --components
    ----custtoast.vue
    ----stepper.vue
    ----index.js  // 该文件用来引入其他组件,并在全局vue中注册
    

    toast组件

    <template>
      <div class="toast__body">
          <!-- 组件显示和消失的特效 -->
          <transition name="fadein">
              <div class="toast" v-if="isshow">
                <img src="http://bpic.588ku.com/element_origin_min_pic/01/30/77/88573b2346b359f.jpg" alt="" v-if="type == 'success'">
                <img src="http://bpic.588ku.com/element_origin_min_pic/01/39/62/29573cca228cd76.jpg" alt="" v-else-if="type == 'fail'">
                <p> {{ message }}  </p>
              </div>
          </transition>
      </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                message: '',
                type: '',
                isshow: false
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    // 对路由或者其他组件同样适用
    .fadein-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }
    .fadein-enter, .fadein-leave-to {
        opacity: 0;
    }
    .toast__body {
        display: flex;
        align-items: center;
        justify-content: center;
        .toast {
            position: fixed;
            padding: 25px 50px;
            background-color: rgba(0,0,0,.8);
            z-index: 999;
            text-align: center;
            img {
                width: 50px;
                margin-bottom: 10px;
            }
            p {
                font-size: 20px;
                color: #fff;
            }
        }
    }
    
    </style>
    

    stepper.vue组件

    <!-- 步进器组件 -->
    <template>
        <div>
            <div class="stepper__main">
                <button class="stepper__main-add" @click="addSteppernum">+</button>
                <input type="text" v-model="num">
                <button class="stepper__main-cut" @click="cutSteppernum">-</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: 'stepper',
        // 接收父组件中传来的值
        props: {
            propvalue: {
                type: Number,
                // 如果传值为空,默认为0
                default: 0
            }
        },
        data () {
            return {
                num: null
            };
        },
        created () {
            const _this = this
            // props接收的值赋值给子组件内部的值
            _this.num = this.propvalue
        },
        methods: {
            // 不能在子组件中修改父组件的值
            cutSteppernum () {
                if (this.num === 0) {
                    return
                }
                this.num = --this.num
                // 组件之间传值。子传父
                this.$emit('emitStepper', this.num)
            },
            addSteppernum () {
                this.num = ++this.num
                this.$emit('emitStepper', this.num)
            }
        }
    }
    
    </script>
    <style lang='less' scoped>
    @background: #ccc;
    
    .stepper__main {
        position: relative;
        width: 500px;
        height: 200px;
        margin: 0 auto;
        top: 50px;
        input {
            display: inline-block;
            box-sizing: border-box;
            padding-left: 20px;
            width: 200px;
            height: 50px;
            margin: 0 20px;
            font-size: 24px;
        }
        button {
            appearance: none;
            width: 50px;
            height: 50px;
            outline: none;
            cursor: pointer;
            font-size: 20px;
            border-radius: 10px;
            &:hover {
                color: rgb(119, 173, 245);
            }
        }
        .stepper__main-add {
            display: inline-block;
    
        }
    }
    </style> 
    

    注意必须在组件中定义属性name,后面注册组件时会根据组件名字注册组件,你在调用时也是根据组件名字组件调用

    index.js注册组件和注册插件

    import custtoast from './custtoast.vue'
    import custstepper from './stepper.vue'
    
    // 组件的注册
    const custcom = {
        install (Vue) {
            let custcomponents = [custstepper]
            // 循环注册
            custcomponents.forEach(item => {
                Vue.component(item.name, item)
            })
        }
    }
    
    // 在vue上挂载方法
    const toastcom = {
        install (Vue) {
            // 生成一个Vue的子类
            const toastcomconstructor = Vue.extend(custtoast)
            // 生成一个该子类的实例
            const instance = new toastcomconstructor()
            // 将这个实例挂载在我创建的div上
            instance.$mount(document.createElement('div'))
            // 并将此div加入全局挂载点内部
            document.body.appendChild(instance.$el)
            // 通过Vue的原型注册一个方法
            // 让所有实例共享这个方法$fypop     // 其中的data是调用时传入的数据,duration是持续时间
            Vue.prototype.$fypop = (data, duration = 2000) => {
                // 如果传入的data是对象格式
                if (Object.prototype.toString.call(data) == "[object Object]") {
                    instance.message = data.message
                    instance.type = data.type
                    instance.isshow = true
                } else if (typeof data == "string") {
                    instance.message = data
                    instance.isshow = true
                }
                // 一次性定时器,可以传入参数来让组件多长时间消失
                setTimeout(() => {
                    instance.isshow = false
                }, data.duration ? data.duration : duration);
            }
        }
    }
    
    export { toastcom, custcom }
    

    然后你就可以在main.js入口处引入并使用vue.use挂载引入的外部插件

    import { toastcom, custcom } from './components/index'
    
    Vue.use(toastcom)
    // 会自动调用其中的install方法
    Vue.use(custcom)
    

    在其他的任何地方调用方法和这个组件

    <!-- 根据你定义组件名称时调用它 -->
    <stepper></stepper>
    
    <!-- 在vue的methods或生命周期中调用fypop方法 -->
    methods: {
    	onclick () {
    		this.$fypop()  // 参数可以传入string类型或object类型,object格式是{ message: '', type: '' }, 也可以,隔开传入第二个参数就是组件持续显示的时间
    	}
    }
    
    展开全文
  • 前面步骤都是按照文档来的,但是引入之后就会报错,是因为最后一步组件注册,在文档里没有写 在vue文件中还要写在components中才能正常使用UI组件: components: { 'van-cascader': Cascader, 'van-popup': Popup...

    前面步骤都是按照文档来的,但是引入之后就会报错,是因为最后一步组件注册,在文档里没有写
    在这里插入图片描述

    在vue文件中还要写在components中才能正常使用UI组件:

      components: {
        'van-cascader': Cascader,
        'van-popup': Popup,
        'van-field': Field,
    },
    
    展开全文
  • 作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例...
  • APICloud+vue+vant实现二维码扫码功能

    千次阅读 2019-08-27 01:00:28
    使用APICloud+vue+vantUI项目实战--实现二维码扫描功能 本次的教程主要是简介如何在APICloud中去使用vue和vantUI来搭建项目。在网上搜索了很多关于vantUI的使用方法,但是都是在vue脚手架的项目中使用的,vant如何...

    使用APICloud+vue+vantUI项目实战--实现二维码扫描功能

    本次的教程主要是简介如何在APICloud中去使用vue和vantUI来搭建项目。在网上搜索了很多关于vantUI的使用方法,但是都是在vue脚手架的项目中使用的,vant如何在APICloud中去使用,网上找到的基本上都是不完整的,所以这次特意来填补这个空缺。

    步骤一:去官网创建好自己的APICloud项目,并使用APICloud IDE编辑器导入项目。

    APICloud的官网平台登陆    https://www.apicloud.com/

    下载APICloud IDE           http://www.apicloud.com/dev

    关于如何去创建APICloud的应用及APICloud IDE编辑器的下载,请参考另一篇博客,这里我就不重复去讲解了。https://blog.csdn.net/qq_40976321/article/details/100068706

    步骤二:访问vant官网,项目中引入vue和vant的CDN

    Vant官方文档 : https://youzan.github.io/vant/#/zh-CN/quickstart

     

    来到vant的官方文档中,我们选择快速上手—方式四 通过CDN引入—在Script中去引入声明注册Vue和vant。(到这里,很多人都会很纳闷,为什么不是应该按照步骤来,先通过指令在项目中安装vant呢?--原因:通过指令在项目中安装vant是vue脚手架项目中的使用方法,我们在APICloud中使用,就直接使用方法四的方式引入就可以了)。

    通过CDN引入vue和vant

    在自己的项目中引入vue和vant的CDN,并声明使用。

    引用之后记得注册使用vue和vant

     

    步骤三:在APICloud官网中往项目中添加扫码Scanner模块

    --(1)在APICloud官网中添加Scanner模块

    --(2)添加完模块之后,记得重新云编译一下

    --(3)再到模块中—自定义loader—再次编译—编译完成后扫码下载(云编译之后,再这个编译,顺序别乱)

    当项目中已经添加了新的模块,我们本地也需要同步一下

    选择项目—右击—代码管理—从云端同步,这样同步之后,我们就可以调用扫码功能了。

     

    步骤四:设置界面布局,及调用vue和vantUI实现扫码

    --(1)设置基本样式

    使用vantUI的按钮样式,先去官网找对应样式并复制到项目中

    循环遍历这里我采用vant中的list列表

    注意:在vant的官网中很多的UI使用的是单标签形式,如list列表中的<van-cli />这种形式,但是在实际的应用中使用这种单标签可能会使得无法正常显示,所以我们尽量使用<van-cli ></van-cli>来,这样基本上就不会出现不正常形式)不清楚的去看下面这张图片,自己亲自动手试试就很清楚了。)

    手机样式效果:

    --(2)调用扫码模块

    --(3)通过v-for将扫到的码循环展示出来

    --(4)效果展示:

    希望本教程能够对您有所帮助,能够更好属性vantUI的使用

    项目源码链接:https://pan.baidu.com/s/1Uf6Zv_yx5deSkgUwejZ08Q

    提取码:e5nf

    展开全文
  • 首先,用vue+vant注册页面写出来 1.Vue方面都是一些很常用的知识点,vant是一个比较适用于移动端的UI组件库,而element-ui更加适合h5网页版 register.vue <template> <div> <van-nav-bar title=...
  • Vant组件按需注册

    2020-10-29 10:39:58
    按需注册组件: npm i babel-plugin-import -D //安装插件 需要注意按需注册方式不允许与全局注册方式共同存在 //在babel.config.js中配置 plugins: [ ['import', { libraryName: 'vant', library...
  • vue+vant实现上拉刷新,下拉加载

    千次阅读 2019-08-15 17:16:12
    vue+vant下拉刷新,上拉加载 这是前段HTML代码: <div class="item-box"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list :finished="finished" @load...
  • 移动APP登录注册(vue+vant

    千次阅读 热门讨论 2021-03-30 11:08:47
    我们可以使用vue和组件vant实现简单的登录和注册,下面是我做出来的样子(这是在手机测试的界面) 里面很多组件都是在vant官网上面直接拿来使用的 其中我做了一些小的提示: 1. 登录成功后有“登录成功”提示 2. ...
  • 一个商城Demo,预先使用vant有赞UI,vue实现,使用mysql,表达实现实现的功能 登录/注册 商品列表 商品详情 购物车 收货地址 订单 项目预览 查看演示 在手机上效果更好,扫一扫体验 前端 项目依赖 项目运行 将img...
  • Vue3.0 +打字稿+ Vant //创建 vue create vue3 - ts - demo //选择Vue3.0 空格选择 enter确认 vue add typescript //启动 npm i npm run serve 数据 // 1 reactive将state 结语实现state数据的响应式 import { ...
  • 使用VUE+Vant组件库实现小米商城app

    千次阅读 热门讨论 2019-11-11 02:18:42
    1 cd到某个文件夹,在命令窗口输入 vue create xiaomi创建vue项目 2 在vscode中打开项目 xaomi,可以看到以下项目结构 node_modules 包与依赖存放位置 public 根模板文件 src 项目源文件 .gitigonore 当文件用git...
  • Vant + VeeValidate 3 实现表单验证

    千次阅读 2020-02-10 16:55:51
    之前一直使用vant做移动端开发,也都没做到太复杂的表单输入。简单的输入,都是直接弹窗提示就行。这次做的需求,在页面上有许多内容要输入。查看vant文档时发现,vant自带的表单校验功能非常孱弱,Field组件自身也...
  • 在这种情况下,员外是想自己添加任何方法都没法实现的,同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview 也实现不了,因为根本就拿他没有一点办法。同时可以看到,这个图片预览的 html 是挂载在...
  • 在全局注册Field组件时,实现扩展,给Field组件的props中formatter添加默认方法,想要有空格输入时覆盖formatter或者引用注册Vant原本的Field。 Vue.component(Field.name/*You custom name*/, { extends: Field, ...
  • 我用一次性导入所有组件的方式是没有问题,按需导入就有问题 ...然后在main.js中注册 ![图片说明](https://img-ask.csdn.net/upload/201908/30/1567155641_750313.png) 然后我在组件中引入了相关代码
  • 近期有一个需求,考生报名的时候...第二步:全局注册,在main.js中引入以下代码 import Vant from 'vant' Vue.use(Vant) 第三步:界面代码 <template> <div class="test-form" id="app"> <van..
  • Vue结合vant框架实现通讯录a-z排序

    万次阅读 2020-07-28 11:06:28
    1.其中组件NavBar/Toast/Button/Cell/CellGroup我已在main.js中全局注册,若单独使用请在vue页面中配置,如何配置可参考vant官网。 提示:在main.js中进行全局注册,引入组件,然后使用Vue.component(Cell.name,Cell...
  • //这里将屏幕分为10分(10rem),也就是10*37.5=375px就等于屏幕100%,如果不需要被转化,在style中直接写PX大写 }) ] } } }, 然后在main.js中注册引用 //移动端布局 import 'lib-flexible' 5. 全局引用vant...
  • vantui 实现 自定义图标 的tabbar 该tabbar是通过组件实现的 在组件中components文件定义tabbar组件 1、模板 <template> <!-- 属性为 vantui 定义的属性 --> <!-- safe-area-inset-bottom 开启苹果...
  • npm i vant -S 自动按需引入组件:babel-plugin-import是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 在 vue-...
  • 一个基于Vue/Vant开发的移动端H5理财产品页面,用于学习和记录开发知识
  • 自定义vant ui steps组件效果实现

    千次阅读 2019-04-08 17:53:00
    记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <div class="rxlc-step"> ...
  • 这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。 Vite官网地址:https://vitejs.dev/ 使用Vite的优点:最简单直观的一点,那就是快啊。 和Webpack相比,Vite 具有以下特点:...
  • 1、首先需要在Vue项目里安装注册Vant组件 Vue 2 项目,安装 Vant 2:npm i vant -S; Vue 3 项目,安装 Vant 3:npm i vant@next -S; 2、安装完之后,需要在main.js中进行注册Vant组件 import Vant from 'vant';...
  • 在学习开发的过程中,一般接触的都是json对象类型的增删改查,刚开始做项目的时候需要图片上传功能,第一次做还不知道如何实现。 一般后端返回给前端图片有两种方法 返回base64编码(图片不能太大) 返回图片的地址...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,117
精华内容 446
关键字:

vant实现注册