vue自定义封装按钮组件

2024-12-12 18:22:08

vue按钮组件的自定义封装代码，供大家参考，具体内容如下

封装按钮组件 button.vue

<template>
  <button class="button ellipsis" :class="[size,type]">
    <slot />
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    size: {
      type: String,
      default: 'middle'
    },
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>
<style scoped lang="less">
.button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.small {
  width: 100px;
  height: 32px;
  font-size: 14px;
}
.mini {
  width: 60px;
  height: 32px;
  font-size: 14px;
}
.default {
  border-color: #e4e4e4;
  color: #666;
}
.primary {
  border-color: #27BA9B;;
  background: #27BA9B;;
  color: #fff;
}
.plain {
  border-color:#27BA9B;;
  color:#27BA9B;;
  background: lighten(#27BA9B;,50%);
}
.gray {
  border-color: #ccc;
  background: #ccc;;
  color: #fff;
}
</style>

封装组件的使用

<Button type="primary" style="margin-top:20px;">自定义按钮名字</Button>
<Button type="primary" style="margin-top:20px;">加入购物车</Button>

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue组件中点击按钮后修改输入框的状态实例代码

最近写一个这样的页面要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>
vue 开发一个按钮组件的示例代码

最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法来达到点击提交改变按钮状态,如果不成功则取消按钮状态在src/components/ 下建一个button.vue <template>   <!-- state切换button的
vue 点击按钮实现动态挂载子组件的方法

Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数示例:子组件 byMount.vue <template> <div> <div>mount content test!!</div> </div> </template&
vue点击按钮动态创建与删除组件功能

主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示点击右侧创建的组件中的删除按钮,删除对应的组件删除对应的组件之后,下方的组件位置自动上移效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>
详解vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中父组件 <template> <div id="app&qu
Vue波纹按钮组件制作

先说一下用法: <zk-button class="btn btn-default">默认按钮</zk-button> <zk-button class="btn btn-default btn-round">默认按钮</zk-button> <zk-button class="btn btn-default btn-round" :speed="4" :opacity=&
vue 表单验证按钮事件交由父组件触发的方法

vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> <FormItem label="Age" prop="age"> <Input type="
vue实现密码显示与隐藏按钮的自定义组件功能

思路实现该组件有两个思路,一个使用v-model进行双向绑定,一个是使用prop的.sync修饰符.父子组件通信. 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误.子组件中定义inputvalue字段,用于子组件中input元素的值的双向绑定,子组件中的input数据绑定可以使用v-model,也可以使用实现v-model的原理语法糖,下面两种方式
vue自定义封装按钮组件

vue按钮组件的自定义封装代码,供大家参考,具体内容如下封装按钮组件 button.vue <template> <button class="button ellipsis" :class="[size,type]"> <slot /> </button> </template> <script> export default { name: 'Button', props: { size:
vue如何自定义封装API组件

目录自定义封装API组件 1.创建vue组件 2.创建Alter.js生成组件 3.导入Vue 如何封装使用api形式调用的vue组件子组件父组件自定义封装API组件 1.创建vue组件 <template> <div > <div class="alert"> <div class="alert-main" v-for="item in notices"
vue自定义封装指令以及实际使用

目录前言封装指令基础钩子函数钩子函数参数实际使用复制指令(v-copy) 单击复制双击复制点击icon复制 handleClick 逻辑完整代码权限操作指令(v-hasPermi) 总结前言 vue默认内置了v-model.v-if.v-show.v-html.v-text等指令,但是这些往往不足以满足我们实际项目开发中的场景,比如权限控制按钮.路由菜单,复制文字等功能,就需要我们自己自定义一些满足我们项目需求的指令了,那怎么封装自定义指令,并使用呢?我们先从封装指令的基础
vue如何使用vue slot封装公共组件

目录使用vue slot封装公共组件使用slot插槽封装使用vue slot封装公共组件公用子组件:publicSlot <div> <div class="top"> <h1 class="title">{{title}}</h1> <slot name="headerRight"> 可以根据你slot nam
基于Vue如何封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
使用Vue自定义数字键盘组件(体验度极好)

为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错. 废话不多说,先上效果图吧~ 效果图具体实现布局排版 <div class='key-container'> <div class='key-title'>请输入金额</div> <div class='input-box'>{{ money }}</div> <div class='keyboard' @click.stop='_handleKeyPress'
使用Vue 自定义文件选择器组件的实例代码

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm
vue自定义翻页组件的方法

本文实例为大家分享了vue自定义翻页组件的具体代码,供大家参考,具体内容如下效果图如下: 1.在components建立page.vue文件 <template> <div class="pagination">  <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">

vue自定义封装按钮组件

相关推荐

随机推荐