Skip to content

Commit c09272d

Browse files
adajulyadajuly
committed
chore:init project
0 parents  commit c09272d

File tree

11 files changed

+937
-0
lines changed

11 files changed

+937
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules
3+
dist
4+
.gitconfig
5+
package-lock.json

‎README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
## font-art
2+
3+
#### 一个可以给字体设置艺术字的精简库。
4+
5+
### 怎么使用
6+
7+
安装 font-art
8+
9+
```
10+
npm i font-art --save
11+
```
12+
13+
引入
14+
15+
```
16+
import fontArt from 'font-art';
17+
18+
<fontArt @fontArtChange="getFontStyle" />
19+
```
20+
21+
getFontStyle 可以把字效字效样式返回，接收到的样式对象绑定到对应的文字结构即可。
22+
23+
<img src="./src/assets/fontArt.png" height="400" width="600" />
24+
25+
### 开发
26+
27+
```bash
28+
npm i
29+
npm run dev
30+
```
31+
32+
### 打包构建
33+
34+
```bash
35+
npm run build
36+
```

‎index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import FontArt from "./src/components/fontArt";
2+
export default {
3+
FontArt
4+
};

‎package.json

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "font-art",
3+
"description": "A package for setting font art",
4+
"version": "0.0.1",
5+
"author": "adajuly",
6+
"scripts": {
7+
"build": "cross-env NODE_ENV=production webpack --progress",
8+
"dev": "cross-env NODE_ENV=development webpack server --open --hot"
9+
},
10+
"devDependencies": {
11+
"babel-core": "^6.26.0",
12+
"babel-loader": "^7.1.2",
13+
"babel-preset-env": "^1.6.0",
14+
"babel-preset-stage-3": "^6.24.1",
15+
"cross-env": "^5.0.5",
16+
"css-loader": "^0.28.7",
17+
"file-loader": "^1.1.11",
18+
"html-webpack-plugin": "^5.5.0",
19+
"lerna": "^3.22.0",
20+
"node-sass": "^4.5.3",
21+
"sass-loader": "^6.0.6",
22+
"terser-webpack-plugin": "^5.2.5",
23+
"url-loader": "^4.1.1",
24+
"vue-loader": "^15.9.6",
25+
"vue-template-compiler": "^2.4.4",
26+
"webpack": "^5.64.4",
27+
"webpack-cli": "^4.9.1",
28+
"webpack-dev-server": "^4.0.0-beta.3",
29+
"webpack-merge": "^5.8.0",
30+
"vue": "^2.5.11"
31+
},
32+
"license": "MIT",
33+
"main": "./dist/font-art.js",
34+
"browserslist": [
35+
"> 1%",
36+
"last 2 versions",
37+
"not ie <= 8",
38+
"Firefox ESR",
39+
"Opera 12.1",
40+
"iOS 7"
41+
],
42+
"deprecated": false,
43+
"keywords": [
44+
"font",
45+
"fontArt"
46+
]
47+
}

‎public/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>font-art</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="../dist/font-art.js"></script>
10+
</body>
11+
</html>

‎src/App.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="main">
3+
<div :style="style" class="text-wrapper">
4+
测试的字效在这里生效
5+
</div>
6+
<fontArt
7+
@fontArtChange="getFont"
8+
/>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import fontArt from './components/fontArt.vue';
14+
export default {
15+
data(){
16+
return {
17+
style: {},
18+
}
19+
},
20+
components:{
21+
fontArt
22+
},
23+
methods:{
24+
getFont(val){
25+
this.style = val;
26+
}
27+
}
28+
}
29+
</script>
30+
<style scoped>
31+
.text-wrapper{
32+
height: 50px;
33+
font-size: 30px;
34+
line-height: 50px;
35+
}
36+
</style>

‎src/assets/fontArt.png

434 KB
Loading

‎src/components/fontArt.vue

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="font-art-list-wrapper">
3+
<span class="art-title">艺术字</span>
4+
<div class="art-wrapper">
5+
<div
6+
v-for="(item, index) in artList"
7+
:key="index"
8+
class="art-item"
9+
@click="handleChooseArt(item.defaultStyle)"
10+
>
11+
<p :style="item.style">
12+
{{ item.label }}
13+
</p>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { TEXT_ART_MAP } from '../config/fontArt';
21+
export default {
22+
name: 'fontEffect',
23+
data(){
24+
return {
25+
artList: TEXT_ART_MAP
26+
}
27+
},
28+
methods: {
29+
handleChooseArt(val){
30+
this.$emit('fontArtChange',val);
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style scoped lang="scss">
37+
.font-art-list-wrapper{
38+
width: 100%;
39+
height: 100%;
40+
background: #fff;
41+
z-index: 1002;
42+
transition: all .28s;
43+
.art-title{
44+
flex: 1;
45+
font-size: 16px;
46+
margin: 10px 10px 0 0;
47+
font-weight: 700;
48+
}
49+
.art-wrapper{
50+
padding: 10px 0;
51+
height: 80%;
52+
overflow-y: auto;
53+
.art-item{
54+
display: inline-flex;
55+
height: 60px;
56+
width: 25%;
57+
color: #76838f;
58+
text-align: center;
59+
align-items: center;
60+
justify-content: center;
61+
cursor: pointer;
62+
p{
63+
font-size: 28px;
64+
line-height: 34px;
65+
padding: 7px 10px;
66+
border: 2px solid #f7f7f7;
67+
border-radius: 4px;
68+
}
69+
}
70+
}
71+
}
72+
</style>

0 commit comments

Comments
 (0)