waim-snippets

waim-snippets 是一组用于快速搭建业务页面的 VS Code 用户代码片段，支持 TDesign/TD 和 Element UI 框架，包含 Vue、JavaScript、Element 和 TDesign 相关模板。

使用方式

在 .vue、.html 或 .js 文件中输入片段前缀，然后按 Tab 或 Enter 展开代码片段。

在 Vue 的 <script setup lang="ts"> 中，可以输入 td-message 展开 TDesign 二次确认框脚本片段。

TDesign 代码片段

TDesign 片段主要面向 tdesign-vue-next 业务页面，使用前建议先在项目全局样式文件中加入下方公共样式。例如可以放到 src/styles/tdesign-custom.less，再在入口文件中统一引入。

这些样式需要作为全局样式使用，不建议放在 scoped 样式块中。

.tag-custom {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 3px;
}

.tag-success {
  color: #15d18c;
  background-color: #defced;
}

.tag-primary {
  color: #3556f5;
  background-color: #e8f0ff;
}

.error-text {
  color: #ff4d4f;
}

.success-text {
  color: #15d18c;
}

.t-form__item-label {
  align-items: center;
}

.t-input__inner::placeholder {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.32);
}

.t-input .t-input__suffix.t-input__suffix-icon > .t-icon {
  color: [#333333](https://github.com/weiguoqiang921/waim-snippets/issues/333333);
}

.t-image__wrapper {
  background-color: transparent;
}

.tdesign-starter-layout {
  height: calc(100vh - var(--td-comp-size-xxxl) - 85px) !important;
  padding-right: 10px;
}

.t-tree {
  .t-checkbox__input {
    border-radius: 3px !important;
    /* 改回方形的圆角，通常是 2px 或 0 */
  }

  .t-is-checked {
    background-color: transparent !important;
    color: inherit !important;
  }
}

.t-input-number.number {
  width: 100%;
}

.custom-switch.t-switch.t-is-checked {
  background-color: #15d18c;
}

// 二次确认自定义样式
.plugin-dialog-custom {
  .t-dialog--default {
    width: 320px;
    background-color: #f0f0f0;
  }

  .t-dialog__close {
    display: none;
  }

  .t-dialog__body {
    font-size: 12px;
    padding: 10px 0 20px;
  }

  .t-dialog__footer {
    width: 100%;

    div {
      display: flex;
      justify-content: space-between;
      gap: 16px;

      .t-button {
        width: 50%;
        height: 40px;
        background-color: #ffffff;
        color: [#000000](https://github.com/weiguoqiang921/waim-snippets/issues/000000);
        border: 1px solid #ffffff;
        border-radius: 6px;
      }

      .t-button--theme-danger {
        color: #ff4252;
      }
    }
  }
}

// 弹窗自定义样式
.dialogcustom {
  --td-radius-default: 9px;

  .t-dialog--default {
    padding: 0;
  }

  .t-dialog__header {
    padding: 14px 24px;
    position: relative;
    display: flex;
    align-items: center;

    .t-dialog__close {
      position: absolute;
      left: 24px;
      color: [#000](https://github.com/weiguoqiang921/waim-snippets/issues/000);
    }

    .t-dialog__header-content {
      margin-left: 24px;
      font-size: 14px;
    }
  }

  .t-dialog__body {
    background-color: #f0f0f0;
    padding: 40px;
  }

  .t-dialog__footer {
    background-color: #f0f0f0;
    border-bottom-left-radius: var(--td-radius-large);
    border-bottom-right-radius: var(--td-radius-large);
  }

  &_footer {
    padding: 0 40px 40px;
    display: flex;
    justify-content: space-between;
    gap: 16px;

    button {
      width: 130px;
    }

    &_cancel {
      background-color: #ffffff;
    }
  }
}

.drawercustom {
  --td-radius-default: 9px;

  .t-drawer__content-wrapper {
    min-width: 400px;
  }

  .t-drawer--default {
    padding: 0;
  }

  .t-drawer__header {
    padding: 14px 24px;
    position: relative;
    display: flex;
    align-items: center;
    // margin-left: 24px;
    font-size: 14px;
  }

  &_close {
    cursor: pointer;
  }

  .t-drawer__close-btn {
    position: absolute;
    left: 24px;
    color: [#000](https://github.com/weiguoqiang921/waim-snippets/issues/000);
    cursor: pointer;
  }

  .t-drawer__body {
    background-color: #f0f0f0;
    padding: 30px;
  }

  .t-drawer__footer {
    background-color: #f0f0f0;
    border-bottom-left-radius: var(--td-radius-large);
    border-bottom-right-radius: var(--td-radius-large);
  }

  &_footer {
    // padding: 0 40px 40px;
    display: flex;
    justify-content: space-between;
    gap: 16px;

    button {
      width: 50%;
    }

    &_cancel {
      background-color: #ffffff;
    }
  }
}

TDesign 片段前缀