vue自定义switch开关组件,实现样式可自行更改

用法:

import switchc from './public/switch'
<switchc v-model="value1" text="on|off"></switchc>

属性

text 非必填,类型为string,要求格式为“on|off” ,以 | 分隔

事件

change

html部分:

<template>
 <div>
   <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
  <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
  {{direction[0]}}
  </div>
  <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">
  {{direction[1]}}
  </div>
   </span>
 </div>
</template>

js部分:

<script>
 export default {
 name: 'switchComponent',
 props: {
    value: {
     type: Boolean,
     default: true
    },
    text: {
    type: String,
    default: ''
    }
   },
 data () {
  return {
  isChecked: this.value
  }
 },
 computed: {
  direction () {
  if (this.text) {
   return this.text.split('|')
  } else {
   return []
  }
  }
 },
 watch: {
     value (val) {
      this.isChecked = val
     },
    isChecked(val) {
     this.$emit('change', val);
    }
   },
   methods: {
    toggle() {
     this.isChecked = !this.isChecked;
    }
   }
 }
</script>

style部分:

<style>
 .weui-switch {
   display: block;
   position: relative;
   width: 52px;
   height: 24px;
   border: 1px solid #DFDFDF;
   outline: 0;
   border-radius: 16px;
   box-sizing: border-box;
   background-color: #DFDFDF;
   transition: background-color 0.1s, border 0.1s;
   cursor: pointer;
  }
  .weui-switch:before {
   content: " ";
   position: absolute;
   top: 0;
   left: 0;
   width: 50px;
   height: 22px;
   border-radius: 15px;
   background-color: #FDFDFD;
   transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  }
  .weui-switch:after {
   content: " ";
   position: absolute;
   top: 0;
   left: 0;
   width: 22px;
   height: 22px;
   border-radius: 15px;
   background-color: #FFFFFF;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }
  .weui-switch-on {
   border-color: #6F6F6F;
   background-color: #1AAD19;
  }
  .weui-switch-on:before {
   border-color: #1AAD19;
   background-color: #409eff;
  }
  .weui-switch-on:after {
   transform: translateX(28px);
  }
</style>

以上这篇vue自定义switch开关组件,实现样式可自行更改就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现导航栏的显示开关控制

    一,制作导航栏 <template> <div class="space_header_text"> <ul> <router-link to="/order"> <li class="nav-item"> <div :class="['iconfont','interval','iconClass']"></div> 订单 </li&

  • Vue2实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

  • 详解VUE里子组件如何获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件

  • vue自定义switch开关组件,实现样式可自行更改

    用法: import switchc from './public/switch' <switchc v-model="value1" text="on|off"></switchc> 属性 text 非必填,类型为string,要求格式为"on|off" ,以 | 分隔 事件 change html部分: <template> <div> <span class="weui-swi

  • vue.js封装switch开关组件的操作

    我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t

  • 使用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

  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>

  • Vue自定义多选组件使用详解

    本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下 子组件(选项卡) checkBoxCard.vue <template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </d

  • VUE 自定义取色器组件的实现

    本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1.点击色块中任何一点,色块中的正方形显示该点的颜色. 2.点击色块上方的颜色圆点,色块选中该颜色所在的位置,并在正方形中显示相应颜色. 3.上方圆点如果不是rgb格式,需要转换. 4.组件的大小从调用它的页面中传过去. 组件代码(CanvasColor2.vue): <template> <!--    <div>-->     <div id='outDiv' style=&

  • vue自定义翻页组件的方法

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

  • Vue自定义全局弹窗组件操作

    写在前面 页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了 效果图 弹窗组件 新建一个弹窗的组件--popup.vue <template> <transition name='fade'> <!-- 蒙版 --> <div class="mask" v-if="show" @touchmove

  • vue自定义封装按钮组件

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

随机推荐