Vue封装组件-按钮-LjButton

痛定思痛。 2022-09-03 04:28 363阅读 0赞

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70

使用：

  1. <!--menu5-->
  2. <template>
  3.   <div class="menu5">
  4.     <div>
  5.       <LjButton @click="dialogVisible = true">打开弹出框</LjButton>
  6.     </div>
  7.     <el-dialog
  8.       title="提示"
  9.       :visible.sync="dialogVisible"
  10.       width="30%"
  11.       :modal-append-to-body="false"
  12.     >
  13.       <span>这是一段信息</span>
  14.       <span slot="footer" class="dialog-footer">
  15.         <LjButton
  16.           style="margin: 0 10px"
  17.           type="danger"
  18.           @click="dialogVisible = false"
  19.           >取 消</LjButton
  20.         >
  22.         <LjButton type="primary" @click="dialogVisible = false">确 定</LjButton>
  23.       </span>
  24.     </el-dialog>
  26.     <div>
  27.       <p>
  28.         <LjButton>默认按钮</LjButton>
  29.         <LjButton type="primary">主要按钮</LjButton>
  30.         <LjButton type="success">成功按钮</LjButton>
  31.         <LjButton type="info">信息按钮</LjButton>
  32.         <LjButton type="warning">警告按钮</LjButton>
  33.         <LjButton type="danger">危险按钮</LjButton>
  34.       </p>
  35.       <p>
  36.         <LjButton size="large">large按钮</LjButton>
  37.         <LjButton size="medium">medium按钮</LjButton>
  38.         <LjButton size="small">small按钮</LjButton>
  39.         <LjButton size="mini">mini按钮</LjButton>
  40.       </p>
  41.       <p>
  42.         <LjButton type="default" disabled>默认按钮</LjButton>
  43.         <LjButton type="primary" disabled>主要按钮</LjButton>
  44.         <LjButton type="success" disabled>成功按钮</LjButton>
  45.         <LjButton type="info" disabled>信息按钮</LjButton>
  46.         <LjButton type="warning" disabled>警告按钮</LjButton>
  47.         <LjButton type="danger" disabled>危险按钮</LjButton>
  48.       </p>
  49.       <p>
  50.         <LjButton round>默认按钮</LjButton>
  51.         <LjButton type="primary" round>主要按钮</LjButton>
  52.         <LjButton type="success" round>成功按钮</LjButton>
  53.         <LjButton type="info" round>信息按钮</LjButton>
  54.         <LjButton type="warning" round>警告按钮</LjButton>
  55.         <LjButton type="danger" round>危险按钮</LjButton>
  56.       </p>
  57.       <p>
  58.         <LjButton round size="large">默认按钮</LjButton>
  59.         <LjButton type="primary" round size="large">主要按钮</LjButton>
  60.         <LjButton type="success" round size="large">成功按钮</LjButton>
  61.         <LjButton type="info" round size="medium">信息按钮</LjButton>
  62.         <LjButton type="warning" round size="small">警告按钮</LjButton>
  63.         <LjButton type="danger" round size="mini">危险按钮</LjButton>
  64.       </p>
  65.       <p>
  66.         <LjButton type="text">文字按钮</LjButton>
  67.         <LjButton type="text" size="large">文字按钮</LjButton>
  68.         <LjButton type="text" size="medium">文字按钮</LjButton>
  69.         <LjButton type="text" size="small">文字按钮</LjButton>
  70.         <LjButton type="text" size="mini">文字按钮</LjButton>
  71.       </p>
  72.       <p>
  73.         <LjButton type="text" disabled>禁用文字按钮</LjButton>
  74.         <LjButton type="text" size="large" disabled>禁用文字按钮</LjButton>
  75.         <LjButton type="text" size="medium" disabled>禁用文字按钮</LjButton>
  76.         <LjButton type="text" size="small" disabled>禁用文字按钮</LjButton>
  77.         <LjButton type="text" size="mini" disabled>禁用文字按钮</LjButton>
  78.       </p>
  79.       <p>
  80.         <LjButton icon="el-icon-upload"></LjButton>
  81.         <LjButton icon="el-icon-upload">默认按钮</LjButton>
  82.         <LjButton
  83.           >默认按钮<i class="el-icon-upload el-icon--right"></i
  84.         ></LjButton>
  85.       </p>
  86.       <p>
  87.         <LjButton :loading="true">默认按钮</LjButton>
  88.       </p>
  89.       <p>
  90.         <LjButton circle size="large" icon="el-icon-search"></LjButton>
  91.         <LjButton
  92.           type="primary"
  93.           circle
  94.           size="large"
  95.           icon="el-icon-edit"
  96.         ></LjButton>
  97.         <LjButton
  98.           type="success"
  99.           circle
  100.           size="large"
  101.           icon="el-icon-check"
  102.         ></LjButton>
  103.         <LjButton
  104.           type="info"
  105.           circle
  106.           size="medium"
  107.           icon="el-icon-message"
  108.         ></LjButton>
  109.         <LjButton
  110.           type="warning"
  111.           circle
  112.           size="small"
  113.           icon="el-icon-star-off"
  114.         ></LjButton>
  115.         <LjButton
  116.           type="danger"
  117.           circle
  118.           size="mini"
  119.           icon="el-icon-delete"
  120.         ></LjButton>
  121.       </p>
  122.       <p>
  123.         <LjButton square size="large" icon="el-icon-search"></LjButton>
  124.         <LjButton
  125.           type="primary"
  126.           square
  127.           size="large"
  128.           icon="el-icon-edit"
  129.         ></LjButton>
  130.         <LjButton
  131.           type="success"
  132.           square
  133.           size="large"
  134.           icon="el-icon-check"
  135.         ></LjButton>
  136.         <LjButton
  137.           type="info"
  138.           square
  139.           size="medium"
  140.           icon="el-icon-message"
  141.         ></LjButton>
  142.         <LjButton
  143.           type="warning"
  144.           square
  145.           size="small"
  146.           icon="el-icon-star-off"
  147.         ></LjButton>
  148.         <LjButton
  149.           type="danger"
  150.           square
  151.           size="mini"
  152.           icon="el-icon-delete"
  153.         ></LjButton>
  154.       </p>
  155.     </div>
  156.   </div>
  157. </template>
  159. <script>
  160. import LjButton from "@/components/LjButton/index.vue";
  161. import LjDialog from "@/components/LjDialog/index.vue";
  163. export default {
  164.   name: "menu5",
  165.   components: { LjButton, LjDialog },
  166.   props: {},
  167.   data() {
  168.     return {
  169.       dialogVisible: false,
  170.     };
  171.   },
  172.   computed: {},
  173.   created() {},
  174.   mounted() {},
  175.   filters: {},
  176.   methods: {},
  177.   watch: {},
  178. };
  179. </script>
  181. <style lang="scss" scoped>
  182. .menu5 {
  183.   display: grid;
  184.   grid-template-columns: 1fr 1fr;
  185.   p {
  186.     margin: 40px 0;
  187.     display: flex;
  188.     gap: 10px;
  189.   }
  190. }
  191. </style>

LjButton.vue:

  1. <!--LjButton-->
  2. <template>
  3.   <div class="LjButton">
  4.     <span
  5.       :class="[
  6.         typeClass,
  7.         sizeClass,
  8.         roundClass,
  9.         disabledClass,
  10.         circleClass,
  11.         squareClass,
  12.       ]"
  13.       @click="clickButton()"
  14.     >
  15.       <span v-if="loading" style="padding: 2px">
  16.         <i class="el-icon-loading"></i>
  17.       </span>
  18.       <span v-else-if="icon" style="padding: 2px"><i :class="icon" /></span>
  19.       <slot></slot>
  20.     </span>
  21.   </div>
  22. </template>
  24. <script>
  25. export default {
  26.   name: "LjButton",
  27.   components: {},
  28.   props: {
  29.     type: {
  30.       type: String,
  31.       default: "",
  32.     },
  33.     size: {
  34.       type: String,
  35.       default: "",
  36.     },
  37.     disabled: {
  38.       type: Boolean,
  39.       default: false,
  40.     },
  41.     round: {
  42.       type: Boolean,
  43.       default: false,
  44.     },
  45.     icon: {
  46.       type: String,
  47.       default: "",
  48.     },
  49.     loading: {
  50.       type: Boolean,
  51.       default: false,
  52.     },
  53.     circle: {
  54.       type: Boolean,
  55.       default: false,
  56.     },
  57.     square: {
  58.       type: Boolean,
  59.       default: false,
  60.     },
  61.   },
  62.   data() {
  63.     return {};
  64.   },
  65.   computed: {
  66.     typeClass() {
  67.       return {
  68.         "LjButton-default": this.type === "" || this.type === "default",
  69.         "LjButton-primary": this.type === "primary",
  70.         "LjButton-warning": this.type === "warning",
  71.         "LjButton-success": this.type === "success",
  72.         "LjButton-info": this.type === "info",
  73.         "LjButton-danger": this.type === "danger",
  75.         "LjButton-text": this.type === "text",
  76.       };
  77.     },
  78.     sizeClass() {
  79.       return {
  80.         "LjButton-size-large": this.size === "large",
  81.         "LjButton-size-medium": this.size === "" || this.size === "medium",
  82.         "LjButton-size-small": this.size === "small",
  83.         "LjButton-size-mini": this.size === "mini",
  84.       };
  85.     },
  86.     disabledClass() {
  87.       if (this.disabled) {
  88.         return { "LjButton-disabled": true };
  89.       }
  90.     },
  91.     roundClass() {
  92.       if (this.round) {
  93.         return { "LjButton-round": true };
  94.       }
  95.     },
  96.     circleClass() {
  97.       if (this.circle) {
  98.         return { "LjButton-circle": true };
  99.       }
  100.     },
  101.     squareClass() {
  102.       if (this.square) {
  103.         return { "LjButton-square": true };
  104.       }
  105.     },
  106.   },
  107.   created() {},
  108.   mounted() {},
  109.   filters: {},
  110.   methods: {
  111.     clickButton() {
  112.       this.$emit("click"); //没有这个的话，组件在使用click点击事件时需要加上native,即@click.native="xxx"
  113.     },
  114.   },
  115.   watch: {},
  116. };
  117. </script>
  119. <style lang="scss" scoped>
  120. $color-default: #1dcbf3;
  121. $color-primary: #1dcbf3;
  122. $color-warning: orange; //#f56c6c
  123. $color-success: #67c23a; //#f56c6c
  124. $color-info: #909399;
  125. $color-danger: red;
  127. $bgColor-primary: rgba(0, 183, 255, 0.3);
  128. $bgColor-warning: rgba(255, 166, 0, 0.3);
  129. $bgColor-success: rgba(103, 194, 58, 0.3); //#f56c6c
  130. $bgColor-info: rgba(144, 147, 153, 0.3); //#f56c6c
  131. $bgColor-danger: rgba(255, 0, 0, 0.3); //#f56c6c
  133. .LjButton {
  134.   display: inline-block;
  135.   caret-color: transparent;
  137.   .LjButton-default {
  138.     border: 1px solid white;
  139.     color: white;
  140.     &:hover {
  141.       cursor: pointer;
  142.       color: $color-default;
  143.       border: 1px solid $color-default;
  144.     }
  145.   }
  146.   .LjButton-primary {
  147.     border: 1px solid $color-primary;
  148.     color: $color-primary;
  149.     &:hover {
  150.       cursor: pointer;
  151.       background-color: $bgColor-primary;
  152.     }
  153.   }
  154.   .LjButton-warning {
  155.     border: 1px solid $color-warning;
  156.     color: $color-warning;
  157.     &:hover {
  158.       cursor: pointer;
  159.       background-color: $bgColor-warning;
  160.     }
  161.   }
  162.   .LjButton-success {
  163.     border: 1px solid $color-success;
  164.     color: $color-success;
  165.     &:hover {
  166.       cursor: pointer;
  167.       background-color: $bgColor-success;
  168.     }
  169.   }
  170.   .LjButton-info {
  171.     border: 1px solid $color-info;
  172.     color: $color-info;
  173.     &:hover {
  174.       cursor: pointer;
  175.       background-color: $bgColor-info;
  176.     }
  177.   }
  178.   .LjButton-danger {
  179.     border: 1px solid $color-danger;
  180.     color: $color-danger;
  181.     &:hover {
  182.       cursor: pointer;
  183.       background-color: $bgColor-danger;
  184.     }
  185.   }
  186.   .LjButton-text {
  187.     color: white;
  188.     &:hover {
  189.       cursor: pointer;
  190.       color: $color-default;
  191.     }
  192.   }
  193.   //size
  194.   .LjButton-size-large {
  195.     font-size: 20px;
  196.     padding: 11px 16px;
  197.   }
  198.   .LjButton-size-medium {
  199.     font-size: 18px;
  200.     padding: 9px 13px;
  201.   }
  202.   .LjButton-size-small {
  203.     font-size: 16px;
  204.     padding: 6px 9px;
  205.   }
  206.   .LjButton-size-mini {
  207.     font-size: 14px;
  208.     padding: 4px 6px;
  209.   }
  210.   //disabled
  211.   .LjButton-disabled {
  212.     color: gray;
  213.     &:hover {
  214.       cursor: not-allowed;
  215.     }
  216.   }
  217.   //round
  218.   .LjButton-round {
  219.     border-radius: 10px;
  220.   }
  221.   //circle
  222.   .LjButton-circle {
  223.     border-radius: 50%;
  224.     padding: 7px;
  225.   }
  226.   //square
  227.   .LjButton-square {
  228.     border-radius: 20%;
  229.     padding: 7px;
  230.   }
  231. }
  232. </style>

发表评论

表情：
评论列表 （有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue封装组件的过程

    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素，封装可重用代码 ● 在较高层面上，组件是自定义元素，Vue.

    桃扇骨桃扇骨/ 0 赞/ 363 阅读

    相关 Vue封装树形菜单组件

    csdn终于更新完成了哈，ok，步入正题 像这种树形结构的核心思想就是：递归思想，知道使用递归，其实这个例子函数的封装也就很简单喽  实现步骤：            

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 413 阅读