vue3加TypeScript注册全局组件复选框

最新推荐文章于 2024-08-11 10:45:57 发布

全栈^_^小菜鸟

最新推荐文章于 2024-08-11 10:45:57 发布

阅读量359

点赞数 2

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/m0_68331234/article/details/125959545

版权

这篇博客介绍了如何创建一个自定义的公共组件——XtxCheckbox，包括选中和未选中时的定制样式。组件使用了Vue的模板、样式和脚本语法，通过点击事件处理选中状态，并通过`v-model`与父组件通信。在父组件中，展示了如何引入并使用该复选框组件，以及如何绑定初始值。

摘要由CSDN通过智能技术生成

公共组件复选框组件

背景：选中，未选中的样式是定制的
基本样式

<script lang="ts" setup name="XtxCheckbox"></script>

<template>
  <div class="xtx-checkbox">
   <!-- 选中图标 -->
    <i class="iconfont icon-checked"></i>
    <!-- 为选中图标 -->
    <i class="iconfont icon-unchecked"></i>
    <span>提示文本</span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>

全局注册


import XtxCheckbox from '@/components/XtxCheckbox/XtxCheckbox.vue'
export default {
  install(app: App) {
    app.component('XtxCheckbox', XtxCheckbox)
  }
}

具体代码

<script lang="ts" setup name="XtxCheckbox">

// 接收传过来的值
const {modelValue} = defineProps<{
  modelValue:boolean
}>()

const emit = defineEmits<{(e: 'update:modelValue', val: boolean): void}>()
const hClick = ()=>{
  // 通知父组件取反
 emit('update:modelValue',!modelValue)
}
</script>

<template>
  <div class="xtx-checkbox">
    <!-- 选中图标 -->
    <i @click="hClick" class="iconfont icon-checked" v-if="modelValue" ></i>
    <!-- 为选中图标 -->
    <i @click="hClick" class="iconfont icon-unchecked" v-else></i>
    <span><slot/></span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>

父组件使用

<script setup lang='ts'>
import { ref } from 'vue';

const isAgree = ref(true)
</script>

<template>
    <div>
      <!-- 复选框组件 -->
      <!-- 千玺是插槽 -->
     <XtxCheckbox v-model="isAgree">千玺</XtxCheckbox>
    </div>
</template>

<style lang='less' scoped>

</style>