├── .babelrc
├── src
├── assets
│ └── logo.png
├── main.js
└── App.vue
├── .gitignore
├── .editorconfig
├── index.html
├── package.json
├── webpack.config.js
└── README.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", { "modules": false }],
4 | "stage-3"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shangri-GitHub/vue-drag-moveable-designer/HEAD/src/assets/logo.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 |
7 | # Editor directories and files
8 | .idea
9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import VueDesignMercury from "vue-design-mercury"
4 | Vue.use(VueDesignMercury);
5 | new Vue({
6 | el: '#app',
7 | render: h => h(App)
8 | })
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vue-drag-moveable-designer
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-drag-moveable-designer",
3 | "description": "A Vue.js project",
4 | "version": "1.0.0",
5 | "author": "no",
6 | "license": "MIT",
7 | "private": true,
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server",
10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 | },
12 | "dependencies": {
13 | "vue": "^2.5.11"
14 | },
15 | "browserslist": [
16 | "> 1%",
17 | "last 2 versions",
18 | "not ie <= 8"
19 | ],
20 | "devDependencies": {
21 | "babel-core": "^6.26.0",
22 | "babel-loader": "^7.1.2",
23 | "babel-preset-env": "^1.6.0",
24 | "babel-preset-stage-3": "^6.24.1",
25 | "cross-env": "^5.0.5",
26 | "css-loader": "^0.28.7",
27 | "file-loader": "^1.1.4",
28 | "vue-design-mercury": "^1.0.3",
29 | "vue-loader": "^13.0.5",
30 | "vue-template-compiler": "^2.4.4",
31 | "webpack": "^3.6.0",
32 | "webpack-dev-server": "^2.9.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | open: false,
52 | overlay: true
53 | },
54 | performance: {
55 | hints: false
56 | },
57 | devtool: '#eval-source-map'
58 | }
59 |
60 | if (process.env.NODE_ENV === 'production') {
61 | module.exports.devtool = '#source-map'
62 | // http://vue-loader.vuejs.org/en/workflow/production.html
63 | module.exports.plugins = (module.exports.plugins || []).concat([
64 | new webpack.DefinePlugin({
65 | 'process.env': {
66 | NODE_ENV: '"production"'
67 | }
68 | }),
69 | new webpack.optimize.UglifyJsPlugin({
70 | sourceMap: true,
71 | compress: {
72 | warnings: false
73 | }
74 | }),
75 | new webpack.LoaderOptionsPlugin({
76 | minimize: true
77 | })
78 | ])
79 | }
80 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 设计器使用指南
2 |
3 |
4 |
5 |
6 |
7 | 
8 | VueDesignMercury
9 |
10 | [](https://npmjs.com/package/vue-draggable-resizable-gorkys)
11 | [](LICENSE.md)
12 | [](https://www.npmjs.com/package/vue-draggable-resizable-gorkys)
13 |
14 | ## 新增特征✨
15 |
16 | - 辅助线(新)
17 | - 元素对齐(新)
18 | - 冲突检测
19 | - 吸附对齐
20 | - 默认样式优化
21 | - 框选
22 | - 标尺
23 |
24 | ## 安装使用
25 |
26 | > 说明：组件基于[vue-draggable-resizable-gorkys](https://github.com/gorkys/vue-draggable-resizable-gorkys)进行二次开发
27 |
28 | 距离上[1.7版本](https://github.com/gorkys/vue-draggable-resizable)版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。
29 |
30 | 虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。
31 |
32 | 所以也就一直没有将**冲突检测**以及**吸附对齐**功能适配到2.0版本，最近正好有时间就适配一下。
33 |
34 | ## Install and basic usage
35 |
36 | ```npm
37 | $ npm install --save vue-design-mercury
38 | ```
39 |
40 | 全局注册组件
41 |
42 | ```js
43 | import VueDesignMercury from "vue-design-mercury"
44 | Vue.use(VueDesignMercury);
45 | ```
46 |
47 | 
48 |
49 |
50 |
51 | ## 功能预览
52 |
53 | [英文版演示地址](https://mauricius.github.io/vue-draggable-resizable) | [中文版演示地址](http://tingtas.com/vue-draggable-resizable-gorkys/)
54 |
55 | > 注意：英文版为官方原版，没有新增功能的演示。**中文版**为google翻译版本，新增功能在**高级**目录下可查看
56 |
57 | 
58 |
59 | ## 新增Props
60 | **handleInfo**
61 | 类型: `Object`
必需: `false`
默认: `{
62 | size: 8,
63 | offset: -5,
64 | switch: true
65 | }`
66 |
67 | 当使用`transform:scale()`进行缩放操作时，其中`switch`为是否让handle始终保持视觉效果不变,`size`为handle的大小(宽高相同),
68 | `offset`为handle的位置偏移，通常在自定义handle样式时需要设置。
69 |
70 | ```vue
71 |
72 | ```
73 |
74 | **scaleRatio**
75 | 类型: `Number`
必需: `false`
默认: `1`
76 |
77 | 当使用`transform:scale()`进行缩放操作时，用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况
78 |
79 | 详见:[Issues](https://github.com/gorkys/vue-draggable-resizable/issues/6)
80 |
81 | ```vue
82 |
83 | ```
84 |
85 | **isConflictCheck**
86 | 类型: `Boolean`
必需: `false`
默认: `false`
87 |
88 | 定义组件是否开启冲突检测。
89 |
90 | ```vue
91 |
92 | ```
93 |
94 | **snap**
95 | 类型: `Boolean`
96 | 必需: `false`
97 | 默认: `false`
98 |
99 | 定义组件是否开启元素对齐。
100 |
101 | ```vue
102 |
103 | ```
104 |
105 | **snapTolerance**
106 | 类型: `Number`
107 | 必需: `false`
108 | 默认: `5`
109 |
110 | 当调用`snap`时，定义组件与元素之间的对齐距离，以像素(px)为单位。
111 |
112 | ```vue
113 |
114 | ```
115 | ## 新增Events
116 | **refLineParams**
117 | 参数: params
118 |
119 | 返回参数是一个Object,里面包含`vLine`与`hLine`，具体使用参考下面代码。
120 |
121 | ```vue
122 |
123 |
124 |
125 |
130 |
135 |
136 |
137 |
161 | ```
162 |
163 |
164 |
165 | ## 其它属性
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | ## License
174 |
175 | The MIT License (MIT). Please see [License File](LICENSE) for more information.
176 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 工具区域
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 左侧菜单
13 |
14 |
15 |
16 |
17 |
23 |
24 |
25 |
26 |
27 |
43 |
44 |
46 |
47 | {{item.id}}
48 |
49 |
66 |
67 |
68 |
71 |
72 |
73 |
74 |
75 | 配置区域
76 |
77 |
78 |
79 |
80 |
81 |