如何使用Vue封装Switch组件

最新推荐文章于 2023-05-05 13:43:32 发布

原创

最新推荐文章于 2023-05-05 13:43:32 发布 · 565 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #封装组件

本文详细介绍如何使用Vue.js创建一个可复用的Switch开关组件，包括组件的模板、样式及逻辑处理。通过v-model双向绑定，实现开关状态的动态变化，并在父组件中处理开关状态的逻辑。

实现Switch开关

<template>
  <div>
    <span 
      class="weui-switch"  // 初始样式
      :class="{'weui-switch-on' : me_checked}"  // 选中样式
      :value="value" 
      @click="toggle" // 点击切换
    ></span>
  </div>
</template>

<script>
  export default {
  // 接收数据 这步可有可无 也可以不用传递直接在这个封装的组件中去写
  // 因为后面有$emit 派发事件呢，可直接在其调用的组件中去书写业务逻辑
    props: {
      value: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        me_checked: this.value
      }
    },
    // 监听状态改变 使用 $emit 派发事件
    watch: {
      me_checked(val) {
        this.$emit('input', val);
      }
    },
    methods: {
    // 点击切换状态
      toggle() {
        this.me_checked = !this.me_checked;
      }
    }
  }
</script>

<style>
// 这里写的最多的就是css样式了
/* 初始样式 */
  .weui-switch {
    display: block;
    position: relative;
    width: 52px;
    height: 32px;
    border: 1px solid #DFDFDF;
    outline: 0;
    border-radius: 16px;