• Vue3 简单实现虚拟Table,展示海量单词.利用WebAPI speechSynthesis,朗读英语单词

    目录

    本页面完整代码

    视频演示

    完整的页面代码

    利用webapi speechSynthesis帮助我们自动郎读英语单词，可以利用这个API，做一些小说朗读或到账提示。

     

    本页面完整代码

    用Vue写了一个简单页面，里面还写了一个简单的虚拟Table支持海量数据展示。

    视频演示

    20231106-223410

    完整的页面代码

    里面的all.js文件是英语四级的单词，在文章内自行下载，也可以去这里面把JSON下载。

    GitHub - cuttlin/Vocabulary-of-CET-4: 英语四级词库

    复制里面的代码，放到html文件就可以运行

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.  
    8.  
    9.     <script src="all.js">script>
    10.     <script src="https://cdn.jsdelivr.net/npm/vue@3.3.7/dist/vue.global.js">script>
    11.  
    12.  
    13.     <style>
    14.         body{
    15.             background-color: rgba(0,0,0,0.04);
    16.         }
    17.         .table-wrapper{
    18.             background-color: #fff;
    19.           border: solid 1px #efefef;
    20.           box-shadow: 0 0px 3px 1px rgba(0,0,0,0.05);
    21.         }
    22.         .table-wrapper table {
    23.             width: 100%;
    24.             border-spacing: 0;
    25.             table-layout: fixed;
    26.         }
    27.  
    28.         .header-table th {
    29.             background-color: #00a674;
    30.             height: 40px;
    31.             line-height: 40px;
    32.             color: rgb(158, 255, 205);
    33.         }
    34.  
    35.         .body-table td {
    36.             background-color: #fff;
    37.             text-align: center;
    38.         }
    39.  
    40.         .body-table tr:nth-of-type(n+2) td {
    41.             border-top: solid 1px rgba(0, 0, 0, 0.06);
    42.         }
    43.  
    44.         .body-table tr:hover td {
    45.             background-color: #f7f7f7;
    46.         }
    47.         .form-wrap{
    48.             background-color: #fff;
    49.             margin-bottom: 15px;
    50.             padding: 15px;
    51.             box-shadow: 0 1px 3px 1px rgba(0,0,0,0.05);
    52.         }
    53.         .table-form {
    54.             table-layout:fixed;
    55.         }
    56.         .table-form th,.table-form td{
    57.             height: 25px;
    58.             line-height: 25px;
    59.         }
    60.         .table-form th{
    61.             width: 80px;
    62.             font-weight: 400;
    63.             font-size: 14px;
    64.             text-align: right;
    65.         }
    66.         .table-form th::after{
    67.              content:':';
    68.         }
    69.     style>
    70. head>
    71. <body>
    72.  
    73.     <div id="app">
    74.     div>
    75.     <template id="tplApp">
    76.         <div>
    77.             <div class="form-wrap">
    78.                 <table class="table-form">
    79.                     <tr>
    80.                         <th>声音th>
    81.                         <td colspan="5"> <select v-model="voice.lang">
    82.                             <option v-for="(v,i) in voices" :key="v.key" :value="v.name">{{v.name}}option>
    83.                          select>td>
    84.                     tr>
    85.                     <tr>
    86.                         <th>语速th>
    87.                         <td><input v-model.number="voice.rate" type="number" min="0.1" max="10" step="0.1"/>td>
    88.                         <th>音调th>
    89.                         <td><input v-model.number="voice.pitch" type="number" min="0" max="2" step="0.1"/>td>
    90.                         <th>音量th>
    91.                         <td><input v-model.number="voice.volume" type="number" min="0" max="1" step="0.1"/>td>
    92.                     tr>
    93.                 table>
    94.             div>
    95.             div>
    96.             <Virtual-Table :columns="columns" :data-source="dataSource" row-key="word" :row-height="50" :scroll="scroll">VirtualTable>
    97.         div>
    98.     template>
    99.     <script>
    100.         const { ref, shallowRef, h, toRaw, renderSlot,reactive,shallowReactive, toRefs, toRef, computed } = Vue
    101.  
    102.  
    103.         const useVirtualList = (options) => {
    104.             const { rowHeight, height, dataSource, columnCount = 1 } = options
    105.             const scrollTop = ref(0)
    106.             const onScroll = (e) => {
    107.                 scrollTop.value = e.target.scrollTop
    108.             }
    109.             const scrollRowIndex = computed(() => {
    110.                 return Math.floor(scrollTop.value / rowHeight.value)
    111.             })
    112.             const visibilityRowCount = computed(() => {
    113.                 return Math.ceil(height / rowHeight.value)
    114.             })
    115.             const start = computed(() => {
    116.                 return scrollRowIndex.value * columnCount
    117.             })
    118.             const end = computed(() => {
    119.                 return start.value + visibilityRowCount.value * columnCount
    120.             })
    121.             const rowCount = computed(() => {
    122.                 return Math.ceil(dataSource.value.length / columnCount)
    123.             })
    124.             const scrollHeight = computed(() => {
    125.                 return rowCount.value * rowHeight.value
    126.             })
    127.             const currentList = computed(() => {
    128.                 return dataSource.value.slice(start.value, end.value)
    129.             })
    130.             const containerProps = computed(() => {
    131.                 return {
    132.                     style: {
    133.                         height: height + 'px',
    134.                         overflowY: 'auto'
    135.                     },
    136.                     onScroll: onScroll
    137.                 }
    138.             })
    139.             const invisibleHeight = computed(() => {
    140.                 return (scrollRowIndex.value * rowHeight.value)
    141.             })
    142.             const scrollProps = computed(() => {
    143.                 return {
    144.                     style: {
    145.                         height: scrollHeight.value + 'px',
    146.                         paddingTop: invisibleHeight.value + 'px',
    147.                         boxSizing: 'border-box',
    148.                     },
    149.                 }
    150.             })
    151.             return [{
    152.                 containerProps,
    153.                 scrollProps,
    154.                 data: currentList
    155.             }]
    156.         }
    157.         const VirtualTable = {
    158.             props: ['columns', 'rowKey', 'dataSource', 'scroll', 'rowHeight'],
    159.             setup(props, { slots }) {
    160.                 const rowHeight = toRef(props, 'rowHeight')
    161.                 console.log('rowHeight',rowHeight.value)
    162.                 const scroll = props.scroll
    163.                 const rowKey = props.rowKey
    164.                 const columns = toRef(props, 'columns')
    165.                 const dataSource = toRef(props, 'dataSource')
    166.                 const [{ containerProps, scrollProps, data: currentData }] = useVirtualList({
    167.                     rowKey: rowKey,
    168.                     rowHeight: rowHeight,
    169.                     height: scroll.y,
    170.                     dataSource: dataSource
    171.                 })
    172.                 const renderCol = (columns) => {
    173.                     return h('colgroup', {}, columns.map((c, i) => {
    174.                         return h('col', {
    175.                             key: c.dataIndex || i,
    176.                             style: {
    177.                                 ...(c.width ? { width: c.width + 'px' } : {})
    178.                             }
    179.                         })
    180.                     }))
    181.                 }
    182.                 const renderHeader = (columns) => {
    183.                     return h('thead', {}, h('tr', {}, columns.map((c, i) => {
    184.                         return h('th', {
    185.                             key: c.dataIndex || i,
    186.                         }, c.title)
    187.                     })))
    188.                 }
    189.                 const renderCell = (columns, dataItem) => {
    190.                     return columns.map((c, i) => {
    191.                         return h('td', {
    192.                             key: c.dataIndex || i,
    193.                         }, c.render ? c.render(dataItem[c.dataIndex], dataItem, i) : dataItem[c.dataIndex])
    194.                     })
    195.                 }
    196.                 const renderRow = (data) => {
    197.                     return h('tbody', {}, data.map((d, i) => {
    198.                         return h('tr', {
    199.                             key: d[rowKey],
    200.                             style: {
    201.                                 height: rowHeight.value + 'px'
    202.                             }
    203.                         }, renderCell(columns.value, d))
    204.                     }))
    205.                 }
    206.                 return () => {
    207.  
    208.                     return h('div', {
    209.                         class: 'table-wrapper'
    210.                     },
    211.                         h('div', {
    212.                             class: 'header-wrap'
    213.                         }, h('table', {
    214.                             class: 'header-table'
    215.                         },
    216.                             renderCol(columns.value),
    217.                             renderHeader(columns.value),
    218.                         )),
    219.                         h('div', {
    220.                             class: 'body-wrap',
    221.                             ...containerProps.value
    222.                         }, h('div', {
    223.                             class: 'body-scroll-wrap',
    224.                             ...scrollProps.value
    225.                         },
    226.                             h('table', {
    227.                                 class: 'body-table'
    228.                             },
    229.                                 renderCol(columns.value),
    230.                                 renderRow(currentData.value))
    231.                         ))
    232.                     )
    233.                 }
    234.             }
    235.         }
    236.         const app = Vue.createApp({
    237.             template: '#tplApp',
    238.             components:{
    239.                 VirtualTable:VirtualTable
    240.             },
    241.             setup() {
    242.  
    243.                 const voices=shallowRef([])
    244.                 const voice=shallowReactive({
    245.                     lang:"",
    246.                     pitch:1,
    247.                     rate:1,
    248.                     volume:1
    249.                 })
    250.                 
    251.                 speechSynthesis.addEventListener('voiceschanged', () => {
    252.                         voices.value = speechSynthesis.getVoices()
    253.                         voice.lang=voices.value[0].name
    254.                 })
    255.                 // 语音合成
    256.                 const speak=(word, options = {})=> {
    257.  
    258.                     return new Promise((resolve, reject) => {
    259.                         const utterThis = new SpeechSynthesisUtterance(word);
    260.                         for (let i = 0; i < voices.value.length; i++) {
    261.                             if ( voices.value[i].name === voice.lang) {
    262.                                 utterThis.voice =  voices.value[i];
    263.                             }
    264.                         }
    265.                         utterThis.pitch = voice.pitch;
    266.                         utterThis.rate = voice.rate;
    267.                         utterThis.volume = voice.volume
    268.                         utterThis.onend = function () {
    269.                             resolve()
    270.                         }
    271.                         utterThis.onerror = (e) => {
    272.                             reject(e)
    273.                         }
    274.                         speechSynthesis.speak(utterThis);
    275.  
    276.                     })
    277.  
    278.                 }
    279.                 const columns = shallowRef([
    280.                     {
    281.                         title: '单词',
    282.                         dataIndex: 'word',
    283.                         width: 220
    284.                     },
    285.                     {
    286.                         title: '音标',
    287.                         dataIndex: 'phonetic_symbol',
    288.                         width: 220
    289.                     },
    290.                     {
    291.                         title: '中文意思',
    292.                         dataIndex: 'mean'
    293.                     },
    294.                     {
    295.                         title: '操作',
    296.                         width: 160,
    297.                         render(v, record) {
    298.                             return h('div',{
    299.  
    300.                             },h('button', {
    301.                                 onClick: () => {
    302.                                     speak(record.word)
    303.                                 }
    304.                             }, '朗读单词'),h('button', {
    305.                                 style:{
    306.                                     marginLeft:'5px'
    307.                                 },
    308.                                 onClick: () => {
    309.                                     speak(record.mean)
    310.                                 }
    311.                             }, '朗读中文'))
    312.                         }
    313.                     }
    314.                 ])
    315.                 const dataSource = shallowRef(english_word_cet4_all)
    316.                 return {
    317.                     voices,
    318.                     voice,
    319.                     dataSource,
    320.                     columns:columns,
    321.                     scroll:{
    322.                         y:window.innerHeight-150
    323.                     }
    324.                 }
    325.                
    326.             }
    327.         })
    328.  
    329.         app.mount('#app')
    330.     script>
    331. body>
    332. html>

  • 相关阅读:
    k8s-NFS系统配置
    Ranger (五) --------- 使用 Ranger 对 Hive 进行权限管理
    选错毕业第一份工作，我白干半年
    【java基础面试题】jdk、jre、jvm区别
    Python中的函数
    求告知识图谱构建工具
    【51】分布式计算：如果所有人的大脑都联网会怎样？
    SAP 物料分类账配置详解Part 1（ 基于SAP S/4HANA1909 版本）
    前端实现给文字添加动态背景
    pip某些包发生SSL错误
  • 原文地址：https://blog.csdn.net/long5305350/article/details/51500673