Vue简单练习封装button按钮 直接上代码和效果图

最新推荐文章于 2022-07-05 10:20:32 发布
最新推荐文章于 2022-07-05 10:20:32 发布
阅读量755 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42201272/article/details/105073960
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 公共样式 */
      .common {
        height: 40px;
        width: 110px;
        background-color: #fff;
        outline: none;
        border: 1px solid #ccc;
        cursor: pointer;
        border-radius: 10px;
      }
      /* 默认事件样式 */
      .el-button--default:active,
      .el-button--default:focus,
      .el-button--default:hover {
        border: 1px solid #3a8ee6;
        color: #3a8ee6;
        background-color: #c6e2ff;
      }
      /* 朴素事件样式 */
      .el-button--default.is-plain:active,
      .el-button--default.is-plain:focus,
      .el-button--default.is-plain:hover {
        background: #fff;
        border-color: #3a8ee6;
        color: #3a8ee6;
      }
      /* 圆角弧度 */
      .is-round {
        border-radius: 20px;
      }
      /* primary */
      .el-button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
      }
      .el-button--primary:focus,
      .el-button--primary:hover,
      .el-button--primary:active {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
      }
      .el-button--primary.is-plain {
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
      }
      .el-button--primary.is-plain:active,
      .el-button--primary.is-plain:focus,
      .el-button--primary.is-plain:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
      }

      /* success */
      .el-button--success {
        color: #fff;
        background-color: #5daf34;
        border-color: #5daf34;
      }

      .el-button--success:focus,
      .el-button--success:hover,
      .el-button--success:active {
        background: #67c23a;
        border-color: #67c23a;
        color: #fff;
      }
      .el-button--success.is-plain {
        color: #67c23a;
        background: #f0f9eb;
        border-color: #c2e7b0;
      }
      .el-button--success.is-plain:active,
      .el-button--success.is-plain:focus,
      .el-button--success.is-plain:hover {
        background: #67c23a;
        border-color: #67c23a;
        color: #fff;
      }

      /* info */
      .el-button--info {
        color: #fff;
        background-color: #909399;
        border-color: #909399;
      }
      .el-button--info:focus,
      .el-button--info:hover,
      .el-button--info:active {
        background: #82848a;
        border-color: #82848a;
        color: #fff;
      }
      .el-button--info.is-plain {
        color: #909399;
        background: #f4f4f5;
        border-color: #d3d4d6;
      }
      .el-button--info.is-plain:active,
      .el-button--info.is-plain:focus,
      .el-button--info.is-plain:hover {
        background: #82848a;
        border-color: #82848a;
        color: #fff;
      }
      /* warning */
      .el-button--warning {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
      .el-button--warning:focus,
      .el-button--warning:hover,
      .el-button--warning:active {
        background: #cf9236;
        border-color: #cf9236;
        color: #fff;
      }
      .el-button--warning.is-plain {
        color: #e6a23c;
        background: #fdf6ec;
        border-color: #f5dab1;
      }
      .el-button--warning.is-plain:active,
      .el-button--warning.is-plain:focus,
      .el-button--warning.is-plain:hover {
        background: #cf9236;
        border-color: #cf9236;
        color: #fff;
      }
      .top,
      .middle,
      .middle2 {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>只带type属性</h3>
      <div class="top">
        <!-- 只带type属性的样式 -->
        <el-button>
          Top center
        </el-button>

        <el-button type="primary">
          Top center
        </el-button>
        <el-button type="success">
          Top center
        </el-button>
        <el-button type="info">
          Top center
        </el-button>
        <el-button type="warning">
          Top center
        </el-button>
      </div>
      <h3>带type、primary属性</h3>
      <div class="middle">
        <!-- 带type、primary属性 -->

        <el-button plain>
          Top center
        </el-button>

        <el-button type="primary" plain>
          Top center
        </el-button>
        <el-button type="success" plain>
          Top center
        </el-button>
        <el-button type="info" plain>
          Top center
        </el-button>
        <el-button type="warning" plain>
          Top center
        </el-button>
      </div>
      <h3>带type、primary、round属性</h3>
      <div class="middle2">
        <!--  带type、primary、round属性-->

        <el-button plain round>
          Top center
        </el-button>

        <el-button type="primary" plain round>
          Top center
        </el-button>
        <el-button type="success" plain round>
          Top center
        </el-button>
        <el-button type="info" plain round>
          Top center
        </el-button>
        <el-button type="warning" plain round>
          Top center
        </el-button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.component('el-button', {
        props: {
          // 基础
          type: {
            type: String
          },
          //   朴素
          plain: {
            type: Boolean
          },
          //   圆角弧度
          round: Boolean
        },
        data() {
          return {
            classArr: ['common']
          }
        },
        // 获取到dom节点未解析时加入样式
        beforeMount() {
          console.log(this.plain)
          // 判断时候有类型
          if (this.type) {
            //   判断是否加圆角边框
            this.round
              ? this.classArr.push('is-round')
              : this.classArr.push('el-button--' + this.type)
            //   有加入类型
            this.classArr.push('el-button--' + this.type)
            // 判断是否有plain
            if (this.plain) {
              // 有 没有背景色
              this.classArr.push('el-button--' + this.type, 'is-plain')
            } else {
              // 没有 有背景色
              this.classArr.push('el-button--' + this.type)
            }
          } else {
            //   判断是否加圆角边框
            this.round
              ? this.classArr.push('is-round')
              : this.classArr.push('el-button--' + this.type)
            //   没有使用默认类型
            // 判断是否有plain
            if (this.plain) {
              this.classArr.push('el-button--default', 'is-plain')
            } else {
              this.classArr.push('el-button--default')
            }
          }
        },
        template: `
                <div>
                    <button :class='classArr'>
                        <slot></slot>
                    </button>
                </div>
            `
      })

      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>



## 效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200324160323316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjIwMTI3Mg==,size_16,color_FFFFFF,t_70#pic_center)
JQ...
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue的上传+预览图片（类似于微信的发布动态）
09-28
基本思路就是先写好基本样式（遮罩啊等等）然后通过当前图片点击获取到图片路径的集合，拿到集合后写个轮播，并且通过一个布尔值控制遮罩层的显示和隐藏。 好吧以上是我的意淫。试了以后是有效果。但是不完美，图片放大事件啥的不知道咋弄，后来用了个比较成熟的PhotoSwipe,研究了一番加上自己稍微的小修改做出来了。给它个赞吧。
TagsView.vue 有效果图
Dream_xun的专栏
10-18 4264
先上代码，项目结构图和效果图在后面展示。 1.TagsView.vue &lt;template&gt; &lt;div class="tags-view-container"&gt; &lt;scroll-pane class="tags-view-wrapper" ref="scrollPane"&gt; &lt;router
HTML5+CSS3实现的响应式垂直时间轴
weixin_30820151的博客
09-13 896
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示：HTML5+CSS3实现的响应式垂直时间轴</titl...
vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了
小马哥的天涯
03-26 4196
这里 其实 涉及到了  vue生命周期     当我们 引入jq   是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得       所以  我们让jq 生效  必须在生命周期内     我们在这里 可以利用 vue生命周期   把jQuery中的代码放到mounted中  此时  就可以 生效了看下图...
vue代码练习及效果图
curry_zhao的博客
02-07 1357
{{ message }}   Reverse Message         Hello Kitty!       Now you see me!         {{ todo.text }}           Vue.component('todo-item', { props: ['todo'],   template
vue2简单封装轮播图组件
03-20
轮播图组件，实现左右滑动，自动无限无缝轮播，点击事件
Vue封装Swiper实现图片轮播效果
10-18
图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。感兴趣的朋友跟随脚本之家小编一起学习吧
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 （1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果） 三、js代码 <!--轮播图...
vue基于v-charts封装双向条形图的实现代码
01-19
通过重新封装可以实现双向条形图的显示 既可以横向比较同一天的收入支出情况 也可以竖向比较不同日期的收入/支出情况 我们先来准备数据源: { columns: [日期, 收入, 支出], rows: [ { 日期: 8/7, 收入: -233...
Vue机场大屏滚动效果(1)
weixin_45828554的博客
10-05 405
Vue机场大屏滚动效果(1) 效果图： 把如下的代码，复杂到 html 文件中，并运行，就能看到上图的滚动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沿圆形轨迹运动</title> <style type="text/css"> * { margin: 0;
vue 绘制词云图效果
funny_girl的博客
06-08 1435
最近接到一个需求：绘制类似词云图的效果，效果图如下： 尝试了很多方式，最后选择用echart的wordCloud。 代码如下： html： <div ref="keyWords"></div> js： initCharts () { let myChart = this.$echarts.init(this.$refs.keyWords) console.log(this.$refs.chart) myChart.setOption({ series: [{
vue+echarts散点图和涟漪效果图
周家大小姐
06-16 1156
散点图控制气泡效果,散点大小不同,散点颜色不同,涟漪动画效果
vue结合GoJS作流程图效果图
Bay 丶
07-26 5334
vue结合GoJS作流程图效果图
烟花晚霞星空特效-vue
泡椒猪肝的博客
01-29 4340
效果图： 晚霞星空效果图-vue： 源代码: <template> <div class="body"> <div class="stars" ref="starsRef"> <div class="star" v-for="(item, index) in starsCount" :key="index"></div> </div> </div> </template> <scri
教你使用Vue实战笔记本案例（效果图+贡献所有代码）
一颗剽悍的种子的博客
07-19 2415
一篇教你使用Vue做个笔记本小项目，实现了添加笔记，渲染笔记内容，统计行数，统计字数，以及清空所有笔记。
【Vue】搭建动态路由实现简单效果图
源僧
07-05 532
作为一个新手小白，本文章主要是实现一个简单的动态路由效果，主要是为了快速实现效果，文章内容只为了参考复述只为了记录，不作其它的，所有的目录结构均参考抄录 第二步：剔除的eslint及删除多余路由 引入依赖，运行项目 打包 运行 可以看到效果图 第四步：修改生产和开发环境 第五步：修改登录接口和获取用户信息接口 第六步：修改actions里面的login接口地址,根据字段正确存储token 第七步：修改getters.js存储信息 第八步：修改request.js 第九步：新增导入组件的方法 /
VUE列表左滑动出编辑、删除按钮（效果图+完整代码）
卡卡西：一个擅长拷贝的前端程序员
09-25 3835
这两天遇到个需求，一个数据列表，单条数据左滑动出现编辑、删除按钮，右滑动重新隐藏，点击时先判断是否显示删除按钮，显示的话先隐藏，附效果图如下： 思路： 操作盒子（编辑+删除）定位到列表盒子的最右边； 监听touch事件，根据开始和结束时X坐标的变化判断是左滑动还是右滑动； 通过给列表盒子动态绑定class（通过transform设置位置变化，显露出操作盒子）； view： ...
Vue实现购物车效果
weixin_43966487的博客
01-21 983
Vue实现购物车效果（增删） 1.先贴出效果图： 2.先在Vue实例里编写数据 3.居然有了数据，就是在html中关联数据，让他呈现在表格中，这段代码放在html的中 4.现在布局和数据都有了，剩下的计时实现方法的定义 4.1先看实现总价显示的代码 4.2数量增加和减少的代码 ...
手风琴效果（vue实现）
Yanfengting的博客
10-03 9243
效果图： 源码1： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;am
vue2.0使用组件封装一个button按钮且可以使用单击事件
最新发布
05-17
好的，以下是一个简单的示例： 1. 首先，在你的组件文件中，可以定义一个名为 `MyButton.vue` 的组件，以封装你的按钮。 ```html <template> <button @click="handleClick" class="my-button"> <slot></slot> </button> </template> <script> export default { name: "MyButton", methods: { handleClick() { this.$emit("click"); } } }; </script> <style> .my-button { background-color: #f7f7f7; color: #333; border: 1px solid #ccc; padding: 5px 10px; border-radius: 4px; cursor: pointer; } </style> ``` 2. 在你的父组件中，你可以使用 `MyButton` 组件，并监听 `click` 事件。 ```html <template> <div> <my-button @click="handleClick">点击我</my-button> </div> </template> <script> import MyButton from "@/components/MyButton.vue"; export default { components: { MyButton }, methods: { handleClick() { console.log("按钮被点击了！"); } } }; </script> ``` 这样，你就可以通过使用 `MyButton` 组件来创建一个按钮，并在父组件中监听它的 `click` 事件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值