vue使用ElementUI部分组件适配移动端问题怎么解决

组件适配1—Message 消息提示

//消息提示
this.$message({
   message:'雨伞下架成功',
   duration:1500,
   type:'success'
 })

Message 消息提示在PC端显示是非常好的：

但移动端效果就有点勉强了，宽度太长了：

适配样式代码

@media screen and (max-width: 500px) {
    .el-message {
      min-width: 300px !important;
    }
}

适配后移动端的效果是比之前好很多的：

组件适配2—MessageBox 弹框

/*退出登录*/
loginOut(){
   this.$confirm('确定退出登录吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
     this.$router.replace({name:'login'})
   })
 }

MessageBox 弹框在PC端显示是非常好的：

但移动端效果就有点勉强了，还是宽度太长了：

适配样式代码

@media screen and (max-width: 500px) {
    .el-message-box{
      width: 300px !important;
    }
  }

适配后移动端的效果是比之前好很多的：

组件适配3—Dialog 对话框

Dialog 对话框可通过自己设置top,width等控制样式，算是比较方便更改样式的一个组件了。

但为了同时适配手机和pc，还需要我们进行一些操作，尽管我将width设置为比较小的400以及对表单内的组件样式进行了一定的修改，但还是无法比较好的适配手机。

  
     
       
     
     
       
         
         
         
         
       
       {{beginWorkerError}}

     
   
   
     取 消
     确 定