vue picker组件封装,
本文主要介绍vue包crumb组件教程，有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
我看过一篇关于程序员写博客的文章。他说，很多程序员两年后写了很多代码，但想想自己做过的具体技术点，遇到坑几乎没有印象。所以说，写是最好的记录方式，好的记忆不如坏的，可以方便他们以后查。在写的过程中，他们又会被打动，我也会辗转反侧。
第一次写文章，写有意义的。18年4月底来到现在的公司，在熟悉了一个星期的环境和代码后，新的任务是使用vue element-ui对之前的老版本项目进行重构。我主要负责用户管理的一个模块。因为之前没用过vue，临时抱佛脚了一个星期的vue学了一些说明和vuex，开始做项目。Element-ui用于排版。这个ui框架用起来很方便，因为页面对于金融行业的pc来说并不算太华丽。这个ui框架正好满足了我们的需求。
遇到的第一个功能点是breadcrumb，因为每个页面都会需要，所以管理者提出封装。
效果图
子组件
首先，创建一个新页面(子组件)，实现页面的基本样式。这是我自己的div css。
子组件是一个打包的例子，而父组件是每个页面，当页面中需要面包屑时引入。
父组件
调用子组件
引入子组件路径
注册组件
传递给子组件的值。
组件在组件中本地注册，并且可以在其中注册多个组件。
这里涉及的一点是父组件将参数传递给子组件。
一般来说，父子传递就是三个步骤：在父组件中定义值，调用和引用子组件，将值传递给被引用标签上的子组件。
Props，获取父组件数据的方式，定义了接收值的类型。本文中接收值的类型是array。
但是有要注意的点：
子组件接受的父组件的值分为——引用类型和普通类型，
常见类型：字符串、数字、布尔、空。
引用类型：数组、对象
其中，可以在子组件中更改通用类型，而不会影响父组件中的值，这些值也在其他兄弟子组件中调用，
然而，当引用类型的值在子组件中被修改时，父组件的值也将被修改，因此结果是同样引用被改变的值的其他子组件内部的值也将被修改。除非你有特别要求这样做，否则最好不要这样做。
补充知识：vue element组件实现步骤条形式的复杂表单信息的注册
实际效果如下
vue代码如下
模板
div id=bdy
头/
div class=tbody
el步骤：活动=活动完成-状态=成功
El-step title=上传头像/el-step
El-step title=个人信息/el-step
El-step title=专业信息/el-step
El-step title=证书信息/el-step
/El-步骤
！-个人信息-
El-form ref= form :model= form label-width= 80px
div class=info v-if=active==1
El-form-item label=上传头像 prop=imageUrl
El-上传
class=头像上传者
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-上传
/El-表单-项目
/div
div class=info v-if=active==2
El-form-item label=真实姓名 prop=用户名
el输入v-model=form.username/el输入
/El-表单-项目
El-form-item label=手机号码 prop=tell
El-input type= text v-model= form . tell autocomplete= off /El-input
/El-表单-项目
El-form-item label= ID card prop= identity
El-input type= text v-model= form . identity autocomplete= off /El-input
/El-表单-项目
/div
div class=info v-if=active==3
El-form-item label=专业领域： prop=area
英国铁路公司
El-checkbox-group v-model= form。area @ change= handlecheckedccitieschange
El-复选框v-表示窗体中的=城市。 city :label= city :key= city { city } }/El-checkbox
/el-checkbox-group
/El-表单-项目
El-表单-项目标签=从业资质： prop=quality
英国铁路公司
El-radio-group v-model= form。“质量”
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-表单-项目
/div
div class=info v-if=active==4
El-表单-项目标签=证书编号prop=number
El-input type= text v-model= form。number autocomplete= off /El输入
/El-表单-项目
El-表单-项目标签=从业年限时间到了
El-input type= text v-model= form。time autocomplete= off /El-input
/El-表单-项目
El-表单-项目标签=个人简介prop=介绍
El-input type= text v-model= form。“自动完成=”off“/El-input
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= on submit 申请入驻/el-button
/El-表单-项目
/div
El-button style= margin-top:12px；@click=next v-if=active4 下一步/el-button
El-button style= margin-top:12px；@click=pre v-if=active1 上一步/el-button
/el格式
/div
/div
/模板
风格。tbody{
宽度：80%;
左边距：10%;
最高利润率：2%;
}
/* 表单*/。头像上传者100 . El-上传{
边框：1px虚线# d9d9d9
边框-半径：6px
光标：指针；
位置：相对；
溢出：隐藏；
}。头像上传者100 . El-上传：悬停{
边框颜色：# 409EFF
}。头像-上传者-图标{
字体大小：28px
颜色：# 8c939d
宽度：178像素
身高：178像素
行高：178像素
文本对齐：居中；
}。头像{
宽度：178像素
身高：178像素
显示：块；
}
/风格
脚本
//表单射流研究…代码
从导入标题././components/common/Head "；
从" axios "导入axios
从" Qs "导入QS；
从导入路由器././路由器/路由器。js’；
const cityOptions=[婚姻家庭, 情绪管理, 恋爱心理, 个人成长,人际关系,心理健康,职场心理,亲子教育,性心理];
导出默认值{
组件：{
头
},
data() {
返回{
主动：1,
表单：{
区域：[个人成长],
错误，
城市：城市选项，
是偶然的：真的，
质量：0,
imageUrl:" "，
用户名： ,
告诉： ,
身份： ,
号码：,
简介：,
时间：""
}
}
},
方法：{
onSubmit() {
//this.form.checkedCities获取多选框的内容zxs【这个。形式。这个。形式。地址
//开始提交在这里进行跨域请求
this.axios({
方法： post ，
网址：“/API/PsychoSys/tuser。行动”，
数据：Qs.stringify(this.form)
})。然后(res={
这个1000美元路由器。push(/tinfo )；
})。接住(函数（错误){
控制台。日志(错误)；
});
/*在这里进行跨域请求*/
//开始提交
},
handleAvatarSuccess(res，file) {
这个。形式。imageurl=URL。createobjecturl(文件。raw)；
},
在AvatarUpload之前(文件){
const是jpg=file。type=== image/JPEG ；
const islt 2m=文件。尺寸/1024/1024 2；
如果(!isJPG) {
这个message.error(上传头像图片只能是使用联合图象专家组文件交换格式存储的编码图像文件扩展名格式!);
}
如果(!isLt2M) {
这个message.error(上传头像图片大小不能超过2MB！);
}
return isJPG isLt2M
},
handleCheckAllChange(val) {
this.form.area=val？城市选项：[]；
这个。is incidential=false
},
handleCheckedCitiesChange(值){
let checkedCount=value.length
这个。全部检查=检查过的计数===这个。形式。城市。长度；
这个。is incidential=检查计数0检查计数此。形式。城市。长度；
}，next() {
如果(这个。主动3)这个。active=1；
},
pre() {
如果(这个。主动-2)这个。active=1；
}
}
}
//表单射流研究…代码
/脚本
后台是用爪哇岛的嘘框架做的
包cn.com.service；
导入Java。io。io异常；
导入Java。util。列表；
导入javax。servlet。http。http servlet响应；
导入org。阿帕奇。struts 2。servletactioncontext
导入org。冬眠。查询；
导入org。冬眠。会话；
导入org。冬眠。会话工厂；
导入org。spring框架。豆子。工厂。注释。自动连线；
导入org。spring框架。语境。注释。范围；
导入org。spring框架。刻板印象。知识库；
导入org。spring框架。交易。注释。交易型；
导入cn。com。比恩。老师；
导入com。开放式交响乐。xwork 2。模型驱动；
@Repository(value=teacherUser )
@Scope(原型)
公共课教师用户实现模型驱动教师{
@自动连线
私人会议工厂；
@自动连线
私教茶；
私有列表字符串区域；
公共列表字符串getArea() {
返回区域；
}
public void setArea(ListString area){
面积=面积
}
@事务性
公共字符串regedit_user(){
//普通用户注册，用户名不能重复
会话会话=SF。getcurrentsession()；
//查询是否重复
字符串sql=来自教师，其中用户名=?；
查询查询=会话。创建查询(SQL)；
query.setString(0，tea。get username())；
老师t=(老师)查询。uniqueresult()；
字符串toast=
String [] zxs={ 国家二级咨询师,国家三级咨询师,注册系统咨询师,注册系统督导师,其他};
字符串q=
如果(t！=null){
toast=失败
}否则{
//处理数据
整数o=整数。解析int(茶。getquality())；
茶。设置质量(zxs[o])；
茶。设置区域(区域。tostring())；
toast=成功；
会话.保存(茶);
}
http servlet响应response=servletactioncontext。getresponse()；
回应。setcharacterencoding(“utf-8”)；
尝试{
response.getWriter().写字（敬酒);
} catch (IOException e) {
//TODO自动生成的捕捉块
e。printstacktrace()；
}
返回空
}
公共教师getModel() {
回茶；
}
}
以上这篇某视频剪辑软件封装面包屑组件教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。