vue弹窗样式

 记录一下最近写的弹窗样式

代码

<el-dialog
        width="70%"
        title=""
        :visible.sync="innerVisible"
        append-to-body
        class="inner-dialog"
        style=""
      >

        <div style="display: flex;
          width: 100%;
          
          flex-direction: column;
          align-items: flex-start;
          gap: 24px;">

          <div style="display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            align-self: stretch;">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                <g clip-path="url(#clip0_8833_140445)">
                  <path d="M5.33398 21.3327V29.3327H26.6673V21.3327C26.6673 19.866 25.4673 18.666 24.0007 18.666H8.00065C6.53398 18.666 5.33398 19.866 5.33398 21.3327ZM24.0007 23.9993H8.00065V21.3327H24.0007V23.9993ZM16.0007 2.66602C12.3207 2.66602 9.33398 5.65268 9.33398 9.33268L16.0007 18.666L22.6673 9.33268C22.6673 5.65268 19.6806 2.66602 16.0007 2.66602ZM16.0007 14.666L12.0007 9.33268C12.0007 7.11935 13.7873 5.33268 16.0007 5.33268C18.214 5.33268 20.0007 7.11935 20.0007 9.33268L16.0007 14.666Z" fill="#0E0F0F"/>
                </g>
                <defs>
                  <clipPath id="clip0_8833_140445">
                    <rect width="32" height="32" fill="white"/>
                  </clipPath>
                </defs>
              </svg>
            </div>

            <div style="color: var(--cool-gray-700, #374151);
              text-align: center;
              /* text-lg/Medium */
              font-family: Inter;
              font-size: 18px;
              font-style: normal;
              font-weight: 500;
              line-height: 28px; /* 155.556% */">
              確認更改?
            </div>

            <div style="color: var(--cool-gray-500, #6B7280);
              text-align: center;
              /* text-sm/Regular */
              font-family: Inter;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: 20px; /* 142.857% */">
              請輸入保安編碼以確認操作
            </div>

            <div style="display: flex;
              padding: 0px 96px;
              flex-direction: column;
              align-items: flex-start;
              gap: 8px;
              align-self: stretch;">

              <div style="display: flex;
                align-items: flex-start;
                align-self: stretch;
                color: var(--primary-dark, #FBA429);

                /* text-sm/Medium */
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px; /* 142.857% */">
                Security Code
              </div>
              <div></div>
              <el-input
                class="custom-input"
                placeholder="請輸入密碼"
                v-model="securityguardPassword"
                :type="isPasswordVisible ? 'text' : 'password'"
              >
                <template v-slot:append>
                  <i
                    class="el-input__icon el-icon-view custom-eye-icon"
                    :class="{ 'el-icon-view-show': isPasswordVisible }"
                    @click="togglePasswordVisibility"
                  ></i>
                </template>
              </el-input>

            </div>

          </div>

          <div>
            <span slot="footer" 
              class="dialog-footer" 
              style="display: flex;
              justify-content: center;
              align-items: center;
              gap: 16px;
              align-self: stretch;">
              <el-button @click="innerVisible = false" class="cancelButton">取 消</el-button>
              <el-button type="primary" @click="addChangePoints('form')" class="confirmButton"
                >確 定
              </el-button>
            </span>
          </div>

        </div>

      </el-dialog>

css

//彈窗整體邊框
.inner-dialog ::v-deep .el-dialog{
  border-radius: 20px;
  background: var(--sky-white-white, #FFF);

  /* Shadow/Large */
  box-shadow: 0px 1px 24px 8px rgba(20, 20, 20, 0.08);
}

//去掉頭部
.inner-dialog ::v-deep .el-dialog__header{
  padding: 0;
}
//整體padding
.inner-dialog ::v-deep .el-dialog__body{
  padding: 24px;
}

//輸入框整體
.custom-input {
  border-radius: 4px;
  border: 1px solid var(--primary-dark, #FBA429);
  background: var(--white, #FFF);
  /* shadow-base */
  box-shadow: 0px 1px 2px 0px rgba(31, 41, 55, 0.08);
}

//輸入框
.custom-input ::v-deep .el-input__inner {
  border: none;
  color: #D1D5DB;
  /* text-sm/Regular */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
//顯示密碼
.custom-input ::v-deep .el-input-group__append{
  border: none;
  background-color: #fff;
}
//確認按鈕
.confirmButton{
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: var(--primary-dark, #FBA429);
  border: none;
  color: var(--ink-base, #0E0F0F);

  /* text-sm/Regular */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
//取消按鈕
.cancelButton{
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--cool-gray-200, #E5E7EB);
  background: var(--white, #FFF);
  color: var(--cool-gray-700, #374151);

  /* text-sm/Regular */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

js隐藏输入框示例

<template>
  <div>
    <el-input
      placeholder="請輸入密碼"
      v-model="securityguardPassword"
      :type="isPasswordVisible ? 'text' : 'password'"
    >
      <template v-slot:append>
        <i
          class="el-input__icon el-icon-view"
          :class="{ 'el-icon-view-show': isPasswordVisible }"
          @click="togglePasswordVisibility"
        ></i>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      securityguardPassword: '',
      isPasswordVisible: false
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.isPasswordVisible = !this.isPasswordVisible;
    }
  }
};
</script>