阅读器主题设置功能实现 --项目开发记录（9）

最新推荐文章于 2025-04-10 10:21:18 发布

原创最新推荐文章于 2025-04-10 10:21:18 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

vue阅读项目记录与总结专栏收录该内容

18 篇文章

订阅专栏

博客介绍了电子书主题设置的功能点与实现步骤。功能上，点击菜单栏小太阳出现设置框，电子书用addStylesheet方法，自建组件控制css样式。实现步骤包括创建组件、添加事件、生成主题列表、提取初始化方法、存放css方法及添加切换主题方法等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能点：

点击菜单栏的小太阳，出现主题设置框；
电子书由于在ifram中所以我们还是需要通过addStylesheet方法实现
标题等我们自己建立的组件通过控制css样式就可以实现

实现步骤

创建EbookSettingTheme.vue组件
通过menuVisible && settingVisible === 1来显示
给EbookMenu组件中的小太阳添加showSetting(1)事件，并传入1
在EbookMenu组件中引入EbookSettingTheme.vue组件

在utils文件夹下的book.js中添加themeList数组，生成主题列表

export function themeList(vue) {
   return [
     {
       alias: vue.$t('book.themeDefault'),
       name: 'Default',
       style: {
         body: {
           'color': '#4c5059',
           'background': '#cecece',
           'padding-top': `${realPx(48)}px!important`,
           'padding-bottom': `${realPx(48)}px!important`
         },
         img: {
           'width': '100%'
         },
         '.epubjs-hl': {
           'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
         }
       }
     },
     {
       alias: vue.$t('book.themeGold'),
       name: 'Gold',
       style: {
         body: {
           'color': '#5c5b56',
           'background': '#c6c2b6',
           'padding-top': `${realPx(48)}px!important`,
           'padding-bottom': `${realPx(48)}px!important`
         },
         img: {
           'width': '100%'
         },
         '.epubjs-hl': {
           'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
         }
       }
     },
     {
       alias: vue.$t('book.themeEye'),
       name: 'Eye',
       style: {
         body: {
           'color': '#404c42',
           'background': '#a9c1a9',
           'padding-top': `${realPx(48)}px!important`,
           'padding-bottom': `${realPx(48)}px!important`
         },
         img: {
           'width': '100%'
         },
         '.epubjs-hl': {
           'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
         }
       }
     },
     {
       alias: vue.$t('book.themeNight'),
       name: 'Night',
       style: {
         body: {
           'color': '#cecece',
           'background': '#000000',
           'padding-top': `${realPx(48)}px!important`,
           'padding-bottom': `${realPx(48)}px!important`
         },
         img: {
           'width': '100%'
         },
         '.epubjs-hl': {
           'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
         }
       }
     }
   ]
 }

初始化主题在EbookReader组件中

        initTheme() {
            // 获得缓存主题的值
            let themes = getTheme();
            if(!themes){
                // themes = 'Default'
                saveTheme(this.defaultTheme)
            }
            this.setDefaultTheme(themes);
            this.themeList.forEach(theme => {
                this.rendition.themes.register(theme.name,theme.style)
            })
            this.rendition.themes.select(themes)
            this.initAllTheme(themes)
        },
        // 电子书渲染完成后，获取本地缓存，没有就创建，有就根据本地缓存出初始化字体
        this.rendition.display().then(() => {
            this.initFont();
            this.initTheme();
        });

因为初始化菜单栏主题在EbookSettingTheme.vue组件中我们也有用到，所以我们可以将其提取到utils文件下的mixin.js文件中的methods方法中,别忘记引入下面创建的utils.js文件

import { addCss,removeCss,removeAllCss } from './utils'
//初始化并设置主题
// 菜单栏主题
initAllTheme(theme) {
   // 先清除所有的css样式
   removeAllCss();
   // 根据主题名字添加不同的样式
   switch (theme) {
      case 'Default':
         addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)
         break
      case 'Eye':
         addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`)
         break
      case 'Gold':
         addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`)
         break
      case 'Night':
         addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)
          break
      default:
          this.setDefaultTheme('Default')
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)
           break
     }
},

在utils文件夹下创建utils.js文件，存放有关css的js方法

export function px2rem(px) {
  const ratio = 375 / 10
  return px / ratio
}

export function realPx(px) {
  const maxWidth = window.innerWidth > 500 ? 500 : window.innerWidth
  return px * (maxWidth / 375)
}

export function addCss(href) {
  const link = document.createElement('link')
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('type', 'text/css')
  link.setAttribute('href', href)
  document.getElementsByTagName('head')[0].appendChild(link)
}

export function removeCss(href) {
  const link = document.getElementsByTagName('link')
  for (var i = link.length; i >= 0; i--) {
    if (link[i] && link[i].getAttribute('href') != null && link[i].getAttribute('href').indexOf(href) !== -1) {
      link[i].parentNode.removeChild(link[i])
    }
  }
}

export function removeAllCss() {
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`)
  removeCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)
}

初始化完成后，在EbookSettingTheme.vue组件中添加切换主题的方法

setTheme(name) {
  this.setDefaultTheme(name).then(() => {
    saveTheme(this.defaultTheme)
    this.currentBook.rendition.themes.select(this.defaultTheme)
    this.initAllTheme(this.defaultTheme)
  })
}