Vue3-StatusIndicator是一个基于Vue3的组件，用于在Vue项目中显示状态指示灯。它支持多种颜色和样式，可以根据需要自定义状态指示灯的颜色、大小、位置等属性。

在Vue3.2.37版本中，可以通过以下步骤安装和使用Vue3-StatusIndicator：

1. 首先，确保已经安装了Vite3.0.0版本。可以通过以下命令进行安装：

npm install -g create-vite@latest

2. 创建一个新的Vue项目，使用Vite3.0.0作为脚手架：

create-vite@latest my-vue-project

cd my-vue-project

3. 在`src/components`目录下创建一个名为`StatusIndicator.vue`的文件，并添加以下代码：

  

    

      

    

    

      

    

  







import { defineComponent } from 'vue'

import StatusIcon from './StatusIcon.vue'



export default defineComponent({

  components: {

    StatusIcon,

  },

  data() {

    return {

      isOn: false,

    }

  },

})







.status-indicator {

  position: relative;

  width: 40px;

  height: 40px;

  border-radius: 50;

  background-color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 16px;

  color: #333;

  transition: all 0.3s ease;

}



.status-icon {

  position: absolute;

  top: 50;

  left: 50;

  transform: translate(-50, -50);

  font-size: 18px;

  color: #333;

}

4. 在`src/App.vue`文件中引入并使用`StatusIndicator`组件：

  

    

  







import { defineComponent } from 'vue'

import StatusIndicator from './components/StatusIndicator.vue'



export default defineComponent({

  components: {

    StatusIndicator,

  },

})

5. 运行项目，你将看到一个状态指示灯显示在页面上。通过修改`isOn`变量的值，可以控制状态指示灯的显示和隐藏。vue3版本状态指示灯, vue3.2.37 + vite3.0.0