vue渐进式框架-自定义button组件

最新推荐文章于 2024-07-22 22:17:24 发布

Ai.ﻮ

最新推荐文章于 2024-07-22 22:17:24 发布

阅读量855

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_48852584/article/details/108411824

版权

本文介绍了在Vue框架中如何自定义一个button组件，包括组件的CSS和HTML代码实现。同时，探讨了如何创建自定义指令以及使用过滤器来增强应用的功能。

摘要由CSDN通过智能技术生成

自定义button组件：

全局组件：只要编译好，在任意一个vue响应式系统中都会起作用局部组件：只能在当前响应式系统中被使用

完成一个小demo，代码如下（示例）：

css代码：

.btn {
   
      line-height: 35px;
      display: inline-block;
      padding: 0 20px;
      border-radius: 5px;
      font-size: 12px;
    }
    .btn.plain {
   
      border-radius: 17.5px;
    }
    .btn.primary {
   
      background-color: blue;
      color: white;
    }
    .btn.danger {
   
      background-color: red;
      color: white;
    }
    .btn.info {
   
      background-color: rgba(144, 147, 153, 1);
      color: white;
    }
    .btn.success {
   
      background: rgba(103, 194, 58, 1);
      color: white;
    }

html代码：

<!-- 第一个vue系统 -->
  <div id="app">
    <qf-button @click='confirm' text='确定'></qf-button>
    <qf-button plain type='danger' text='删除'></qf-button>
    <qf-button