vue 封装面包屑组件教程


Posted in Javascript onNovember 16, 2020

我看过一篇关于程序员写博客的文章,他说很多的程序员过了两年写了很多的代码,但是回想起来自己具体做了哪些技术点,遇到坑几乎没有印象,所以说文字是记录的最好方式,好记性不如烂笔头,可以方便自己以后查看,在写的过程中也会再加深一遍印象,我也来折腾折腾。

第一次写文章就写一个比较有意义的吧,18年四月末来到目前所在的这家公司,熟悉了一周环境和代码后,新的任务就是使用vue+element-ui来重构之前老版本的项目,我主要负责就是用户管理的一个模块,因为之前没有用过vue所以恶补了一周的vue了解了一些指令和vuex就开始做项目,排版使用的就是element-ui,这个ui框架用起来是比较方便的,因为对于金融行业pc端来说页面没有太炫他华丽,这个ui框架刚好符合我们的需求

遇到的第一个功能点就是面包屑,因为每个页面都会需要用到,所以经理提议把它封装起来

效果图

vue 封装面包屑组件教程

子组件

首先新建一个页面(子组件),把页面的基本样式实现出来,这里是自己写的div+css

子组件是封装好的一个例子,而父组件是每一个页面,页面中需要用到面包屑时就引入

vue 封装面包屑组件教程

父组件

调用子组件

引入子组件路径

注册组件

给子组件传的值

vue 封装面包屑组件教程

局部组件注册在components,可以在里面注册多个

vue 封装面包屑组件教程

这个里面涉及到一个点就是父组件给子组件传参

总的来说父传子就是这三个步骤:父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。

获取父组件的数据的方式props,定义接收值的类型,文章中接收值的类型是数组

但是有要注意的点:

子组件接受的父组件的值分为——引用类型和普通类型两种,

普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)

引用类型:数组(Array)、对象(Object)

其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,

但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。

补充知识:vue element组件实现步骤条形式的复杂表单信息的注册

实际效果如下

vue 封装面包屑组件教程

vue代码如下

<template>
 <div id="bdy">
 <Head/>
 <div class="tbody"> 
<el-steps :active="active" finish-status="success">
 <el-step title="上传头像"></el-step>
 <el-step title="个人信息"></el-step>
 <el-step title="专业信息"></el-step>
 <el-step title="证书信息"></el-step>
</el-steps>
<!-- 个人信息 -->
 <el-form ref="form" :model="form" label-width="80px">
<div class="info" v-if="active==1">
 <el-form-item label="上传头像" prop="imageUrl">
 <el-upload
 class="avatar-uploader"
 action="https://jsonplaceholder.typicode.com/posts/"
 :show-file-list="false"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload" >
 <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>
</div>
<div class="info" v-if="active==2">
<el-form-item label="真实姓名" prop="username">
 <el-input v-model="form.username"></el-input>
 </el-form-item>
 <el-form-item label="手机号码" prop="tell">
 <el-input type="text" v-model="form.tell" autocomplete="off"></el-input>
 </el-form-item>
 <el-form-item label="身份证" prop="indentity">
 <el-input type="text" v-model="form.indentity" autocomplete="off"></el-input>
 </el-form-item>
</div>
<div class="info" v-if="active==3">
 
 <el-form-item label="专长领域:" prop="area">
 <br>
 <el-checkbox-group v-model="form.area" @change="handleCheckedCitiesChange" >
 <el-checkbox v-for="city in form.cities" :label="city" :key="city">{{city}}</el-checkbox>
 </el-checkbox-group>
 </el-form-item>
 <el-form-item label="从业资质:" prop="quality">
 <br>
 <el-radio-group v-model="form.quality">
 <el-radio :label="0">国家二级咨询师</el-radio>
 <el-radio :label="1">国家三级咨询师</el-radio>
 <el-radio :label="2">注册系统咨询师</el-radio>
 <el-radio :label="3">注册系统督导师</el-radio>
 <el-radio :label="4">其他</el-radio>
 </el-radio-group>
</el-form-item>
</div>
<div class="info" v-if="active==4">
<el-form-item label="证书编号" prop="number">
 <el-input type="text" v-model="form.number" autocomplete="off"></el-input>
 </el-form-item>
 <el-form-item label="从业年限" prop="time">
 <el-input type="text" v-model="form.time" autocomplete="off"></el-input>
 </el-form-item>
 <el-form-item label="个人简介" prop="instroduce">
 <el-input type="text" v-model="form.instroduce" autocomplete="off"></el-input>
 </el-form-item>
 <el-form-item>
 <el-button type="primary" @click="onSubmit">申请入驻</el-button>
 </el-form-item>
</div>
<el-button style="margin-top: 12px;" @click="next" v-if="active<4">下一步</el-button> 
<el-button style="margin-top: 12px;" @click="pre" v-if="active>1">上一步</el-button> 
</el-form> 
</div>
</div>
</template>
<style>
.tbody{
 width:80%;
 margin-left:10%;
 margin-top: 2%;
}
/* 表单 */
.avatar-uploader .el-upload {
 border: 1px dashed #d9d9d9;
 border-radius: 6px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
 border-color: #409EFF;
 }
 .avatar-uploader-icon {
 font-size: 28px;
 color: #8c939d;
 width: 178px;
 height: 178px;
 line-height: 178px;
 text-align: center;
 }
 .avatar {
 width: 178px;
 height: 178px;
 display: block;
 }
</style>
<script>
//表单js代码
import Head from "../../components/common/Head";
import axios from "axios";
import Qs from "qs";
import router from "../../router/router.js";
 const cityOptions = ['婚姻家庭', '情绪管理', '恋爱心理', '个人成长','人际关系','心理健康','职场心理','亲子教育','性心理'];
 export default{
 components: {
 Head
 },
 data() {
 return {
 active: 1,
 form: {
 area: ['个人成长'],
 checkAll: false,
 cities: cityOptions,
 isIndeterminate: true,
 quality: 0,
 imageUrl: '',
 username : '',
 tell: '',
 indentity: '',
 number:'',
 instroduce:'',
 time:''
 }
 }
 },
 methods: {
 onSubmit() {
 //this.form.checkedCities获取多选框的内容 zxs[this.form.radio] this.form.imageUrl
 //开始提交 在这里进行跨域请求 
 this.axios({
 method: "post",
 url: "/api/PsychoSys/tuser.action",
 data: Qs.stringify(this.form)
 })
 .then(res => {
 this.$router.push("/tinfo");
 })
 .catch(function(err) {
 console.log(err);
 });
 /*在这里进行跨域请求*/
 //开始提交
 },
 handleAvatarSuccess(res, file) {
 this.form.imageUrl = URL.createObjectURL(file.raw);
 },
 beforeAvatarUpload(file) {
 const isJPG = file.type === 'image/jpeg';
 const isLt2M = file.size / 1024 / 1024 < 2;
 if (!isJPG) {
 this.$message.error('上传头像图片只能是 JPG 格式!');
 }
 if (!isLt2M) {
 this.$message.error('上传头像图片大小不能超过 2MB!');
 }
 return isJPG && isLt2M;
 },
 handleCheckAllChange(val) {
 this.form.area = val ? cityOptions : [];
 this.isIndeterminate = false;
 },
 handleCheckedCitiesChange(value) {
 let checkedCount = value.length;
 this.checkAll = checkedCount === this.form.cities.length;
 this.isIndeterminate = checkedCount > 0 && checkedCount < this.form.cities.length;
 }, next() {
 if (this.active++ > 3) this.active = 1;
 },
 pre() {
 if (this.active-- < 2) this.active = 1;
 }
 }
 } 
//表单js代码
</script>

后台是用java的ssh框架做的

package cn.com.service;
import java.io.IOException;
import java.util.List; 
import javax.servlet.http.HttpServletResponse; 
import org.apache.struts2.ServletActionContext;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
 
import cn.com.bean.Teacher;
 
import com.opensymphony.xwork2.ModelDriven;
@Repository(value="teacherUser")
@Scope("prototype")
public class TeacherUser implements ModelDriven<Teacher>{
 @Autowired
 private SessionFactory sf;
 @Autowired
 private Teacher tea;
 private List<String> area;
 public List<String> getArea() {
 return area;
 }
 public void setArea(List<String> area) {
 this.area = area;
 }
 @Transactional
 public String regedit_user(){
 //普通用户注册 ,用户名不能重复
 Session session=sf.getCurrentSession();
 //查询是否重复
 String sql="from Teacher where username=?";
 Query query=session.createQuery(sql);
 query.setString(0, tea.getUsername());
 Teacher t=(Teacher)query.uniqueResult();
 String toast="";
 String [] zxs ={"国家二级咨询师","国家三级咨询师","注册系统咨询师","注册系统督导师","其他"};
 String q="";
 if(t!=null){
 toast="fail"; 
 }else{
 //处理数据
 Integer o=Integer.parseInt(tea.getQuality());
 tea.setQuality(zxs[o]);
 tea.setAreas(area.toString());
 toast="success";
 session.save(tea); 
 }
 HttpServletResponse response = ServletActionContext.getResponse();
 response.setCharacterEncoding("utf-8");
 try {
 response.getWriter().write(toast);
 } catch (IOException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }
 return null; 
 }
 
 public Teacher getModel() {
 return tea;
 }
}

以上这篇vue 封装面包屑组件教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
编写简单的jQuery提示插件
Dec 21 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 #Javascript
小程序实现密码输入框
Nov 16 #Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
You might like
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP基本语法总结
2014/09/06 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JsDom 编程小结
2011/08/09 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python 排序算法总结及实例详解
2016/09/28 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
Python中Qslider控件实操详解
2021/02/20 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
高中打架检讨书
2014/02/13 职场文书
成人继续教育实施方案
2014/03/01 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
如何写新闻稿
2015/07/18 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL