自定义 vue switch 组件
<template>
<div class="switch clearfix"
@click="toggle"
v-bind:style="{ background: activeState ? activeColor : inActiveColor }">
<div v-show="activeState" class="switch-text switch-on"
transition="switchOn">{{activeText}}</div>
<div class="switch-icon"></div>
<div v-show="!activeState" class="switch-text switch-off">{{inActiveText}}</div>
</div>
</template> <script>
export default {
props: {
active: {
Type: Boolean,
default: false
},
activeText: {
Type: String,
default: 'onssssss'
},
activeColor: {
Type: String,
default: '#c532a3'
},
inActiveText: {
Type: String,
default: 'off'
},
inActiveColor: {
Type: String,
default: 'yellow'
}
},
data () {
return {
activeState: this.active
}
},
methods: {
toggle () {
this.activeState = !this.activeState
}
}
}
</script> <style lang="scss" scoped>
.switch{
display: inline-block;
border-radius: 15px;
box-sizing: border-box;
overflow: hidden;
& > div{
float: left;
}
.switch-text{
height: 28px;
line-height: 28px;
color: #ffffff;
font-size: 14px;
padding: 0 8px;
}
.switch-icon{
width: 26px;
height: 26px;
border-radius: 13px;
background-color: #ffffff;
border-radius: 1px solid #dcdcdc;
margin: 1px;
}
}
</style>
代码如上,引用自己引用下
自定义 vue switch 组件的更多相关文章
- 自定义vue全局组件use使用、vuex的使用
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...
- 自定义Vue&Element组件,实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
- 自定义vue全局组件use使用
自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- vue.js开发之开关(switch)组件
最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role=&quo ...
- Vue组件之自定义表单组件
今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...
- 自定义Vue组件
自定义Vue组件的三步骤 1.创建组件 2.注册组件 3.使用组件 创建组件 //创建组件 var myclock = { data(){ return { clock: new Date().toL ...
- 小程序自定义switch组件
如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和 ...
- Switch组件
Switch组件,业务需求中经常遇到.我司的旧项目中,由于没有使用较为成熟点的组件库.自己实现了一个switch组件,但是实现的略微有些丑陋. 实现基本需求 https://jsfiddle.net/ ...
随机推荐
- September 13th 2017 Week 37th Wednesday
Whenever people agree with me, I always feel I must be wrong. 每次人们赞同我时,我都觉得自己一定错了. We can draw lesso ...
- C++项目第五次作业之文件的读取
前言 乍看题目,用文件读取数据,这不是很简单的事嘛ps:以前写单个.cpp就是用freopen读取数据,然而当开始写的时候就出现了问题(什么叫做实力作死,有一种痛叫too young too simp ...
- Oracle 数据库创建(图形界面操作)
Oracle 创建数据库图文分解: 1. 选择所有程序->Oracle-OraDb11g_home1->Configuration and Migration Tools -> Da ...
- JDBC使用
在工作中碰到要向另一个数据库进行操作的需求,例如数据源为mysql的工程某个方法内需要向oracle数据库进行某些查询操作 接口类 package com.y.erp.pur.util; import ...
- logstash.conf 根据不同地址创建索引
input { http { host => "0.0.0.0" port => 9700 type => "from_ys" }}input ...
- [HNOI2003]操作系统
嘟嘟嘟 这道题就是一个模拟. 首先我们建一个优先队列,存所有等待的进程,当然第一关键字是优先级从大到小,第二关键字是到达时间从小到大.然后再建一个指针Tim,代表cpu运行的绝对时间. 然后分一下几种 ...
- Day4 JavaScript(二)dom操作
dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...
- IS服务器下做301永久重定向设置方法
以前也没怎么关注301重定向,第一因为没有网站要重定向,第二对于不带www的域名我都是用的转发到带www的域名. 不过一场风波之后,很多服务商已经不提供转发服务了,虽说易名现在还可以享用到免费的转发服 ...
- CAN--UART的协议转换器
CAN--UART的协议转换器 //------------------------------------------------------// CAN <==> UART的协议转换 ...
- C++ - 类的虚函数\虚继承所占的空间
类的虚函数\虚继承所占的空间 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24236469 char占用一个字节, 但不满足4的 ...