vue-tv-components

Vue TV 组件库，提供电视应用常用的 UI 组件，专为电视端操作和显示优化。

特性

• 🚀 电视端优化 - 专为电视端操作和显示优化
• 📦 组件丰富 - 提供多种常用电视端 UI 组件
• 🔧 TypeScript 支持 - 提供完整的类型定义
• 🎯 易于集成 - 支持全局注册和按需导入
• 🛠️ 自定义主题 - 支持主题定制
• 🌍 多语言支持 - 内置多语言键盘

安装

使用 npm 安装

npm install vue-tv-components

使用 yarn 安装

yarn add vue-tv-components

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VueTvComponents from 'vue-tv-components'

const app = createApp(App)
app.use(VueTvComponents)
app.mount('#app')

按需导入

import { SkyDialog, SkyConfirm, SkyToast, SkyLoading, SkyKeyboard } from 'vue-tv-components'

// 注册组件
export default {
  components: {
    SkyDialog,
    SkyConfirm,
    SkyToast,
    SkyLoading,
    SkyKeyboard
  }
}

组件文档

SkyKeyboard

虚拟键盘组件，支持多语言输入。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | v-model | string | 绑定的输入值 | '' | | lang | string | 语言类型，如 'english', 'chinese' | 'english' | | type | string | 键盘类型，可选值：'letters', 'numbers', 'punctuations' | 'letters' | | maxLength | number | 最大输入长度 | Infinity | | placeholder | string | 占位符 | '' | | disabled | boolean | 是否禁用 | false |

事件：

| 事件 | 参数 | 描述 | | --- | --- | --- | | input | value | 输入值变化时触发 | | confirm | value | 确认输入时触发 | | cancel | - | 取消输入时触发 |

使用示例：

<template>
  <SkyKeyboard
    v-model="inputValue"
    lang="chinese"
    type="letters"
    :maxLength="20"
    placeholder="请输入内容"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>

<script setup>
import { ref } from 'vue'
import { SkyKeyboard } from 'vue-tv-components'

const inputValue = ref('')

const handleConfirm = (value) => {
  console.log('确认输入:', value)
}

const handleCancel = () => {
  console.log('取消输入')
}
</script>

SkyDialog

对话框组件。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | v-model | boolean | 控制对话框显示/隐藏 | false | | title | string | 对话框标题 | '' | | width | string | 对话框宽度 | '500px' | | height | string | 对话框高度 | '300px' | | closeOnClickOutside | boolean | 点击外部是否关闭 | true |

插槽：

| 插槽 | 描述 | | --- | --- | | default | 对话框内容 | | footer | 对话框底部按钮区域 |

使用示例：

<template>
  <SkyDialog
    v-model="dialogVisible"
    title="提示"
    width="400px"
    height="200px"
  >
    <div>这是对话框内容</div>
    <template #footer>
      <button @click="dialogVisible = false">取消</button>
      <button @click="dialogVisible = false">确定</button>
    </template>
  </SkyDialog>
</template>

<script setup>
import { ref } from 'vue'
import { SkyDialog } from 'vue-tv-components'

const dialogVisible = ref(false)
</script>

SkyConfirm

确认对话框组件。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | v-model | boolean | 控制对话框显示/隐藏 | false | | title | string | 对话框标题 | '确认' | | message | string | 确认消息 | '' | | confirmText | string | 确认按钮文本 | '确定' | | cancelText | string | 取消按钮文本 | '取消' |

事件：

| 事件 | 参数 | 描述 | | --- | --- | --- | | confirm | - | 点击确认按钮时触发 | | cancel | - | 点击取消按钮时触发 |

使用示例：

<template>
  <SkyConfirm
    v-model="confirmVisible"
    title="删除确认"
    message="确定要删除此项目吗？"
    confirmText="删除"
    cancelText="取消"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>

<script setup>
import { ref } from 'vue'
import { SkyConfirm } from 'vue-tv-components'

const confirmVisible = ref(false)

const handleConfirm = () => {
  console.log('确认删除')
  confirmVisible.value = false
}

const handleCancel = () => {
  console.log('取消删除')
  confirmVisible.value = false
}
</script>

SkyLoading

加载动画组件。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | v-model | boolean | 控制加载动画显示/隐藏 | false | | text | string | 加载提示文本 | '加载中...' | | fullscreen | boolean | 是否全屏显示 | true | | background | string | 背景颜色 | 'rgba(0, 0, 0, 0.5)' |

使用示例：

<template>
  <SkyLoading
    v-model="loadingVisible"
    text="加载中，请稍候..."
    :fullscreen="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import { SkyLoading } from 'vue-tv-components'

const loadingVisible = ref(true)

// 模拟加载完成
setTimeout(() => {
  loadingVisible.value = false
}, 2000)
</script>

SkyToast

提示框组件。

方法：

| 方法 | 参数 | 描述 | | --- | --- | --- | | show | options | 显示提示框 | | success | message, duration | 显示成功提示 | | error | message, duration | 显示错误提示 | | warning | message, duration | 显示警告提示 | | info | message, duration | 显示信息提示 |

options 参数：

| 参数 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | message | string | 提示消息 | '' | | type | string | 提示类型，可选值：'success', 'error', 'warning', 'info' | 'info' | | duration | number | 显示时长（毫秒） | 3000 | | position | string | 显示位置，可选值：'top', 'bottom', 'center' | 'top' |

使用示例：

<template>
  <div>
    <button @click="showSuccess">成功提示</button>
    <button @click="showError">错误提示</button>
    <button @click="showWarning">警告提示</button>
    <button @click="showInfo">信息提示</button>
  </div>
</template>

<script setup>
import { SkyToast } from 'vue-tv-components'

const showSuccess = () => {
  SkyToast.success('操作成功')
}

const showError = () => {
  SkyToast.error('操作失败')
}

const showWarning = () => {
  SkyToast.warning('警告信息')
}

const showInfo = () => {
  SkyToast.info('提示信息')
}
</script>

Ellipsis

文本省略组件。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | text | string | 要显示的文本 | '' | | line | number | 显示的行数 | 1 | | tooltip | boolean | 是否显示 tooltip | true |

使用示例：

<template>
  <Ellipsis
    text="这是一段很长的文本，当文本长度超过指定行数时，会自动显示省略号"
    :line="2"
    :tooltip="true"
  />
</template>

<script setup>
import { Ellipsis } from 'vue-tv-components'
</script>

SkyText

文本组件，支持电视端文本优化。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | value | string | 文本内容 | '' | | size | string | 文本大小 | 'medium' | | color | string | 文本颜色 | '#333' | | bold | boolean | 是否加粗 | false | | align | string | 文本对齐方式 | 'left' |

使用示例：

<template>
  <SkyText
    value="Hello, World!"
    size="large"
    color="#ff6600"
    :bold="true"
    align="center"
  />
</template>

<script setup>
import { SkyText } from 'vue-tv-components'
</script>

Loading

加载组件，包含 LiveLoad 和 Spinner 两种样式。

属性：

| 属性 | 类型 | 描述 | 默认值 | | --- | --- | --- | --- | | type | string | 加载样式，可选值：'live', 'spinner' | 'spinner' | | size | string | 加载动画大小 | 'medium' | | color | string | 加载动画颜色 | '#ff6600' |

使用示例：

<template>
  <div>
    <Loading type="live" size="large" color="#ff6600" />
    <Loading type="spinner" size="medium" color="#333" />
  </div>
</template>

<script setup>
import { Loading } from 'vue-tv-components'
</script>

主题定制

全局主题配置

import { createApp } from 'vue'
import App from './App.vue'
import VueTvComponents from 'vue-tv-components'

const app = createApp(App)
app.use(VueTvComponents, {
  theme: {
    primaryColor: '#ff6600',
    secondaryColor: '#333',
    backgroundColor: '#fff',
    textColor: '#333',
    borderColor: '#e0e0e0'
  }
})
app.mount('#app')

局部主题配置

<template>
  <div class="custom-theme">
    <SkyButton>自定义主题按钮</SkyButton>
  </div>
</template>

<style scoped>
.custom-theme {
  --primary-color: #ff6600;
  --secondary-color: #333;
  --background-color: #fff;
  --text-color: #333;
  --border-color: #e0e0e0;
}
</style>

开发

构建项目

# 安装依赖
npm install

# 构建项目
npm run build

# 启动 demo 开发服务器
npm run dev:demo

运行测试

# 运行测试
npm test

# 运行 lint 检查
npm run lint

项目结构

components/          # 组件目录
├── Loading/        # 加载组件
├── SkyConfirm/     # 确认对话框组件
├── SkyDialog/      # 对话框组件
├── SkyKeyboard/    # 虚拟键盘组件
├── SkyLoading/     # 加载动画组件
├── SkyToast/       # 提示框组件
├── assets/         # 资源文件
├── mixins/         # 混入
├── Ellipsis.vue    # 文本省略组件
├── SkyText.vue     # 文本组件
└── index.ts        # 组件导出

src/                # 源码目录
├── router/         # 路由
├── utils/          # 工具函数
└── views/          # 示例页面

许可证

Apache-2.0 License

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

支持

如果您在使用过程中遇到问题，请：

1. 查看示例代码
2. 检查浏览器控制台错误信息
3. 提交 Issue 并提供复现步骤