n20-project-component 1.0.0
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/README.md +91 -0
- package/dist/demo.html +10 -0
- package/dist/n20-project-component.common.js +537 -0
- package/dist/n20-project-component.css +1 -0
- package/dist/n20-project-component.umd.js +547 -0
- package/dist/n20-project-component.umd.min.js +1 -0
- package/package.json +65 -0
- package/src/components/DemoButton/index.vue +74 -0
- package/src/components/N20CopyText/index.vue +171 -0
- package/src/index.js +39 -0
- package/src/styles/variables.scss +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# n20-project-component
|
|
2
|
+
|
|
3
|
+
PC 端 Vue 2 + Element UI 组件库,供公司内部项目复用。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install n20-project-component
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用
|
|
12
|
+
|
|
13
|
+
### 全量注册
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
import Vue from 'vue'
|
|
17
|
+
import N20Components from 'n20-project-component'
|
|
18
|
+
import 'n20-project-component/dist/n20-project-component.css'
|
|
19
|
+
|
|
20
|
+
Vue.use(N20Components)
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 按需导入
|
|
24
|
+
|
|
25
|
+
```javascript
|
|
26
|
+
import { DemoButton } from 'n20-project-component'
|
|
27
|
+
import 'n20-project-component/dist/n20-project-component.css'
|
|
28
|
+
|
|
29
|
+
export default {
|
|
30
|
+
components: { DemoButton }
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 开发
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# 安装依赖
|
|
38
|
+
npm install
|
|
39
|
+
|
|
40
|
+
# 启动开发调试服务器
|
|
41
|
+
npm run dev
|
|
42
|
+
|
|
43
|
+
# 构建组件库
|
|
44
|
+
npm run build
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 添加新组件
|
|
48
|
+
|
|
49
|
+
1. 在 `src/components/` 下创建组件目录:
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
src/components/MyComponent/
|
|
53
|
+
└── index.vue
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
2. 在 `src/index.js` 中注册导出:
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
import MyComponent from './components/MyComponent/index.vue'
|
|
60
|
+
|
|
61
|
+
// 添加到 components 对象
|
|
62
|
+
const components = {
|
|
63
|
+
// ...
|
|
64
|
+
MyComponent,
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// 添加按需导出
|
|
68
|
+
export {
|
|
69
|
+
// ...
|
|
70
|
+
MyComponent,
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
3. 在 `examples/App.vue` 中添加调试代码预览效果。
|
|
75
|
+
|
|
76
|
+
## 发布
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
# 登录 npm
|
|
80
|
+
npm login
|
|
81
|
+
|
|
82
|
+
# 发布
|
|
83
|
+
npm publish
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## 依赖要求
|
|
87
|
+
|
|
88
|
+
消费方项目需已安装:
|
|
89
|
+
|
|
90
|
+
- `vue` ^2.6.0
|
|
91
|
+
- `element-ui` ^2.15.0
|
package/dist/demo.html
ADDED
|
@@ -0,0 +1,537 @@
|
|
|
1
|
+
module.exports =
|
|
2
|
+
/******/ (function(modules) { // webpackBootstrap
|
|
3
|
+
/******/ // The module cache
|
|
4
|
+
/******/ var installedModules = {};
|
|
5
|
+
/******/
|
|
6
|
+
/******/ // The require function
|
|
7
|
+
/******/ function __webpack_require__(moduleId) {
|
|
8
|
+
/******/
|
|
9
|
+
/******/ // Check if module is in cache
|
|
10
|
+
/******/ if(installedModules[moduleId]) {
|
|
11
|
+
/******/ return installedModules[moduleId].exports;
|
|
12
|
+
/******/ }
|
|
13
|
+
/******/ // Create a new module (and put it into the cache)
|
|
14
|
+
/******/ var module = installedModules[moduleId] = {
|
|
15
|
+
/******/ i: moduleId,
|
|
16
|
+
/******/ l: false,
|
|
17
|
+
/******/ exports: {}
|
|
18
|
+
/******/ };
|
|
19
|
+
/******/
|
|
20
|
+
/******/ // Execute the module function
|
|
21
|
+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
+
/******/
|
|
23
|
+
/******/ // Flag the module as loaded
|
|
24
|
+
/******/ module.l = true;
|
|
25
|
+
/******/
|
|
26
|
+
/******/ // Return the exports of the module
|
|
27
|
+
/******/ return module.exports;
|
|
28
|
+
/******/ }
|
|
29
|
+
/******/
|
|
30
|
+
/******/
|
|
31
|
+
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
+
/******/ __webpack_require__.m = modules;
|
|
33
|
+
/******/
|
|
34
|
+
/******/ // expose the module cache
|
|
35
|
+
/******/ __webpack_require__.c = installedModules;
|
|
36
|
+
/******/
|
|
37
|
+
/******/ // define getter function for harmony exports
|
|
38
|
+
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
+
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
+
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
+
/******/ }
|
|
42
|
+
/******/ };
|
|
43
|
+
/******/
|
|
44
|
+
/******/ // define __esModule on exports
|
|
45
|
+
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
+
/******/ }
|
|
49
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
+
/******/ };
|
|
51
|
+
/******/
|
|
52
|
+
/******/ // create a fake namespace object
|
|
53
|
+
/******/ // mode & 1: value is a module id, require it
|
|
54
|
+
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
+
/******/ // mode & 4: return value when already ns object
|
|
56
|
+
/******/ // mode & 8|1: behave like require
|
|
57
|
+
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
+
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
+
/******/ if(mode & 8) return value;
|
|
60
|
+
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
+
/******/ var ns = Object.create(null);
|
|
62
|
+
/******/ __webpack_require__.r(ns);
|
|
63
|
+
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
+
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
+
/******/ return ns;
|
|
66
|
+
/******/ };
|
|
67
|
+
/******/
|
|
68
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
+
/******/ __webpack_require__.n = function(module) {
|
|
70
|
+
/******/ var getter = module && module.__esModule ?
|
|
71
|
+
/******/ function getDefault() { return module['default']; } :
|
|
72
|
+
/******/ function getModuleExports() { return module; };
|
|
73
|
+
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
+
/******/ return getter;
|
|
75
|
+
/******/ };
|
|
76
|
+
/******/
|
|
77
|
+
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
+
/******/
|
|
80
|
+
/******/ // __webpack_public_path__
|
|
81
|
+
/******/ __webpack_require__.p = "";
|
|
82
|
+
/******/
|
|
83
|
+
/******/
|
|
84
|
+
/******/ // Load entry module and return exports
|
|
85
|
+
/******/ return __webpack_require__(__webpack_require__.s = "fb15");
|
|
86
|
+
/******/ })
|
|
87
|
+
/************************************************************************/
|
|
88
|
+
/******/ ({
|
|
89
|
+
|
|
90
|
+
/***/ "00be":
|
|
91
|
+
/***/ (function(module, exports, __webpack_require__) {
|
|
92
|
+
|
|
93
|
+
// extracted by mini-css-extract-plugin
|
|
94
|
+
|
|
95
|
+
/***/ }),
|
|
96
|
+
|
|
97
|
+
/***/ "021e":
|
|
98
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
99
|
+
|
|
100
|
+
"use strict";
|
|
101
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1c0b7107_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f14e");
|
|
102
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1c0b7107_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1c0b7107_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
|
|
103
|
+
/* unused harmony reexport * */
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
/***/ }),
|
|
107
|
+
|
|
108
|
+
/***/ "d72c":
|
|
109
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
110
|
+
|
|
111
|
+
"use strict";
|
|
112
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_540c418a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("00be");
|
|
113
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_540c418a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_540c418a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
|
|
114
|
+
/* unused harmony reexport * */
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
/***/ }),
|
|
118
|
+
|
|
119
|
+
/***/ "f14e":
|
|
120
|
+
/***/ (function(module, exports, __webpack_require__) {
|
|
121
|
+
|
|
122
|
+
// extracted by mini-css-extract-plugin
|
|
123
|
+
|
|
124
|
+
/***/ }),
|
|
125
|
+
|
|
126
|
+
/***/ "fb15":
|
|
127
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
128
|
+
|
|
129
|
+
"use strict";
|
|
130
|
+
// ESM COMPAT FLAG
|
|
131
|
+
__webpack_require__.r(__webpack_exports__);
|
|
132
|
+
|
|
133
|
+
// EXPORTS
|
|
134
|
+
__webpack_require__.d(__webpack_exports__, "DemoButton", function() { return /* reexport */ DemoButton; });
|
|
135
|
+
__webpack_require__.d(__webpack_exports__, "N20CopyText", function() { return /* reexport */ N20CopyText; });
|
|
136
|
+
|
|
137
|
+
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
|
|
138
|
+
// This file is imported into lib/wc client bundles.
|
|
139
|
+
|
|
140
|
+
if (typeof window !== 'undefined') {
|
|
141
|
+
var currentScript = window.document.currentScript
|
|
142
|
+
if (false) { var getCurrentScript; }
|
|
143
|
+
|
|
144
|
+
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
|
|
145
|
+
if (src) {
|
|
146
|
+
__webpack_require__.p = src[1] // eslint-disable-line
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Indicate to webpack that this file can be concatenated
|
|
151
|
+
/* harmony default export */ var setPublicPath = (null);
|
|
152
|
+
|
|
153
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53bb5eda-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=template&id=1c0b7107&scoped=true
|
|
154
|
+
var render = function render() {
|
|
155
|
+
var _vm = this,
|
|
156
|
+
_c = _vm._self._c;
|
|
157
|
+
return _c('el-button', {
|
|
158
|
+
staticClass: "n20-demo-button",
|
|
159
|
+
attrs: {
|
|
160
|
+
"type": _vm.type,
|
|
161
|
+
"size": _vm.size,
|
|
162
|
+
"disabled": _vm.disabled,
|
|
163
|
+
"loading": _vm.loading,
|
|
164
|
+
"icon": _vm.icon
|
|
165
|
+
},
|
|
166
|
+
on: {
|
|
167
|
+
"click": _vm.handleClick
|
|
168
|
+
}
|
|
169
|
+
}, [_vm._t("default", function () {
|
|
170
|
+
return [_vm._v(_vm._s(_vm.text))];
|
|
171
|
+
})], 2);
|
|
172
|
+
};
|
|
173
|
+
var staticRenderFns = [];
|
|
174
|
+
|
|
175
|
+
// CONCATENATED MODULE: ./src/components/DemoButton/index.vue?vue&type=template&id=1c0b7107&scoped=true
|
|
176
|
+
|
|
177
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=script&lang=js
|
|
178
|
+
/**
|
|
179
|
+
* DemoButton - 示例按钮组件
|
|
180
|
+
*
|
|
181
|
+
* 用于验证组件库构建流程。实际开发时可删除此组件,替换为业务组件。
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* <DemoButton type="primary" text="提交" @click="handleSubmit" />
|
|
185
|
+
*/
|
|
186
|
+
/* harmony default export */ var DemoButtonvue_type_script_lang_js = ({
|
|
187
|
+
name: 'N20DemoButton',
|
|
188
|
+
props: {
|
|
189
|
+
/** 按钮文本 */
|
|
190
|
+
text: {
|
|
191
|
+
type: String,
|
|
192
|
+
default: '按钮'
|
|
193
|
+
},
|
|
194
|
+
/** 按钮类型:primary / success / warning / danger / info / text */
|
|
195
|
+
type: {
|
|
196
|
+
type: String,
|
|
197
|
+
default: 'primary'
|
|
198
|
+
},
|
|
199
|
+
/** 按钮尺寸:medium / small / mini */
|
|
200
|
+
size: {
|
|
201
|
+
type: String,
|
|
202
|
+
default: ''
|
|
203
|
+
},
|
|
204
|
+
/** 是否禁用 */
|
|
205
|
+
disabled: {
|
|
206
|
+
type: Boolean,
|
|
207
|
+
default: false
|
|
208
|
+
},
|
|
209
|
+
/** 是否加载中 */
|
|
210
|
+
loading: {
|
|
211
|
+
type: Boolean,
|
|
212
|
+
default: false
|
|
213
|
+
},
|
|
214
|
+
/** 图标类名 */
|
|
215
|
+
icon: {
|
|
216
|
+
type: String,
|
|
217
|
+
default: ''
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
methods: {
|
|
221
|
+
handleClick(e) {
|
|
222
|
+
this.$emit('click', e);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
// CONCATENATED MODULE: ./src/components/DemoButton/index.vue?vue&type=script&lang=js
|
|
227
|
+
/* harmony default export */ var components_DemoButtonvue_type_script_lang_js = (DemoButtonvue_type_script_lang_js);
|
|
228
|
+
// EXTERNAL MODULE: ./src/components/DemoButton/index.vue?vue&type=style&index=0&id=1c0b7107&prod&lang=scss&scoped=true
|
|
229
|
+
var DemoButtonvue_type_style_index_0_id_1c0b7107_prod_lang_scss_scoped_true = __webpack_require__("021e");
|
|
230
|
+
|
|
231
|
+
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
|
232
|
+
/* globals __VUE_SSR_CONTEXT__ */
|
|
233
|
+
|
|
234
|
+
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
|
|
235
|
+
// This module is a runtime utility for cleaner component module output and will
|
|
236
|
+
// be included in the final webpack user bundle.
|
|
237
|
+
|
|
238
|
+
function normalizeComponent(
|
|
239
|
+
scriptExports,
|
|
240
|
+
render,
|
|
241
|
+
staticRenderFns,
|
|
242
|
+
functionalTemplate,
|
|
243
|
+
injectStyles,
|
|
244
|
+
scopeId,
|
|
245
|
+
moduleIdentifier /* server only */,
|
|
246
|
+
shadowMode /* vue-cli only */
|
|
247
|
+
) {
|
|
248
|
+
// Vue.extend constructor export interop
|
|
249
|
+
var options =
|
|
250
|
+
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
|
|
251
|
+
|
|
252
|
+
// render functions
|
|
253
|
+
if (render) {
|
|
254
|
+
options.render = render
|
|
255
|
+
options.staticRenderFns = staticRenderFns
|
|
256
|
+
options._compiled = true
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// functional template
|
|
260
|
+
if (functionalTemplate) {
|
|
261
|
+
options.functional = true
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// scopedId
|
|
265
|
+
if (scopeId) {
|
|
266
|
+
options._scopeId = 'data-v-' + scopeId
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
var hook
|
|
270
|
+
if (moduleIdentifier) {
|
|
271
|
+
// server build
|
|
272
|
+
hook = function (context) {
|
|
273
|
+
// 2.3 injection
|
|
274
|
+
context =
|
|
275
|
+
context || // cached call
|
|
276
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
277
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
|
|
278
|
+
// 2.2 with runInNewContext: true
|
|
279
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
280
|
+
context = __VUE_SSR_CONTEXT__
|
|
281
|
+
}
|
|
282
|
+
// inject component styles
|
|
283
|
+
if (injectStyles) {
|
|
284
|
+
injectStyles.call(this, context)
|
|
285
|
+
}
|
|
286
|
+
// register component module identifier for async chunk inferrence
|
|
287
|
+
if (context && context._registeredComponents) {
|
|
288
|
+
context._registeredComponents.add(moduleIdentifier)
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
// used by ssr in case component is cached and beforeCreate
|
|
292
|
+
// never gets called
|
|
293
|
+
options._ssrRegister = hook
|
|
294
|
+
} else if (injectStyles) {
|
|
295
|
+
hook = shadowMode
|
|
296
|
+
? function () {
|
|
297
|
+
injectStyles.call(
|
|
298
|
+
this,
|
|
299
|
+
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
300
|
+
)
|
|
301
|
+
}
|
|
302
|
+
: injectStyles
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
if (hook) {
|
|
306
|
+
if (options.functional) {
|
|
307
|
+
// for template-only hot-reload because in that case the render fn doesn't
|
|
308
|
+
// go through the normalizer
|
|
309
|
+
options._injectStyles = hook
|
|
310
|
+
// register for functional component in vue file
|
|
311
|
+
var originalRender = options.render
|
|
312
|
+
options.render = function renderWithStyleInjection(h, context) {
|
|
313
|
+
hook.call(context)
|
|
314
|
+
return originalRender(h, context)
|
|
315
|
+
}
|
|
316
|
+
} else {
|
|
317
|
+
// inject component registration as beforeCreate hook
|
|
318
|
+
var existing = options.beforeCreate
|
|
319
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
return {
|
|
324
|
+
exports: scriptExports,
|
|
325
|
+
options: options
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
// CONCATENATED MODULE: ./src/components/DemoButton/index.vue
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
/* normalize component */
|
|
337
|
+
|
|
338
|
+
var component = normalizeComponent(
|
|
339
|
+
components_DemoButtonvue_type_script_lang_js,
|
|
340
|
+
render,
|
|
341
|
+
staticRenderFns,
|
|
342
|
+
false,
|
|
343
|
+
null,
|
|
344
|
+
"1c0b7107",
|
|
345
|
+
null
|
|
346
|
+
|
|
347
|
+
)
|
|
348
|
+
|
|
349
|
+
/* harmony default export */ var DemoButton = (component.exports);
|
|
350
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53bb5eda-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=template&id=540c418a&scoped=true
|
|
351
|
+
var N20CopyTextvue_type_template_id_540c418a_scoped_true_render = function render() {
|
|
352
|
+
var _vm = this,
|
|
353
|
+
_c = _vm._self._c;
|
|
354
|
+
return _c('span', {
|
|
355
|
+
staticClass: "n20-copy-text",
|
|
356
|
+
on: {
|
|
357
|
+
"click": function ($event) {
|
|
358
|
+
$event.stopPropagation();
|
|
359
|
+
return _vm.handleCopy.apply(null, arguments);
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
}, [_c('span', {
|
|
363
|
+
ref: "content",
|
|
364
|
+
staticClass: "n20-copy-text__content"
|
|
365
|
+
}, [_vm._t("default", function () {
|
|
366
|
+
return [_vm._v(_vm._s(_vm.text))];
|
|
367
|
+
})], 2), _vm.showIcon ? _c('i', {
|
|
368
|
+
class: ['n20-copy-text__icon', _vm.copied ? 'el-icon-check' : 'el-icon-document-copy'],
|
|
369
|
+
style: {
|
|
370
|
+
order: _vm.iconPosition === 'left' ? -1 : 1
|
|
371
|
+
}
|
|
372
|
+
}) : _vm._e(), _c('transition', {
|
|
373
|
+
attrs: {
|
|
374
|
+
"name": "n20-copy-fade"
|
|
375
|
+
}
|
|
376
|
+
}, [_vm.copied ? _c('span', {
|
|
377
|
+
staticClass: "n20-copy-text__tip"
|
|
378
|
+
}, [_vm._v(_vm._s(_vm.successTip))]) : _vm._e()])], 1);
|
|
379
|
+
};
|
|
380
|
+
var N20CopyTextvue_type_template_id_540c418a_scoped_true_staticRenderFns = [];
|
|
381
|
+
|
|
382
|
+
// CONCATENATED MODULE: ./src/components/N20CopyText/index.vue?vue&type=template&id=540c418a&scoped=true
|
|
383
|
+
|
|
384
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=script&lang=js
|
|
385
|
+
/**
|
|
386
|
+
* N20CopyText - 点击复制文本组件
|
|
387
|
+
*
|
|
388
|
+
* 点击后将指定文本复制到剪贴板,显示成功反馈。
|
|
389
|
+
*
|
|
390
|
+
* @example
|
|
391
|
+
* <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
|
|
392
|
+
*
|
|
393
|
+
* @example
|
|
394
|
+
* <!-- 自动获取 slot 内容 -->
|
|
395
|
+
* <N20CopyText>BILL-2024-001</N20CopyText>
|
|
396
|
+
*/
|
|
397
|
+
/* harmony default export */ var N20CopyTextvue_type_script_lang_js = ({
|
|
398
|
+
name: 'N20CopyText',
|
|
399
|
+
props: {
|
|
400
|
+
/** 要复制的文本(默认取 slot 内文本) */
|
|
401
|
+
text: {
|
|
402
|
+
type: [String, Number],
|
|
403
|
+
default: ''
|
|
404
|
+
},
|
|
405
|
+
/** 复制成功提示文字 */
|
|
406
|
+
successTip: {
|
|
407
|
+
type: String,
|
|
408
|
+
default: '已复制'
|
|
409
|
+
},
|
|
410
|
+
/** 是否显示复制图标 */
|
|
411
|
+
showIcon: {
|
|
412
|
+
type: Boolean,
|
|
413
|
+
default: true
|
|
414
|
+
},
|
|
415
|
+
/** 图标位置 */
|
|
416
|
+
iconPosition: {
|
|
417
|
+
type: String,
|
|
418
|
+
default: 'right',
|
|
419
|
+
validator: v => ['left', 'right'].includes(v)
|
|
420
|
+
},
|
|
421
|
+
/** 是否禁用 */
|
|
422
|
+
disabled: {
|
|
423
|
+
type: Boolean,
|
|
424
|
+
default: false
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
data() {
|
|
428
|
+
return {
|
|
429
|
+
copied: false,
|
|
430
|
+
timer: null
|
|
431
|
+
};
|
|
432
|
+
},
|
|
433
|
+
beforeDestroy() {
|
|
434
|
+
clearTimeout(this.timer);
|
|
435
|
+
},
|
|
436
|
+
methods: {
|
|
437
|
+
async handleCopy() {
|
|
438
|
+
if (this.disabled || this.copied) return;
|
|
439
|
+
const copyText = this.text || this.$refs.content && this.$refs.content.innerText || '';
|
|
440
|
+
if (!copyText) return;
|
|
441
|
+
try {
|
|
442
|
+
if (navigator.clipboard && window.isSecureContext) {
|
|
443
|
+
await navigator.clipboard.writeText(String(copyText));
|
|
444
|
+
} else {
|
|
445
|
+
// fallback for HTTP or older browsers
|
|
446
|
+
const textarea = document.createElement('textarea');
|
|
447
|
+
textarea.value = String(copyText);
|
|
448
|
+
textarea.style.position = 'fixed';
|
|
449
|
+
textarea.style.left = '-9999px';
|
|
450
|
+
document.body.appendChild(textarea);
|
|
451
|
+
textarea.select();
|
|
452
|
+
document.execCommand('copy');
|
|
453
|
+
document.body.removeChild(textarea);
|
|
454
|
+
}
|
|
455
|
+
this.copied = true;
|
|
456
|
+
this.$emit('copy', String(copyText));
|
|
457
|
+
this.timer = setTimeout(() => {
|
|
458
|
+
this.copied = false;
|
|
459
|
+
}, 2000);
|
|
460
|
+
} catch (err) {
|
|
461
|
+
this.$emit('error', err);
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
});
|
|
466
|
+
// CONCATENATED MODULE: ./src/components/N20CopyText/index.vue?vue&type=script&lang=js
|
|
467
|
+
/* harmony default export */ var components_N20CopyTextvue_type_script_lang_js = (N20CopyTextvue_type_script_lang_js);
|
|
468
|
+
// EXTERNAL MODULE: ./src/components/N20CopyText/index.vue?vue&type=style&index=0&id=540c418a&prod&lang=scss&scoped=true
|
|
469
|
+
var N20CopyTextvue_type_style_index_0_id_540c418a_prod_lang_scss_scoped_true = __webpack_require__("d72c");
|
|
470
|
+
|
|
471
|
+
// CONCATENATED MODULE: ./src/components/N20CopyText/index.vue
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
/* normalize component */
|
|
479
|
+
|
|
480
|
+
var N20CopyText_component = normalizeComponent(
|
|
481
|
+
components_N20CopyTextvue_type_script_lang_js,
|
|
482
|
+
N20CopyTextvue_type_template_id_540c418a_scoped_true_render,
|
|
483
|
+
N20CopyTextvue_type_template_id_540c418a_scoped_true_staticRenderFns,
|
|
484
|
+
false,
|
|
485
|
+
null,
|
|
486
|
+
"540c418a",
|
|
487
|
+
null
|
|
488
|
+
|
|
489
|
+
)
|
|
490
|
+
|
|
491
|
+
/* harmony default export */ var N20CopyText = (N20CopyText_component.exports);
|
|
492
|
+
// CONCATENATED MODULE: ./src/index.js
|
|
493
|
+
/**
|
|
494
|
+
* n20-project-component
|
|
495
|
+
* PC 端 Vue 2 + Element UI 组件库
|
|
496
|
+
*/
|
|
497
|
+
|
|
498
|
+
// ========== 组件导入 ==========
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
// ========== 组件列表 ==========
|
|
503
|
+
const components = {
|
|
504
|
+
DemoButton: DemoButton,
|
|
505
|
+
N20CopyText: N20CopyText
|
|
506
|
+
};
|
|
507
|
+
|
|
508
|
+
// ========== 按需导出 ==========
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
// ========== 全量注册(Vue.use)==========
|
|
512
|
+
const install = Vue => {
|
|
513
|
+
if (install.installed) return;
|
|
514
|
+
install.installed = true;
|
|
515
|
+
Object.values(components).forEach(component => {
|
|
516
|
+
Vue.component(component.name, component);
|
|
517
|
+
});
|
|
518
|
+
};
|
|
519
|
+
|
|
520
|
+
// 支持通过 <script> 标签直接引入时自动注册
|
|
521
|
+
if (typeof window !== 'undefined' && window.Vue) {
|
|
522
|
+
install(window.Vue);
|
|
523
|
+
}
|
|
524
|
+
/* harmony default export */ var src_0 = ({
|
|
525
|
+
install,
|
|
526
|
+
...components
|
|
527
|
+
});
|
|
528
|
+
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
|
|
529
|
+
|
|
530
|
+
|
|
531
|
+
/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0);
|
|
532
|
+
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
/***/ })
|
|
536
|
+
|
|
537
|
+
/******/ });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.n20-demo-button[data-v-1c0b7107]{border-radius:4px;font-size:14px}.n20-copy-text[data-v-540c418a]{display:inline-flex;align-items:center;gap:4px;cursor:pointer;position:relative}.n20-copy-text:hover .n20-copy-text__icon[data-v-540c418a]{opacity:1}.n20-copy-text__content[data-v-540c418a]{display:inline}.n20-copy-text__icon[data-v-540c418a]{font-size:14px;color:#909399;opacity:.4;transition:all .2s ease}.n20-copy-text__icon.el-icon-check[data-v-540c418a]{color:#67c23a;opacity:1}.n20-copy-text__tip[data-v-540c418a]{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:#67c23a;color:#fff;font-size:12px;padding:2px 8px;border-radius:4px;white-space:nowrap;pointer-events:none}.n20-copy-text__tip[data-v-540c418a]:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #67c23a}.n20-copy-fade-enter-active[data-v-540c418a],.n20-copy-fade-leave-active[data-v-540c418a]{transition:opacity .3s ease,transform .3s ease}.n20-copy-fade-enter[data-v-540c418a],.n20-copy-fade-leave-to[data-v-540c418a]{opacity:0;transform:translateX(-50%) translateY(4px)}
|