vue使用less编写模态框样式案例

系统管理员 2021-07-24 16:03 235阅读 0赞

模态框组件

<template>
      <div id="app">
        <div class='alert'>
            <div class='zhezhao'>
                <div class='alertMain'>
                  <div class='title'>
                      温馨提示:{ { title}}
                  </div>
                  <div class='content'>
                      { { content}}
                  </div>
                  <div class='btnList'>
                      <div class='btn cancel' @click='cancel'>取消</div>
                      <div class="btn confirm" @click='confirm'>确认</div>
                  </div>
                </div>
            </div>
        </div>
    
      </div>
    </template>
    
    <script>
    
    export default { 
      name: 'alert',
      data()
      { 
        return{ 
    
        }
      },
      props:['title','content','cancel','confirm']
    }
    </script>
    
    <style scoped lang='less'>
    @theme-color:orange;
    @default-size:18px;
    @font-color:#fff;
    @zhezhao-opacity:0.6;
    
    .fullScreen(){ 
      width:100vw;
      height: 100vh;
      display: flex;
    }
    .defaultPadding{ 
      padding: 10px;
    }
    .button(@padding:20px){ 
      padding:@padding;
      text-align: center;
    }
    .alert{ 
      .fullScreen;
      .zhezhao{ 
        .fullScreen;
        background-color: rgba(0,0,0,@zhezhao-opacity);
        justify-content:center;
        align-items:center;
    
      }
      .alertMain{ 
        width:600px;
        height: 400px;
        background-color: #fff;
         position: relative;
        .title{ 
          font-size: @default-size;
          height: 50px;
          background-color: @theme-color;
          flex-direction:column;
          color:@font-color;
          .defaultPadding;
          text-align: left;
          line-height: 50px;
          font-weight: 900;
        }
        .content{ 
          .defaultPadding();
          font-size: @default-size;
        }
        .btnList{ 
          position: absolute;
          left:0;
          bottom:0;
          display: flex;
          width:100%
        }
        .btn{ 
          .button();
          width: 50%;
        }
        .cancel{ 
          background-color:pink;
    
        }
        .confirm{ 
          background-color: greenyellow;
        }
    
      }
    }
    
    </style>

App.vue文件:

<template>
      <div id="app">
    
        <Alert :title='title' :content='content' :cancel='cancel' :confirm='confirm' v-if='isAlert'/>
    
      </div>
    </template>
    
    <script>
    import Alert from './components/Alert'
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          title:'跳转页面',
          content:'是否跳转至百度',
          isAlert:true
        }
      },
      components:{ 
        Alert
      },
      methods:{ 
        cancel()
        { 
          this.isAlert=false;
        },
        confirm()
        { 
          location.href='http://www.baidu.com'
        }
      }
    }
    </script>
    
    <style scoped lang='less'>
    
    *{ 
      margin:0;
      padding: 0;
    }
    
    
    </style>