!77 【bugfux】修复代码高亮显示build打包发布后样式消失问题

Merge pull request !77 from xiaomaiyun/master
pull/78/MERGE
小诺 2022-12-20 02:03:06 +00:00 committed by Gitee
commit f00a8786c4
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 29 additions and 8 deletions

View File

@ -1,7 +1,7 @@
<template>
<!-- 本组件这兄弟写的很好 请参照https://blog.csdn.net/weixin_41897680/article/details/124925222-->
<div class="hljs-container" :codetype="props.language">
<highlightjs :language="props.language" :autodetect="false" :code="props.code"></highlightjs>
<highlightjs :language="props.language" :autodetect="!props.language" :code="props.code"></highlightjs>
</div>
</template>
@ -13,7 +13,7 @@
const props = defineProps({
language: {
type: String,
default: () => 'JavaScript'
default: () => undefined
},
code: {
type: String,

View File

@ -5,7 +5,7 @@ import { hasPerm } from './utils/permission/index'
import errorHandler from './utils/errorHandler'
import customIcons from './assets/icons/index.js'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsCommon from 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
import STable from './components/Table/index.vue'
import Ellipsis from './components/Ellipsis/index.vue'
@ -28,6 +28,8 @@ export default {
// 统一注册自定义全局图标
app.use(customIcons)
// 注册代码高亮组件 博客https://blog.csdn.net/weixin_41897680/article/details/124925222
// 注意解决Vue使用highlight.js build打包发布后样式消失问题原因是webpack在打包的时候没有把未被使用的代码打包进去因此在此处引用一下看似无意义实则有用
hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value
app.use(hljsVuePlugin)
// 全局代码错误捕捉

View File

@ -1,13 +1,33 @@
<template>
<a-card class="snowy-right-card-one" :bordered="false">
<template #cover>
<a-carousel class="snowy-right-card-one" autoplay arrows>
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
<left-circle-outlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow" style="right: 10px">
<right-circle-outlined />
</div>
</template>
<img
src="/src/assets/images/index_001.png"
class="carousel-images"
@click="leaveForOpen('https://www.xiaonuo.vip')"
/>
</template>
</a-card>
<img
src="/src/assets/images/index_002.png"
class="carousel-images"
@click="leaveForOpen('https://www.xiaonuo.vip')"
/>
<!--
<img v-for="(item, index) in carouselList"
:src="item.images"
class="carousel-images"
@click="leaveForOpen(item.url)"
/>
-->
</a-carousel>
</template>
<script setup name="carousel">

View File

@ -98,7 +98,6 @@
}
]
buttonApi.buttonDelete(params).then((res) => {
message.success(res.msg)
table.value.refresh(true)
})
}