vue3 简单v-status组件(状态样式组件)

最新推荐文章于 2024-04-27 08:14:10 发布

喜欢代码你信吗

最新推荐文章于 2024-04-27 08:14:10 发布

阅读量1.1k

点赞数 1

文章标签： vue css less

本文链接：https://blog.csdn.net/weixin_52422011/article/details/121515323

版权

<template>
    <span>
        <span class="circle" :style="{ backgroundColor: statusColor }" />
        <span class="text">{
  { statusText }}</span>
    </span>
</template>

<script>
import{ reactive,toRefs } from 'vue';
import{ cloneDeep } from 'lodash-es';
export default {
    name: 'VStatus',
    props: {
        text: {
            type: String,
            default(){
                return '状态';
            }
        },
        color: {
            type: String,
            default(){
                return '#66c56b';
            }
        }
    },
    setup(props) {
     let statusData =reactive({
     statusText: cloneDeep(props.text),
     statusColor: cloneDeep(props.color),
})
        return {...toRefs(statusData)};
    }
};
</script>

<style lang="scss" scoped>
.circle {
    width: 6px;
    height: 6px;
    b