DDR爱好者之家

vue自定义switch开关组件,实现样式可自行更改
站长资源 2024/11/24 佚名
8 1538
DDR爱好者之家 Design By 杰米

用法：

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开关组件,实现样式可自行更改就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米