VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

最新推荐文章于 2022-07-20 10:51:33 发布

悠闲的水

最新推荐文章于 2022-07-20 10:51:33 发布

阅读量678

点赞数

本文链接：https://blog.csdn.net/idlewater/article/details/104727163

版权

接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。
开关控件（Switch）的实现效果：

在这里插入图片描述

给组件取个好听的名字，叫RxSwitch吧。调用代码：

<RxSwitch 
  :onValue = "'on-value'" 
  :offValue = "'off-value'" 
  v-model = "inputValue"
\>
</RxSwitch\>

组件代码：

<template>
  <div class="rx-switch" 
    :class="onValue === inputValue? 'on' : ''"
    @click="click">
  </div>
</template>

<script>
export default {
   
  name: 'RxSwitch',
  props: