Vue插件

图片预览

安装
1
npm install v-viewer
引入

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
npm install marked
引入

在需要使用的组件中引入:

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() {
// parse 只接受字符串
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"; // 引入高亮样式 这里我用的是sublime样式

然后在 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 插件来实现。接下来我们来介绍一下它的使用方法。

安装
1
npm install 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, // 若要在 setup 中使用 i18n 需设置为 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>
/* vue3 */
import {useI18n} from 'vue-i18n';

setup() {
const i18n = useI18n();
function changeLang() {
// i18n.locale 是一个响应性的 ref 对象
i18n.locale.value = i18n.locale.value === 'en' ? 'zh' : 'en';
}

return {
changeLang
}
}

/* vue2 */
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, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式(jpeg || png || webp)
info: true, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: 230, //默认生成截图框宽度
autoCropHeight: 230, //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例
full: false, //false按原比例裁切图片,不失真
fixedBox: false, //固定截图框大小,不允许改变
canMove: false, //上传图片是否可以移动
canMoveBox: true, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: false, //true为展示真实输出图片宽高,false展示看到的截图框宽高
maxImgSize: 3000, //限制图片最大宽度和高度
enlarge: 1, //图片根据截图框输出比例倍数
mode: "300px 300px" //图片默认渲染方式
});

// 获取裁剪后的图片
function getData() {
cropperRef.value.getCropBlob(data => {
console.log(data);
})
}

return {
cropperRef,
option
}
}
</script>