da-style 0.0.11 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +1 -75
- package/lib/index.js +1 -1
- package/package.json +31 -29
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 tutoupfx
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -86,82 +86,8 @@ const data = [图片数组];
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
## 骨架屏组件
|
|
90
|
-
|
|
91
|
-
> DSkeleton需要传入一个对象,看下面代码演示
|
|
92
|
-
|
|
93
|
-
```javascript
|
|
94
|
-
<template>
|
|
95
|
-
<div class="box">
|
|
96
|
-
<d-skeleton v-for="item in data" :key="item" :data="item" />
|
|
97
|
-
<!-- 可以取消加载动画 -->
|
|
98
|
-
<d-skeleton :loading="false"/>
|
|
99
|
-
</div>
|
|
100
|
-
</template>
|
|
101
|
-
|
|
102
|
-
<script setup>
|
|
103
|
-
import DSkeleton from "da-style/lib/index";
|
|
104
|
-
|
|
105
|
-
// 骨架屏需要的数据
|
|
106
|
-
const data = [
|
|
107
|
-
{
|
|
108
|
-
img: "自定义图片链接1",
|
|
109
|
-
title: "自定义标题1",
|
|
110
|
-
content: "自定义内容1",
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
img: "自定义图片链接1",
|
|
114
|
-
title: "自定义标题1",
|
|
115
|
-
content: "自定义内容1",
|
|
116
|
-
},
|
|
117
|
-
];
|
|
118
|
-
</script>
|
|
119
|
-
|
|
120
|
-
<style scoped>
|
|
121
|
-
.box {
|
|
122
|
-
width: 80%;
|
|
123
|
-
margin: 0 auto;
|
|
124
|
-
min-height: 100vh;
|
|
125
|
-
display: flex;
|
|
126
|
-
justify-content: space-evenly;
|
|
127
|
-
align-items: center;
|
|
128
|
-
}
|
|
129
|
-
</style>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
89
|
## 输入框组件
|
|
137
90
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
```javascript
|
|
141
|
-
<template>
|
|
142
|
-
<div class="box">
|
|
143
|
-
<d-input
|
|
144
|
-
type:"text"
|
|
145
|
-
:name="name"
|
|
146
|
-
:value="value"
|
|
147
|
-
placeholder="请输入你觉得最帅的人的名字"
|
|
148
|
-
/>
|
|
149
|
-
</div>
|
|
150
|
-
</template>
|
|
151
|
-
<script setup>
|
|
152
|
-
import DInput from "da-style/lib/index";
|
|
153
|
-
const name = "name";
|
|
154
|
-
const value = "";
|
|
155
|
-
</script>
|
|
156
|
-
<style scoped>
|
|
157
|
-
.box {
|
|
158
|
-
min-height: 100vh;
|
|
159
|
-
display: grid;
|
|
160
|
-
place-items: center;
|
|
161
|
-
}
|
|
162
|
-
</style>
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
|
|
91
|
+
等待中...
|
|
166
92
|
|
|
167
93
|
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as r,openBlock as t,createElementBlock as n,normalizeClass as o,renderSlot as a,pushScopeId as e,popScopeId as d,createElementVNode as c,Fragment as l,renderList as i}from"vue";var s=r({name:"DBtn",props:{type:String}});function b(r,t){void 0===t&&(t={});var n=t.insertAt;if(r&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}b('\nbutton[data-v-5ac4ea34] {\r\n\t/*背景颜色*/\r\n\t--d-bg-color: #ccc;\r\n\t/*文字颜色*/\r\n\t--d-text-color: #fff;\r\n\t/*边框样式*/\r\n\t--d-border: 4px solid var(--d-bg-color);\r\n\t/*鼠标悬浮边框样式*/\r\n\t--d-hover-border: 4px solid var(--d-hover-color);\r\n\t/*按钮点击颜色*/\r\n\t--d-active-color: var(--d-bg-color);\r\n\t/*鼠标悬浮颜色*/\r\n\t--d-hover-color: rgba(0, 0, 0, 0.5);\r\n\tmargin: 0.5rem;\r\n\toutline: none;\r\n\tbackground: var(--d-bg-color);\r\n\tcolor: var(--d-text-color);\r\n\tborder-radius: 0.2rem;\r\n\tpadding: 0.3rem 1rem;\r\n\tfont-weight: bold;\r\n\ttransition: 0.25s all ease-in-out;\r\n\tcursor: pointer;\r\n\tborder: none;\r\n\tposition: relative;\r\n\tbox-shadow: 1px 1px 1px var(--d-bg-color), -1px -1px 1px var(--d-bg-color);\n}\nbutton[data-v-5ac4ea34]::before,\r\nbutton[data-v-5ac4ea34]::after {\r\n\tcontent: "";\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder-radius: inherit;\r\n\tposition: absolute;\r\n\tbackground: transparent;\r\n\tvisibility: hidden;\r\n\ttransition: 0.1s all ease-in-out;\n}\nbutton[data-v-5ac4ea34]::before {\r\n\ttop: -5px;\r\n\tleft: -5px;\r\n\tborder-top: var(--d-border);\r\n\tborder-left: var(--d-border);\n}\nbutton[data-v-5ac4ea34]::after {\r\n\tbottom: -5px;\r\n\tright: -5px;\r\n\tbackground: transparent;\r\n\tborder-right: var(--d-border);\r\n\tborder-bottom: var(--d-border);\n}\nbutton[data-v-5ac4ea34]:hover {\r\n\tbackground: var(--d-hover-color);\n}\nbutton[data-v-5ac4ea34]:hover::before {\r\n\tborder-top: var(--d-hover-border);\r\n\tborder-left: var(--d-hover-border);\r\n\tvisibility: visible;\n}\nbutton[data-v-5ac4ea34]:hover::after {\r\n\tborder-right: var(--d-hover-border);\r\n\tborder-bottom: var(--d-hover-border);\r\n\tvisibility: visible;\n}\nbutton[data-v-5ac4ea34]:active {\r\n\tbackground: var(--d-active-color);\r\n\tcolor: var(--d-text-color);\n}\n.info[data-v-5ac4ea34] {\r\n\t--d-bg-color: #3498db;\r\n\t--d-hover-color: #2980b9;\n}\n.success[data-v-5ac4ea34] {\r\n\t--d-bg-color: #2ecc71;\r\n\t--d-hover-color: #27ae60;\n}\n.err[data-v-5ac4ea34] {\r\n\t--d-bg-color: #e74c3c;\r\n\t--d-hover-color: #c0392b;\n}\n.warn[data-v-5ac4ea34] {\r\n\t--d-bg-color: #f1c40f;\r\n\t--d-hover-color: #f39c12;\n}\r\n'),s.render=function(r,e,d,c,l,i){return t(),n("button",{class:o(r.type)},[a(r.$slots,"default")],2)},s.__scopeId="data-v-5ac4ea34",s.__file="packages/DBtn/src/DBtn.vue",s.install=function(r){r.component(s.name,s)};var v=r({name:"DInput",props:{type:String}});const u=["type"];b("\ninput[data-v-457377a6] {\r\n --d-border-color: rgba(0, 0, 0, 0.7);\r\n --d-text-color: #3498db;\r\n outline: none;\r\n border: none;\r\n padding: 0.5rem;\r\n margin: 0.5rem;\r\n border-radius: 0.2rem;\r\n font-weight: bold;\r\n box-shadow: 1px 1px 1px var(--d-border-color),\r\n -1px -1px 1px var(--d-border-color);\n}\ninput[data-v-457377a6]:active,\r\ninput[data-v-457377a6]:hover {\r\n --d-border-color: var(--d-text-color);\r\n caret-color: var(--d-text-color);\n}\r\n"),v.render=function(r,o,a,e,d,c){return t(),n("input",{type:r.type,spellcheck:"false"},null,8,u)},v.__scopeId="data-v-457377a6",v.__file="packages/DInput/src/DInput.vue",v.install=function(r){r.component(v.name,v)};var p=r({name:"DButton",props:{type:String}});const f=(r=>(e("data-v-90ab4c44"),r=r(),d(),r))((()=>c("span",null,null,-1)));b('\nbutton[data-v-90ab4c44] {\r\n\t--d-color: royalblue;\r\n\toverflow: hidden;\r\n\tbox-sizing: border-box;\r\n\tborder: none;\r\n\tposition: relative;\r\n\tpadding: 0.3rem 1rem;\r\n\tmargin: .3rem;\r\n\tfont-size: 1.1rem;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n\tbackground-color: transparent;\r\n\tcolor: var(--d-color);\n}\nbutton span[data-v-90ab4c44] {\r\n\tbox-sizing: border-box;\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground-color: transparent;\r\n\tz-index: -1;\r\n\tborder: 4px solid var(--d-color);\n}\nbutton span[data-v-90ab4c44]::before {\r\n\tcontent: "";\r\n\tposition: absolute;\r\n\twidth: 8%;\r\n\theight: 500%;\r\n\tbackground-color: white;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%) rotate(-60deg);\r\n\ttransition: 0.25s all;\n}\nbutton:hover span[data-v-90ab4c44]::before,\r\nbutton:focus span[data-v-90ab4c44]::before {\r\n\ttransform: translate(-50%, -50%) rotate(-90deg);\r\n\twidth: 100%;\r\n\tbackground: var(--d-color);\n}\nbutton[data-v-90ab4c44]:hover,\r\nbutton[data-v-90ab4c44]:focus {\r\n\tcolor: white;\n}\n.info[data-v-90ab4c44] {\r\n\t--d-color: #3498db;\n}\n.err[data-v-90ab4c44] {\r\n\t--d-color: #e74c3c;\n}\n.warn[data-v-90ab4c44] {\r\n\t--d-color: #f1c40f;\n}\n.success[data-v-90ab4c44] {\r\n\t--d-color: #2ecc71;\n}\r\n'),p.render=function(r,e,d,c,l,i){return t(),n("button",{class:o(r.type)},[a(r.$slots,"default"),f],2)},p.__scopeId="data-v-90ab4c44",p.__file="packages/DButton/src/DButton.vue",p.install=function(r){r.component(p.name,p)};var m=r({name:"DFalls",props:{data:Array}});const h={class:"falls"},x={class:"box"},g=["src"];b("\n.falls[data-v-6cd592e6] {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\n}\n.box[data-v-6cd592e6] {\r\n\tmax-width: 1300px;\r\n\tcolumn-count: 5;\r\n\tcolumn-gap: 15px;\n}\n.box div[data-v-6cd592e6] {\r\n\tmargin-bottom: 1rem;\n}\n.box div img[data-v-6cd592e6] {\r\n\twidth: 100%;\n}\n@media (max-width: 1200px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 4;\n}\n}\n@media (max-width: 850px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 3;\n}\n}\n@media (max-width: 600px) {\n.box[data-v-6cd592e6] {\r\n\t\tcolumn-count: 2;\n}\n}\r\n"),m.render=function(r,o,a,e,d,s){return t(),n("div",h,[c("div",x,[(t(!0),n(l,null,i(r.data,(r=>(t(),n("div",{key:r},[c("img",{src:r},null,8,g)])))),128))])])},m.__scopeId="data-v-6cd592e6",m.__file="packages/DFalls/src/DFalls.vue",m.install=function(r){r.component(m.name,m)};const y=[s,v,p,m];var w={install:r=>{y.forEach((t=>r.component(t.name,t)))},...y};export{s as DBtn,p as DButton,m as DFalls,v as DInput,w as default};
|
package/package.json
CHANGED
|
@@ -1,29 +1,31 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "da-style",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Da式风格组件库,把自己觉得一些好看的组件封装起来，方便用",
|
|
5
|
-
"private": false,
|
|
6
|
-
"main": "lib/index.js",
|
|
7
|
-
"module": "es/index.js",
|
|
8
|
-
"license": "MIT",
|
|
9
|
-
"author": "da",
|
|
10
|
-
"scripts": {
|
|
11
|
-
"
|
|
12
|
-
"dev": "vite",
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"@
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"rollup-plugin-
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "da-style",
|
|
3
|
+
"version": "0.0.12",
|
|
4
|
+
"description": "Da式风格组件库,把自己觉得一些好看的组件封装起来，方便用",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "lib/index.js",
|
|
7
|
+
"module": "es/index.js",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"author": "da",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "rollup -c",
|
|
12
|
+
"dev": "vite",
|
|
13
|
+
"serve": "vite preview"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"lib",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@vitejs/plugin-vue": "^1.6.1",
|
|
21
|
+
"@vue/compiler-sfc": "^3.2.6",
|
|
22
|
+
"rollup-plugin-postcss": "^4.0.1",
|
|
23
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
24
|
+
"rollup-plugin-vue": "^6.0.0",
|
|
25
|
+
"vite": "^2.5.4",
|
|
26
|
+
"vue": "^3.2.6"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"rollup": "^2.79.0"
|
|
30
|
+
}
|
|
31
|
+
}
|