2021-07-14 工作记录--修改element-ui/第三方库里面的自带样式 + vertical-align:top； + 时间线 + PC端-Element-dialog对话框-弹窗

已于 2023-02-10 16:35:22 修改
阅读量563 收藏 1
点赞数 2
分类专栏： 工作-vue 文章标签： vue
于 2021-07-26 17:04:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/119112989
版权

一、修改element-ui/第三方库里面的自带样式

第一种、没有引入less时的写法

在这里插入图片描述

第二种、引入less时的写法
方法一、/deep/

在这里插入图片描述

方法二、::v-deep

在这里插入图片描述

二、 vertical-align:top;

在这里插入图片描述
在这里插入图片描述
把第一种样式变成第二种样式的方法：
在这里插入图片描述

三、时间线

HTML：

 <div class="student_con_right common_style">
          <div class="student_career">
            <div class="student_career_header">
              <ul>
                <li>学员生涯</li>
                <li>
                  <img
                    src="../../assets/img/studentDetail/studentCareer_header_add.png"
                    alt=""
                  />
                </li>
              </ul>
            </div>
            <div class="student-career">
              <ul>
                <li>成长</li>
                <p>2021.03.02</p>
              </ul>
              <ul>
                <li>在校区报名</li>
                <p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
              </ul>
              <ul>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
                  </span>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
                  </span>
              </ul>
            </div>
            <div class="student-career">
              <ul>
                <li>成长</li>
                <p>2021.03.02</p>
              </ul>
              <ul>
                <li>在校区报名</li>
                <p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
              </ul>
              <ul>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
                  </span>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
                  </span>
              </ul>
            </div>
            <div class="student-career">
              <ul>
                <li>成长</li>
                <p>2021.03.02</p>
              </ul>
              <ul>
                <li>在校区报名</li>
                <p>在王老师XXXXXXXXXXXXXXXXXXXXXXXX</p>
              </ul>
              <ul>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_edit.png" alt="">
                  </span>
                  <span>
                    <img src="../../assets/img/studentDetail/studentCareer_delete.png" alt="">
                  </span>
              </ul>
            </div>
            <div class="student-career">
              <ul>
                <li>今日</li>
              </ul>
              <ul>
                <li><img src="../../assets/img/studentDetail/studentCareer_addThing.png" alt=""></li>
              </ul>
              <ul>
                <li>添加事迹</li>
              </ul>
            </div>
          </div>
        </div>

CSS：

li {
     list-style: none;
   }
.common_style {
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
}
// 标题
.student_con_right {
  flex: 1;
}
.student_career_header {
  margin-bottom: 2.5rem;
}
.student_career_header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.student_career_header ul li:first-child {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #525252;
}
.student_career_header ul li:last-child {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.student_career_header ul li:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
// 内容部分
.student-career{
  display: flex;
  ul{padding:0 1rem 1rem;}
  ul:first-child{
    width: 20%;
    text-align: center;
    min-width: 20%;
    p{
      font-size: 0.75rem;
      color: #525252;
      margin: 0.5rem 0;
    }
  }
  ul:nth-child(2){
    width: 60%;
    box-sizing: border-box;
    position: relative;
    p{
      font-size: 0.75rem;
      color: #999999;
      margin: 0.5rem 0;
    }
    &::before{
      content:'';
      position: absolute;
      top: 0.5rem;
      left: 0; 
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background-color: @mainColor;
    }
    &::after{
      content:'';
      position: absolute;
      left: calc(0.55rem / 2 - 1px);
      top: 1.5rem;
      height: 70%;
      width: 2px;
      background-color: @mainColor;
    }
  }
  ul:nth-child(3){
    // padding: 0 0 1rem 1rem;
    width: 20%;
    display: flex;
    span {
      display: inline-block;
      width: 1.4rem;
      height: 1.4rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.student-career:last-child{
  ul:nth-child(2){
    &::after{
      display: none;
    }
  }
  ul:nth-child(2) {
    width: 2%;
    min-width: 2%;
    li {
      padding-top: 0.2rem;
      width: 1rem;
      height: 1rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  ul:last-child {
    padding:0 0 0 0.5rem;
  }
}

结果：
在这里插入图片描述

四、 PC端-Element-dialog对话框-弹窗

举例：
在这里插入图片描述
对应代码：

  <el-button type="text" @click="dialogTableVisible = true">添加事迹</el-button>
              <el-dialog :visible.sync="dialogTableVisible">
                <div slot="title" class="title">添加事迹</div>
                <div class="customer_tracking_body">
                  <el-form
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline"
                  >
                    <el-form-item label="类型：">
                      <el-select
                        v-model="formInline.region"
                        placeholder="请选择"
                      >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="时间：">
                      <el-input
                        v-model="formInline.time"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="主题：">
                      <el-input
                        v-model="formInline.title"
                        placeholder="请输入主题"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div class="thing_content">
                    <label for="content" class="content">内容：</label>
                    <el-input
                      id="content"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                      placeholder="请输入内容"
                      v-model="textarea2"
                    >
                    </el-input>
                  </div>
                  <div class="upload_pic">
                    <label for="upload_pic" class="picture">图片：</label>
                    <el-upload
                      id="upload_pic"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                  <div class="addThings_btns">
                    <div class="confirm">
                      <p>确认添加</p>
                    </div>
                    <div class="cancel">
                      <p>取消</p>
                    </div>
                  </div>
                </div>
              </el-dialog>

在这里插入图片描述
对应代码：

gridData: [{}],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      formInline: {
        time: "",
        title: "",
        region: "",
      },
      textarea2: "",
      dialogImageUrl: "",
      dialogVisible: false,

.title {
  position: relative;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #525252;
  margin-top: 2rem;
  letter-spacing: 0.1rem;
  margin-left: 1rem;
  &:before {
    position: absolute;
    left: -1rem;
    top: 0rem;
    content: "";
    width: 3px;
    height: 23px;
    background-color: @mainColor;
  }
}
/deep/ .el-dialog__header {
  padding: 20px 30px !important;
  border-radius: 0.5rem 0.5rem 0 0;
}
/deep/ .el-dialog {
  width: 25%;
  border-radius: 0.5rem;
  margin-top: 16vh !important;
}
/deep/ .el-dialog__headerbtn {
  top: 20px;
  right: 30px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #525252;
  font-weight: 700;
}
.customer_tracking_body {
  padding: 0 1rem;
}
.content {
  padding: 0 12px 0 0;
  vertical-align: top;
}
/deep/.el-textarea {
  width: 75%;
}
.upload_pic {
  margin-bottom: 4rem;
  display: flex;
}
.picture {
  padding: 0 12px 0 0;
}
.addThings_btns {
  display: flex;
  width: 100%;
  height: 2.2rem;
  padding: 0 6rem;
  box-sizing: border-box;
  justify-content: space-between;
  .confirm {
    cursor: pointer;
    width: 6.5rem;
    height: 100%;
    text-align: center;
    background-color: @mainColor;
    border-radius: 1rem;
    p {
      line-height: 2.2rem;
      font-size: 16px;
      font-family: Source Han Sans CN;
      color: #ffffff;
      letter-spacing: 0.06rem;
    }
  }
  .cancel {
    cursor: pointer;
    width: 4.5rem;
    height: 100%;
    text-align: center;
    background-color: #c2c2c2;
    border-radius: 1rem;
    p {
      line-height: 2.2rem;
      font-size: 16px;
      font-family: Source Han Sans CN;
      color: #ffffff;
      letter-spacing: 0.06rem;
    }
  }
}
/deep/.el-input {
  font-size: 12px;
}
.thing_content {
  margin-bottom: 22px;
}
/deep/.el-upload--picture-card:hover,
.el-upload:focus {
  border-color: @mainColor;
  color: @mainColor;
}
/deep/.el-upload--picture-card {
  width: 64px;
  height: 64px;
  line-height: 73px;
}
/deep/.el-dialog__body {
  padding-bottom: 60px;
}
/deep/.el-textarea textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 14px;
  font-family: Source Han Sans CN;
  color: #c2c2c2;
}
/deep/.el-textarea textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 14px;
  font-family: Source Han Sans CN;
  color: #c2c2c2;
}
/deep/.el-textarea textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 14px;
  font-family: Source Han Sans CN;
  color: #c2c2c2;
}
/deep/.el-textarea textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 14px;
  font-family: Source Han Sans CN;
  color: #c2c2c2;
}

结果：
在这里插入图片描述
在这里插入图片描述
【补充：移动端-Popup弹出层】
在这里插入图片描述

小呀小萝卜儿
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Element Dialog水平垂直居中样式
facccccer
01-27 3299
前言 Element UI 是目前最火的前端Vue.js UI组件库，但是Dialog默认样式并不是水平垂直居中，这就很让人很尴尬。不过对于有水平垂直居中的需求来说，我们是可以自己进行调整的。最常用的方法也试过了，最终得到以下方法是最佳的（我个人感觉），接下来和大家分享一下。 一、默认样式截图   二、调整后样式截图   三、代码如下： App.vue .el-dialog__wrapper { text-align: center; white-space: nowrap
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
jsp中使用vuejs+element-ui+vuejs第三方组件
局部组件中修改第三方组件库样式（css样式穿透）
qq_45104829的博客
03-22 427
局部组件中修改第三方组件库样式（css样式穿透） 1. >>> 谨慎使用，官方文档显示会有问题，官方文档地址 2. ::v-deep .box ::v-deep .el-input__inner{ padding:5px 10px; } 3./deep/ 用法： .input-with-select /deep/ .el-input__inner{ border: 1px solid #DCDFE6; outline: none; } ...
vue+elementUI项目中修改第三方组件的样式
weixin_44039043的博客
11-20 445
关于vue style scoped中通过使用css中>>>实现样式穿透的疑问 解决方案： 通常在Vue中使用第三方组件的时候，可能会存在修改组件的样，比如home.vue中引用了swiper组件，想修改swiper组件中的小圆点的颜色，因为home.vue中的style使用了scoped属性，导致无法修改到swpier组件中的样式，这时候可以使用 >>> 实现样式穿透，使home.vue的样式能够修改到swiper中的样式。 ...
el-dialog永远垂直居中
qq_30351747的博客
08-27 3942
el-dialog永远垂直居中 .el-dialog__wrapper { margin-top: 0 !important; top: 50%; transform: translateY(-50%) }
Element UI 时间组件修改样式
weixin_56442928的博客
08-17 865
Element UI 时间组件修改样式 因工作需求需要根据后台数据在时间控件上添加样式以提示和方便用户查看数据在那一天 代码片 <template> <div> <div class="divideThe"> <div>优质睡眠时间参考范围(h)：6~8/小时</div> <div> <el-date-picker prefix-icon="el-icon-da
HTML+Element-ui邮件管理前端界面
07-12
--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/...
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
一个漂亮的前端弹窗，包含关闭按钮，样式清晰好看，可关闭弹窗
07-18
一个漂亮的前端弹窗，包含关闭按钮，样式清晰好看，可关闭弹窗
pc端确认框与提示弹框
10-27
试用与pc端确认框与提示弹框，引用之后提示弹框 $.MsgBox.Alert("删除失败");调用，确认框 $.MsgBox.Confirm("确定移出吗",function(){ //输入你要回调的内容});
19种CSS绚丽弹窗样式
04-25
包含了19种html5的弹出框样式
[日推荐]『我的时间线』记录你的生活
APPx应用魔方
09-01 3296
每天低头看手机、抬头望电脑 你有多久没有写日记了 多久没有用心记录生活的点滴 以铭记那些琐碎却又温暖的流逝光阴 用一个小程序记录你的生活——我的时间线
关于element-ui时间线以及插槽用法总结
热门推荐
qq_41860287的博客
04-26 1万+
    最近写项目用到了element-ui时间线控件，在这里记录一下用法，方便学习和查看。 首先我们看看官网给出的用法： <div class="block"> <div class="radio"> 排序： <el-radio-group v-model="reverse"> <el-radio :label="true">倒序</el-radio> <el-radio
改写element的时间线,让时间在左边显示
m0_61476911的博客
10-30 2336
时间线让时间在左边显示
自定义elementUI皮肤、色系、主题、主色调
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-09 1508
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/theme先打开上面的地址 点击下载 复制“theme”文件夹到src/css/下面 在main.js里面加入 ... //【第三方插件】-----------------------------------...
vue.js导入css库（elementUi）的方法
lzrit的博客
07-26 2946
1.安装以下模块，让webpack可以解析css文件 npm install style-loader --save-dev npm install css-loader --save-dev npm install file-loader --save-dev 2.安装elementUi模块 npm install element-ui@next -S 3.在webpack.base...
2021-08-06 工作记录--vue-解析富文本（两种方法）
weixin_48850734的博客
11-19 1万+
vue解析富文本
vue element-ui table vue-print-nb 打印预览 边框线显示不全
最新发布
05-09
这个问题可能是由于打印样式导致的。可以尝试在打印样式中添加以下代码： ... vertical-align: top; } ``` 这样可以让表格的边框线在打印时完全显示。如果问题仍然存在，可以尝试调整样式中的边框宽度和颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值