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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
PHP连接access数据库
2008/03/27 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
十一酒店活动方案
2014/02/20 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
小学班级标语口号大全
2015/12/26 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python