图片预览
安装
引入
main.js：
1
2
3
4
| import Viewer from "v-viewer";
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer)
|
使用
使用时只需在父标签中加上 v-viewer 属性，它会自动作用于子 img 标签。
1
2
3
| <div v-viewer>
<img src="" alt=""/>
</div>
|
点击图片时就会弹出预览的界面。
MarkDown 的编辑与转换
markdown 编辑器
安装
1
| npm install mavon-editor
|
引入
main.js：
1
2
3
4
| import mavonEditor from "mavon-editor";
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
|
使用
1
| <mavon-editor placeholder="请输入文章" v-model="content"></mavon-editor>
|
写的内容都保存在了 content 中。
markdown 转 html
安装
引入
在需要使用的组件中引入：
1
| import {parse} from 'marked'
|
使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <mavon-editor placeholder="请输入文章" v-model="content"/>
<div v-html="article"></div>
<button @click="md_to_h5">
点击转换
</button>
<script>
import {parse} from 'marked'
data() {
return {
blog: '',
content: ''
}
},
methods: {
md_to_h5() {
this.blog = parse(this.content);
}
}
</script>
|
渲染出来的是默认的 markdown 样式，非常简单，可以去网上下载 css 文件，然后在组件中导入即可。
如果想让代码有高亮，可以引入 highlight.js：
1
2
3
| npm install highlight.js --save
import hljs from 'highlight.js'
import "highlight.js/styles/monokai-sublime.css";
|
然后在 marked.setOptions 中加上：
1
2
3
4
5
6
7
8
9
10
11
| <script>
import {parse， setOPtions} from 'marked'
mounted() {
setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
}
</script>
|
normalize.css
Normalize.css 是一个可以定制的 CSS 文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
Normalize.css 只是一个很小的 css 文件，但它在磨人的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。总之，Normalize.css 是一种 CSS reset 的替代方案。
安装
1
| npm install --save normalize.css
|
使用
它只是一个初始化样式，在全局导入即可。
1
| import 'normalize.css/normalize.css'
|
vue 项目国际化
这里的国际化是指网站可以通过不同的语言来展示，比如可以切换中文或者英文。
vue 项目的国际化可以通过 vue-i18n 插件来实现。接下来我们来介绍一下它的使用方法。
安装
配置
在 src 目录下新建 lang 文件夹，然后在文件夹下新建 index.js，zh.js，en.js 三个 js 文件。
zh.js 和 en.js 用来存放需要进行转换的文字内容，若还有其他语言，增加相应文件即可。
index.js 用来创建 i18n 实例，然后将其导入 main.js 中。
zh.js
1
2
3
4
5
6
| export default {
user: {
username: '用户名',
password: '密码'
}
}
|
en.js
1
2
3
4
5
6
| export default {
user: {
username: 'Username',
password: 'Password'
}
}
|
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import {createI18n} from 'vue-i18n'
import zh from './zh'
import en from './en'
const i18n = createI18n({
locale: 'zh',
globalInjection: true,
legacy: false,
messages: {
zh,
en
}
})
export default i18n
|
main.js
1
2
3
4
5
| import i18n from "./lang";
...
app.use(i18n);
...
|
使用
配置好之后就可以使用了：
1
2
3
4
5
6
7
8
9
| <p>
{{ $t('user.username') }}
</p>
<p>
{{ t('user.username') }}
</p>
|
如果想要点击切换语言，可以这样做：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <button @click='changeLang'>
点击切换语言
</button>
<script>
import {useI18n} from 'vue-i18n';
setup() {
const i18n = useI18n();
function changeLang() {
i18n.locale.value = i18n.locale.value === 'en' ? 'zh' : 'en';
}
return {
changeLang
}
}
methods: {
changeLang() {
this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
}
}
</script>
|
更多关于 vue-i18n 的用法请看 https://kazupon.github.io/vue-i18n/zh/introduction.html。
vue 图片裁剪
官网：https://github.com/xyxiao001/vue-cropper。
安装
1
| npm install vue-cropper@next
|
引入
在需要用到的组件中：
1
2
3
4
5
6
7
| import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
export default {
components:{ VueCropper },
...
}
|
使用
需在父容器上规定宽高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <div style="with:300px; height:300px">
<VueCropper
ref="cropperRef"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:maxImgSize="option.maxImgSize"
:enlarge="option.enlarge"
:mode="option.mode" />
</div>
<script>
setup() {
const const cropperRef = ref();
const option = reactive({
img: "",
outputSize: 1,
outputType: 'png',
info: true,
canScale: true,
autoCrop: true,
autoCropWidth: 230,
autoCropHeight: 230,
fixed: true,
fixedNumber: [1, 1],
full: false,
fixedBox: false,
canMove: false,
canMoveBox: true,
original: false,
centerBox: false,
height: true,
infoTrue: false,
maxImgSize: 3000,
enlarge: 1,
mode: "300px 300px"
});
function getData() {
cropperRef.value.getCropBlob(data => {
console.log(data);
})
}
return {
cropperRef,
option
}
}
</script>
|
数字滚动
项目地址 https://github.com/inorganik/countUp.js。
安装
引入
1
| import { CountUp } from "countup.js";
|
使用
1
| const countUp = new CountUp(target, number, options)
|
CountUp 类支持传入三个参数，前两个是必须的。
target：目标 dom 对象；
number：最终要滚动到的数字；
options：配置参数，包括滚动的时间等。
CountUp 对象有以下几个方法：
1
2
3
4
| countUp.start()
countUp.pauseResume()
countUp.reset()
countUp.update(1000)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<span ref="numberRefs" v-for="_ in 10">{{ Math.round(Math.random()*1000) }}</span>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { CountUp } from "countup.js";
const numberRefs = ref<HTMLSpanElement[]>([]);
onMounted(() => {
numberRefs.value.forEach(item => {
new CountUp(item, Number(item.innerText), { duration: 2 }).start();
});
});
</script>
|
vue css-in-js 库
项目地址：https://styils.github.io/styils/。
安装
引入
1
| import { styled } from "@styils/vue";
|
使用
1
2
3
4
5
6
7
8
9
10
11
12
| const MessageBox = styled("div", {
position: "absolute",
zIndex: 1000,
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "300px",
padding: "20px",
backgroundColor: "#FFFFFF"
});
return <MessageBox />
|