vue自定义element-ui日期季度组件

下图为效果图,众所周知element-ui没有季度组件,但项目上也经常会用到,需要我们自行开发。

vue自定义element-ui日期季度组件_第1张图片

 1.在components 里新建组件文件(名称自定义)

2.直接贴完整代码。(可拷贝直接用)

._mark {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0);

  z-index: 999;

}

.yearBtn {

  text-align: center;

  padding: 0;

}

.box-card {

  width: 322px;

  padding: 0 3px 20px;

  margin-top: 10px;

  position: fixed;

  z-index: 9999;

}

.text.item {

  text-align: center;

}

.text.item >>> .el-button {

  width: 40%;

  color: #606266;

}

.text.item ._left {

  float: left;

}

.text.item ._right {

  float: right;

}

3.在需要的页面引入即可使用。

 

 

 

 

你可能感兴趣的:(vue,elementui,vue,组件化)