├── .eslintignore
├── .gitignore
├── assets
    ├── iconfont.eot
    ├── iconfont.ttf
    ├── iconfont.woff
    ├── iconfont.css
    ├── iconfont.svg
    └── iconfont.js
├── config.json
├── src
    ├── assets
    │   ├── img
    │   │   ├── main_bg.png
    │   │   ├── search.png
    │   │   └── view_bg.png
    │   ├── iconFont
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.ttf
    │   │   ├── iconfont.woff
    │   │   ├── demo.css
    │   │   ├── demo_fontclass.html
    │   │   └── iconfont.css
    │   └── less
    │   │   ├── UI.less
    │   │   ├── header.less
    │   │   └── rest.less
    ├── plugins
    │   ├── README.md
    │   └── Toast
    │   │   ├── toast.js
    │   │   └── toast.vue
    ├── components
    │   ├── Page.vue
    │   ├── textTitle.vue
    │   ├── imgTitle.vue
    │   ├── Paragraph.vue
    │   ├── index.js
    │   ├── footerComponent.vue
    │   ├── HeaderComponent.vue
    │   ├── passBanner.vue
    │   ├── textLink.vue
    │   ├── swipeBanner.vue
    │   ├── TheSection.vue
    │   ├── brandList.vue
    │   ├── ordinaryProduct.vue
    │   ├── startEffect.vue
    │   ├── hotImage.vue
    │   └── scrollActive.vue
    ├── viewComponents
    │   ├── textTitle.vue
    │   ├── imgTitle.vue
    │   ├── Paragraph.vue
    │   ├── TheSection.vue
    │   ├── index.js
    │   ├── passBanner.vue
    │   ├── HeaderComponent.vue
    │   ├── hotImage.vue
    │   ├── textLink.vue
    │   ├── swipeBanner.vue
    │   ├── scrollActive.vue
    │   ├── brandList.vue
    │   ├── ordinaryProduct.vue
    │   └── startEffect.vue
    ├── widgets
    │   ├── siteTree.js
    │   ├── util.js
    │   └── widgetTree.js
    ├── layout
    │   ├── Render.vue
    │   ├── viewRender.vue
    │   ├── leftModel.vue
    │   └── configRight.vue
    ├── tpl
    │   └── edit.html
    ├── server
    │   ├── mock.js
    │   ├── api.js
    │   └── http.js
    ├── common
    │   ├── jsonTree.vue
    │   ├── scroll.vue
    │   └── hotDrag.vue
    ├── edit.js
    ├── view.js
    ├── view.vue
    ├── store.js
    └── edit.vue
├── .editorconfig
├── .github
    └── workflows
    │   └── nodejs.yml
├── .babelrc
├── mock
    ├── getpool.json
    └── getConfig.json
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | package-lock.json
5 | 


--------------------------------------------------------------------------------
/assets/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/assets/iconfont.eot


--------------------------------------------------------------------------------
/assets/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/assets/iconfont.ttf


--------------------------------------------------------------------------------
/assets/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/assets/iconfont.woff


--------------------------------------------------------------------------------
/config.json:
--------------------------------------------------------------------------------
1 | {
2 | 
3 |   "version":"0.0.3",
4 |   "jsLink":["vendor.js","build.js","view.js"]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/img/main_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/img/main_bg.png


--------------------------------------------------------------------------------
/src/assets/img/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/img/search.png


--------------------------------------------------------------------------------
/src/assets/img/view_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/img/view_bg.png


--------------------------------------------------------------------------------
/src/assets/iconFont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/iconFont/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/iconFont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/iconFont/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/iconFont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ithack/vueCMS/HEAD/src/assets/iconFont/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/less/UI.less:
--------------------------------------------------------------------------------
 1 | .but{
 2 |   background-color:#fff;
 3 |   border-radius:5px;
 4 |   color:#333;
 5 |   &:hover{
 6 |     background-color:#5E9EF3;
 7 |     color:#fff;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | 
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | indent_style = space
10 | indent_size = 2
11 | 
12 | [Makefile]
13 | indent_style = tab
14 | 


--------------------------------------------------------------------------------
/src/plugins/README.md:
--------------------------------------------------------------------------------
 1 | **plugins 插件文件**
 2 | 
 3 | 创建一些关于toast等公用性较强的插件到vue实例用，目前所有类似功能全部用elemetUI或mintUi，暂时没有用到此文件；
 4 | 
 5 | toast用法：
 6 | ```$xslt
 7 | //入口文件引入toast
 8 | import Toast from './plugins/toast.js';
 9 | import Vue from 'vue'
10 | 
11 | Vue.use(Toast)
12 | 
13 | //组件中直接调用
14 | this.$toast('toast测试内容')
15 | 
16 | ```
17 | 


--------------------------------------------------------------------------------
/src/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component" :style="node.styl" :component-name="node.name">
 3 | 
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'template',
10 |     props: ['node', 'themeColor'],
11 |     data(){
12 |       return {
13 |       }
14 |     },
15 |     computed: {
16 |     },
17 |   }
18 | </script>
19 | 
20 | <style lang="less">
21 | 
22 | </style>
23 | 
24 | 


--------------------------------------------------------------------------------
/src/components/textTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component" :style="node.styl" :component-name="node.name">{{node.other.title}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |       name: "textTitle",
 8 |       props: ['node', 'themeColor'],
 9 |       data(){
10 |         return {
11 |         }
12 |       },
13 |       computed: {
14 |       },
15 |     }
16 | </script>
17 | 
18 | <style scoped>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/viewComponents/textTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component" :style="node.styl" :component-name="node.name">{{node.other.title}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |       name: "textTitle",
 8 |       props: ['node', 'themeColor'],
 9 |       data(){
10 |         return {
11 |         }
12 |       },
13 |       computed: {
14 |       },
15 |     }
16 | </script>
17 | 
18 | <style scoped>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/components/imgTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component image_title" :style="node.styl" :component-name="node.name"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |       name: "imgTitle",
 8 |       props: ['node', 'themeColor'],
 9 |       data(){
10 |         return {
11 |         }
12 |       },
13 |       computed: {
14 |       },
15 |     }
16 | </script>
17 | 
18 | <style scoped lang="less">
19 | .image_title{
20 |   background-repeat:no-repeat;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/viewComponents/imgTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component image_title" :style="node.styl" :component-name="node.name"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     export default {
 7 |       name: "imgTitle",
 8 |       props: ['node', 'themeColor'],
 9 |       data(){
10 |         return {
11 |         }
12 |       },
13 |       computed: {
14 |       },
15 |     }
16 | </script>
17 | 
18 | <style scoped lang="less">
19 | .image_title{
20 |   background-repeat:no-repeat;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/widgets/siteTree.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 2018/5/16
 3 |  * Created by yangkai9
 4 |  */
 5 | let siteTree = {
 6 |   "type": "page",
 7 |   "name": "页面",
 8 |   "index": 0,
 9 |   "config": [{
10 |     "key": "pid",
11 |     "value": "123456789",
12 |     "text": "组件id",
13 |     "type": "text"
14 |   }, {
15 |     "style": "padding",
16 |     "value": ["0px", "0px", "0px", "0px"],
17 |     "text": "外边距",
18 |     "type": "css"
19 |   }, {
20 |     "style": "backgroundColor",
21 |     "value": "#fff",
22 |     "text": "背景色",
23 |     "type": "color"
24 |   }],
25 |   "children": []
26 | }
27 | export default siteTree
28 | 


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | name: Cms
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     strategy:
11 |       matrix:
12 |         node-version: [8.x, 10.x, 12.x]
13 | 
14 |     steps:
15 |     - uses: actions/checkout@v1
16 |     - name: Use Node.js ${{ matrix.node-version }}
17 |       uses: actions/setup-node@v1
18 |       with:
19 |         node-version: ${{ matrix.node-version }}
20 |     - name: npm install, build, and test
21 |       run: |
22 |         npm ci
23 |         npm run build --if-present
24 |         npm run serve
25 |       env:
26 |         CI: true
27 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "targets": {
 5 |         "safari": 7,
 6 |         "firefox": 52,
 7 |         "chrome": 42,
 8 |         "edge": 10
 9 |       },
10 |       "exclude": [
11 |         "transform-regenerator"
12 |       ]
13 |     }]
14 |   ],
15 |   "plugins": [
16 |     [
17 |       "component",
18 |       {
19 |         "libraryName": "element-ui",
20 |         "styleLibraryName": "theme-chalk"
21 |       }
22 |     ],"syntax-dynamic-import",
23 |     "transform-object-rest-spread","transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/mock/getpool.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "data": {
 3 |     "list": [
 4 |       {
 5 |         "imgurl": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3141886839,1073302871&fm=26&gp=0.jpg",
 6 |         "skuid": "123456",
 7 |         "name": "测试数据标题名字"
 8 |       },
 9 |       {
10 |         "imgurl": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=238640327,3002157289&fm=200&gp=0.jpg",
11 |         "skuid": "2",
12 |         "name": "测试数据美女1"
13 |       },
14 |       {
15 |         "imgurl": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=254618362,2906926008&fm=200&gp=0.jpg",
16 |         "skuid": "3",
17 |         "name": "测试数据美女2"
18 |       }
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/Paragraph.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component paragraph" :style="styl" :component-name="node.name">
 3 |     <h1>{{other.title}}</h1>
 4 |     <small>333</small>
 5 |     <input>
 6 |     <div>提交</div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 |   import { mapMutations } from 'vuex'
12 | export default {
13 |   name: 'paragraph',
14 |   props: ['node', 'themeColor','msg'],
15 |   data(){
16 |     return {
17 |     }
18 |   },
19 |   computed: {
20 | 
21 |   },
22 |   created(){
23 | 
24 |   },
25 | 
26 |   methods:{
27 | 
28 |   }
29 | }
30 | </script>
31 | 
32 | <style scoped>
33 | .paragraph {
34 |   cursor: move;
35 | }
36 | .paragraph:hover {
37 |   background: #ddd;
38 | }
39 | </style>
40 | 
41 | 


--------------------------------------------------------------------------------
/src/viewComponents/Paragraph.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component paragraph" :style="styl" :component-name="node.name">
 3 |     <h1>{{other.title}}</h1>
 4 |     <small>333</small>
 5 |     <input>
 6 |     <div>提交</div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 |   import { mapMutations } from 'vuex'
12 | export default {
13 |   name: 'paragraph',
14 |   props: ['node', 'themeColor','msg'],
15 |   data(){
16 |     return {
17 |     }
18 |   },
19 |   computed: {
20 | 
21 |   },
22 |   created(){
23 | 
24 |   },
25 | 
26 |   methods:{
27 | 
28 |   }
29 | }
30 | </script>
31 | 
32 | <style scoped>
33 | .paragraph {
34 |   cursor: move;
35 | }
36 | .paragraph:hover {
37 |   background: #ddd;
38 | }
39 | </style>
40 | 
41 | 


--------------------------------------------------------------------------------
/src/viewComponents/TheSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="section component floor" :id="'floor-'+node.id" :floorId="node.id" :style="node.styl">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { mapMutations, mapState, mapActions } from 'vuex'
 9 | 
10 | export default {
11 |   name: 'the-section',
12 |   props: ['node', 'type' , 'curr'],
13 |   data () {
14 |     return {
15 |       old:0,
16 |     }
17 |   },
18 |   computed: {
19 |     ...mapState(['site', 'currentConfig', 'htmlCon']),
20 |   },
21 |   created(){
22 | 
23 |   },
24 |   mounted(){
25 |   },
26 |   methods: {
27 |   }
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 |   .section {
33 |    background-color:darkgray;width:100%;min-height:30px;box-sizing: border-box;
34 |   }
35 | 
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/assets/less/header.less:
--------------------------------------------------------------------------------
 1 | 
 2 | header{
 3 |   height:60px;background-color:#fff;width:100%;border-bottom:1px solid #ccc;position:absolute;top:0;left:0;padding:0 12px;box-sizing:border-box;overflow:hidden;
 4 |   .header_left{display:inline-block;}
 5 |   //.el-switch{margin:20px 10px;}
 6 |   .el-switch__label *{line-height:20px;}
 7 |   .header_but{display:inline-block;width:100px;height:28px;border-radius:4px;font-size:14px;line-height:28px;margin:15px 0;text-align:center;}
 8 |   .but_blue{background:#5E9EF3;color:#fff;}
 9 |   & span{float:left;cursor:pointer;}
10 |   .header_right{
11 |     display:inline-block;float:right;
12 |     &>span{margin:15px 6px;}
13 |   }
14 | }
15 | .a_but{
16 |   background:#5E9EF3;color:#fff;
17 |   &:hover{
18 |     border:1px solid #ccc;color:#333;background-color:#fff;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/layout/Render.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <component :is="node.type" :node="node" :type="type" :floor-index="index" :com-id="node.id">
 3 |       <render v-for="child in node.children" :key="child.temId" :node="child" v-if="!child.placeholder" :type="type" :com-id="child.id"/>
 4 |     </component>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { mapState, mapMutations } from 'vuex'
 9 | import edit from '~/components/index'
10 | export default {
11 |   name: 'render',
12 |   props: ['node','type','index'],
13 |   data(){
14 |     return{
15 |     }
16 |   },
17 |   computed:{
18 |     ...mapState(['site'])
19 |   },
20 |   components: edit,
21 |   mounted(){
22 |     this.incrementGid();
23 |     console.log("aaa")
24 |   },
25 |   methods:{
26 |     ...mapMutations(['setConfig', 'delCurrDom','incrementGid']),
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/layout/viewRender.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component :is="node.type" :node="node" :type="type" :com-id="node.id" :floor-index="index">
 3 |     <render v-for="child in node.children" :key="child.temId" :node="child" :type="type" :com-id="child.id"/>
 4 |   </component>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 |   // import com
10 |   import { mapState, mapMutations } from 'vuex'
11 |   import view from '~/viewComponents/index'
12 |   export default {
13 |     name: 'render',
14 |     props: ['node','type','index'],
15 |     data(){
16 |       return{
17 |       }
18 |     },
19 |     computed:{
20 |       ...mapState(['site'])
21 |     },
22 |     components: view,
23 |     mounted(){
24 |       this.incrementGid()
25 |     },
26 |     methods:{
27 |       ...mapMutations(['setConfig', 'delCurrDom','incrementGid']),
28 |     }
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/viewComponents/index.js:
--------------------------------------------------------------------------------
 1 | // 导入JSON 树中所涉及的所有节点
 2 | import Page from './../components/Page.vue'  //组件模版用
 3 | // import Paragraph from './Paragraph'
 4 | import TheSection from './TheSection'
 5 | // import footerComponent from './footerComponent'
 6 | export default {
 7 |   // Paragraph,
 8 |   TheSection,
 9 |   HeaderComponent:() => import('./HeaderComponent'),
10 |   scrollActive:()=>import('./scrollActive'),//锚点导航
11 |   // footerComponent,
12 |   textTitle:()=>import('./textTitle'),
13 |   imgTitle:()=>import('./imgTitle'),
14 |   swipeBanner:()=>import('./swipeBanner'),
15 |   ordinaryProduct:()=>import('./ordinaryProduct'),//普通商品
16 |   hotImage:()=>import('./hotImage'),//图片热区
17 |   passBanner:()=>import('./passBanner'),//通栏广告
18 |   textLink:()=>import('./textLink'),//文字链
19 |   brandList:()=>import('./brandList'),//品牌列表
20 |   startEffect:()=>import('./startEffect'),//启动动效
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | // 导入JSON 树中所涉及的所有节点
 2 | import Page from './../components/Page.vue'  //组件模版用
 3 | // import TheSection from './../components/TheSection.vue' //楼层模版
 4 | import Paragraph from './../components/Paragraph.vue'
 5 | import TheSection from './TheSection'
 6 | import footerComponent from './footerComponent.vue'
 7 | export default {
 8 |   Paragraph,
 9 |   TheSection,
10 |   HeaderComponent:() => import('./HeaderComponent'),
11 |   scrollActive:()=>import('./scrollActive'),//锚点导航
12 |   footerComponent,
13 |   textTitle:()=>import('./textTitle'),
14 |   imgTitle:()=>import('./imgTitle'),
15 |   swipeBanner:()=>import('./swipeBanner'),
16 |   ordinaryProduct:()=>import('./ordinaryProduct'),//普通商品
17 |   hotImage:()=>import('./hotImage'),//图片热区
18 |   passBanner:()=>import('./passBanner'),//通栏广告
19 |   textLink:() =>import('./textLink'),//文字链
20 |   brandList:() =>import('./brandList'),//品牌列表
21 |   startEffect:() =>import('./startEffect'),//启动动效
22 | }
23 | 


--------------------------------------------------------------------------------
/src/tpl/edit.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>移动端</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 7 |   <!--禁止ios上自动识别电话-->
 8 |   <meta content="telephone=no" name="format-detection" />
 9 |   <!--禁止android上自动识别邮箱-->
10 |   <meta content="email=no" name="format-detection" />
11 |   <!--针对ios上的safari上地址栏和顶端样式条-->
12 |   <meta name="apple-mobile-web-app-capable" content="yes" />
13 |   <!-- 听说在ios7以上版本就没效果了 -->
14 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
15 |   <!-- 可选default、black、black-translucent 但是我都是用black-->
16 | 
17 |   <script src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
18 | </head>
19 | <body>
20 | <div id="app">
21 | </div>
22 | <script>
23 |   window.htmlConfig={
24 |     readOnly:false
25 |   }
26 | </script>
27 | <script>
28 | </script>
29 | </body>
30 | 
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/components/footerComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <mt-tabbar class="component" :style="node.styl" v-model="selected">
 3 |     <mt-tab-item id="首页">
 4 |       首页
 5 |     </mt-tab-item>
 6 |     <mt-tab-item id="活动">
 7 |       活动
 8 |     </mt-tab-item>
 9 |     <mt-tab-item id="购物车">
10 |       购物车
11 |     </mt-tab-item>
12 |     <mt-tab-item id="我的">
13 |       我的
14 |     </mt-tab-item>
15 |   </mt-tabbar>
16 | </template>
17 | 
18 | <script>
19 |   import { Tabbar, TabItem } from 'mint-ui';
20 |   export default {
21 |     name: 'footerComponent',
22 |     props: ['node', 'themeColor'],
23 |     data(){
24 |       return {
25 |         selected:'首页'
26 |       }
27 |     },
28 |     computed: {
29 |     },
30 |     methods:{
31 | 
32 |     },
33 |     components:{
34 |       'mtTabbar':Tabbar,
35 |       'mtTabItem':TabItem
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style scoped>
41 |   section {
42 |     border: 2px solid transparent;
43 |   }
44 |   section:hover {
45 |     border: 2px solid tomato;
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/plugins/Toast/toast.js:
--------------------------------------------------------------------------------
 1 | import toast from './toast.vue'
 2 | let Toast={};
 3 | Toast.install=(Vue,option={})=>{
 4 |   const ToastTem=Vue.extend(toast);
 5 |   let removeDom = event => {
 6 |     if (event.target.parentNode.childNodes.length > 1) {
 7 |       event.target.parentNode.removeChild(event.target)
 8 |     } else {
 9 |       event.target.parentNode.parentNode.removeChild(event.target.parentNode)
10 |     }
11 |   }
12 |   ToastTem.prototype.close=function(){
13 |     this.visible=false;
14 |     this.$el.addEventListener('transitionend',removeDom)
15 |   }
16 |   Vue.prototype.$toast=(option)=>{
17 |     var instance = new ToastTem().$mount(document.createElement('div'));
18 |     let duration = option.duration || option.duration || 2500;
19 |     instance.message = typeof option==='string'? option :option.message;
20 |     instance.position=option.position|| 'middle-bottom'
21 |     document.body.appendChild(instance.$el);
22 |     setTimeout(function () {
23 |       instance.close()
24 |     }, duration)
25 |   }
26 | }
27 | export default Toast
28 | 


--------------------------------------------------------------------------------
/src/server/mock.js:
--------------------------------------------------------------------------------
 1 | /*import Mock from 'mockjs'
 2 | Mock.mock('http://config.json', 'get', [
 3 |   {
 4 |     key: 'pid',
 5 |     value: '123456789',
 6 |     text: '组件id',
 7 |     type: 'text'
 8 |   },
 9 |   {
10 |     style: 'width',
11 |     value: 'auto',
12 |     text: '宽',
13 |     type: 'css'
14 |   },
15 | 
16 |   {
17 |     style: 'margin',
18 |     value: ['0px','0px','0px','0px'],
19 |     text: '内边距',
20 |     type: 'css'
21 |   },
22 |   {
23 |     style: 'padding',
24 |     value: ['0px','0px','0px','0px'],
25 |     text: '外边距',
26 |     type: 'css'
27 |   },
28 |   {
29 |     style: 'backgroundColor',
30 |     value: '#fff',
31 |     text: '背景色',
32 |     type: 'color'
33 |   },
34 |   {
35 |     style: 'backgroundImage',
36 |     value: '',
37 |     text: '背景图',
38 |     key:'img',
39 |     type: 'css'
40 |   },
41 |   {
42 |     type: 'text',
43 |     value: '测试文字',
44 |     key: 'title',
45 |     text: '测试'
46 |   },
47 |   {
48 |     type: 'attr',
49 |     value: '123456',
50 |     key: 'kid',
51 |     text: '数据ID'
52 |   }
53 | ])*//**
54 |  * 2018/5/18
55 |  * Created by yangkai9
56 |  */
57 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 tanghejun
 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.
22 | 


--------------------------------------------------------------------------------
/src/common/jsonTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tree">
 3 |     <el-tree
 4 |       :data="json"
 5 |       :props="defaultProps"
 6 |       default-expand-all
 7 |       :expand-on-click-node="false"
 8 |       @node-click="handleNodeClick">
 9 |     </el-tree>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   import { mapMutations} from 'vuex'
15 |     export default {
16 |       name: "tree",
17 |       props:['json'],
18 |       data(){
19 |         return {
20 |           defaultProps: {
21 |             children: 'children',
22 |             label: 'name'
23 |           }
24 |         }
25 |       },
26 |       methods: {
27 |         ...mapMutations(['setConfig']),
28 |         handleNodeClick(data,node,self) {
29 |           data.index=-1;
30 |            this.setConfig({currDom: data})
31 |            let elId=data.id,
32 |                 el=document.querySelector(`[com-id='${elId}']`),
33 |                 elTop=el.getBoundingClientRect().top,
34 |                 parentEl=document.querySelector('.view_box');
35 |            parentEl.scrollTop=el.offsetTop
36 |         }
37 |       }
38 |     }
39 | </script>
40 | 
41 | <style scoped>
42 | 
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/viewComponents/passBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component pass-banner" :style="node.styl" :component-name="node.name">
 3 |     <a v-for="(item,i) in imgList" v-if="i==1" :href="item.url">
 4 |       <img :src="item.imgurl" alt="">
 5 |     </a>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import {poolList} from '../server/api'
11 |   export default {
12 |     name: 'pass-banner',
13 |     props: ['node', 'themeColor'],
14 |     data(){
15 |       return {
16 |         imgList:[]
17 |       }
18 |     },
19 |     computed: {
20 |       pid:function(){
21 |         return this.node.other.pid
22 |       },
23 |     },
24 |     created(){
25 |       this.getData(this.pid);
26 |     },
27 |     methods:{
28 |       getData(id){
29 |         let that=this;
30 |         poolList({pid:id}).then(({code, list})=>{
31 |           console.log("333")
32 |           if(code==0){
33 |             that.imgList=[...list]
34 |           }else{
35 |             this.$toast("接口错误")
36 |           }
37 |         })
38 |       },
39 |     },
40 |   }
41 | </script>
42 | 
43 | <style lang="less">
44 | .pass-banner{
45 |   border-width:1px;box-sizing:border-box;overflow:hidden;background-size: contain;background-repeat:no-repeat;
46 |   img{width:100%;}
47 | }
48 | </style>
49 | 
50 | 


--------------------------------------------------------------------------------
/src/components/HeaderComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="mint-header" v-show="node.other.isFixed==1"></div>
 4 |     <mt-header :fixed="node.other.isFixed==1" :title="node.other.title" :style="node.styl" :component-name="node.name">
 5 |       <mt-button icon="back" slot="left">返回</mt-button>
 6 |       <div slot="right">
 7 |         <mt-button v-if="node.other.title_menu==1">
 8 |           <div class="icon iconfont icon-search" slot="icon"></div>
 9 |         </mt-button>
10 |         <mt-button v-else-if="node.other.title_menu==2" >
11 |           <div class="icon iconfont icon-gouwuche" slot="icon"></div>
12 |         </mt-button>
13 |         <mt-button icon="more" slot="right" v-if="node.other.isMore==1"></mt-button>
14 |       </div>
15 |     </mt-header>
16 |   </div>
17 | 
18 | </template>
19 | 
20 | <script>
21 |   import { Header, Button,Search } from 'mint-ui';
22 |   export default {
23 |     name: 'header-component',
24 |     props: ['node', 'themeColor'],
25 |     data(){
26 |       return {
27 |         search:""
28 |       }
29 |     },
30 |     methods:{
31 |     },
32 |     components:{
33 |       'mtHeader': Header,
34 |       'mtButton': Button,
35 |     }
36 |   }
37 | </script>
38 | 
39 | <style scoped>
40 | .mint-header{
41 |   background-color:#fff;color:#000;
42 | }
43 | </style>
44 | 
45 | 


--------------------------------------------------------------------------------
/src/edit.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill'
 2 | import Vue from 'vue'
 3 | import { Upload,MessageBox,Button,Input,Select,Option,Form,FormItem,Dialog,Row,Switch,Tree} from 'element-ui'
 4 | import {Toast} from 'mint-ui'
 5 | import Lazyload from 'vue-lazyload'
 6 | import App from './edit.vue'
 7 | import store from './store'
 8 | import axios from './server/http'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | import 'mint-ui/lib/style.css'
11 | Vue.component(Button.name,Button);
12 | Vue.component(Select.name,Select);
13 | Vue.component(Option.name,Option);
14 | Vue.component(Input.name,Input);
15 | Vue.component(Row.name,Row);
16 | Vue.component(Form.name,Form);
17 | Vue.component(FormItem.name,FormItem);
18 | Vue.component(Dialog.name,Dialog);
19 | Vue.component(Upload.name, Upload)
20 | Vue.component(Switch.name, Switch)
21 | Vue.component(Tree.name, Tree)
22 | Vue.component(MessageBox.name, MessageBox)
23 | const app = new Vue({
24 |   store,
25 |   render: h => h(App)
26 | })
27 | Vue.prototype.$http=axios
28 | Vue.prototype.$msgbox = MessageBox
29 | Vue.prototype.$alert = MessageBox.alert
30 | Vue.prototype.$confirm = MessageBox.confirm
31 | Vue.prototype.$toast = Toast
32 | Vue.use(Upload)
33 | // Vue.use(Scrollactive);
34 | //懒加载配置
35 | Vue.use(Lazyload, {
36 |   error: '',
37 |   loading: '',
38 | })
39 | // config配置项筛选器
40 | app.$mount('#app')
41 | 


--------------------------------------------------------------------------------
/src/components/passBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component pass-banner" :style="node.styl" :component-name="node.name">
 3 |     <img v-for="(item,i) in imgList" v-if="i==1" :src="item.imgurl" alt="">
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import {poolList} from '../server/api'
 9 |   export default {
10 |     name: 'pass-banner',
11 |     props: ['node', 'themeColor'],
12 |     data(){
13 |       return {
14 |         imgList:[]
15 |       }
16 |     },
17 |     computed: {
18 |       pid:function(){
19 |         return this.node.other.pid
20 |       },
21 |     },
22 |     watch:{
23 |       'pid':function(val,old){
24 |         if(val.length>=7){
25 |           this.getData(val)
26 |         }
27 | 
28 |       }
29 |     },
30 |     created(){
31 |       this.getData(this.pid);
32 |     },
33 |     methods:{
34 |       getData(id){
35 |         let that=this;
36 |         poolList({pid:id}).then(({code, list})=>{
37 |           if(code==0){
38 |             that.imgList=[...list]
39 |           }else{
40 |             this.$toast("接口错误")
41 |           }
42 |         })
43 |       },
44 |     },
45 |   }
46 | </script>
47 | 
48 | <style lang="less">
49 | .pass-banner{
50 |   border-width:1px;box-sizing:border-box;overflow:hidden;background-size: contain;background-repeat:no-repeat;
51 |   img{width:100%;}
52 | }
53 | </style>
54 | 
55 | 


--------------------------------------------------------------------------------
/src/plugins/Toast/toast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-show='visible' :class="[position]" class='toast'>
 3 |     <i>{{message}}</i>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: "toast",
10 |     data(){
11 |       return {
12 |         message:"",
13 |         visible:true,
14 |         position: 'middle-bottom'
15 |       }
16 |     }
17 |   }
18 | </script>
19 | 
20 | <style lang='less' scoped>
21 |   .toast {
22 |     position: fixed;
23 |     left: 50%;
24 |     transform: translate(-50%, -50%) scale(1);
25 |     word-wrap: break-word;
26 |     padding: rem(10);
27 |     text-align: center;
28 |     z-index: 888;
29 |     @include fontSize(30);
30 |     max-width: 80%;
31 |     color: #fff;
32 |     border-radius: rem(20);
33 |     padding: rem(30) rem(34);
34 |     background: rgba(0, 0, 0, 0.7);
35 |     overflow: hidden;
36 |   }
37 |   .toast.middle {
38 |     top: 50%;
39 |   }
40 |   .toast.top {
41 |     top: 10%;
42 |   }
43 |   .toast.middle-bottom {
44 |     top: 70%;
45 |   }
46 |   .toast.bottom {
47 |     top: 90%;
48 |   }
49 |   .fade-enter-active,
50 |   .fade-leave-active {
51 |     transition: transform 0.5s;
52 |   }
53 |   // .fade-enter,
54 |   // .fade-leave-active {
55 |   //   transform: translate(-50%, -50%) scale(0);
56 |   // }
57 |   .fade-enter {
58 |     transform: translate(-50%, -50%) scale(0);
59 |   }
60 |   .fade-leave-active {
61 |     opacity: 0;
62 |   }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/mock/getConfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "code": 0,
 3 |   "data": {
 4 |     "id": 2,
 5 |     "name": "楼层模型",
 6 |     "type_id": 1,
 7 |     "props": [
 8 |       {
 9 |         "id": 10,
10 |         "title": "楼层ID",
11 |         "name": "pool_id",
12 |         "remark": "",
13 |         "val_type": 1,
14 |         "ui_type": 1,
15 |         "is_must": 1,
16 |         "options": [],
17 |         "default_val": "2"
18 |       },
19 |       {
20 |         "id": 8,
21 |         "title": "外边距",
22 |         "name": "margin",
23 |         "remark": "css",
24 |         "val_type": 1,
25 |         "ui_type": 1,
26 |         "is_must": 1,
27 |         "options": [],
28 |         "default_val": "0 0 10px 0"
29 |       },
30 |       {
31 |         "id": 103,
32 |         "title": "内间距",
33 |         "name": "padding",
34 |         "remark": "css",
35 |         "val_type": 1,
36 |         "ui_type": 1,
37 |         "is_must": 0,
38 |         "options": [],
39 |         "default_val": "0 0 0 0"
40 |       },
41 |       {
42 |         "id": 9,
43 |         "title": "背景色",
44 |         "name": "backgroundColor",
45 |         "remark": "css",
46 |         "val_type": 1,
47 |         "ui_type": 6,
48 |         "is_must": 1,
49 |         "options": [],
50 |         "default_val": "#ccc"
51 |       },
52 |       {
53 |         "id": 59,
54 |         "title": "背景图",
55 |         "name": "backgroundImage",
56 |         "remark": "css",
57 |         "val_type": 1,
58 |         "ui_type": 7,
59 |         "is_must": 0,
60 |         "options": [],
61 |         "default_val": ""
62 |       }
63 |     ]
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/view.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill'
 2 | import Vue from 'vue'
 3 | import {Toast} from 'mint-ui'
 4 | import Lazyload from 'vue-lazyload'
 5 | import App from './view.vue'
 6 | import store from './store'
 7 | import axios from './server/http'
 8 | import 'mint-ui/lib/style.css'
 9 | import {getHtmlDocName,getQueryUrl} from '~/widgets/util'
10 | // import Scrollactive from 'vue-scrollactive'
11 | const app = new Vue({
12 |   store,
13 |   render: h => h(App)
14 | })
15 | Vue.prototype.$http=axios
16 | Vue.prototype.$toast = Toast
17 | // Vue.use(Scrollactive);
18 | // 懒加载配置
19 | Vue.use(Lazyload, {
20 |   error: '',
21 |   loading: '',
22 | })
23 | // config配置项筛选器
24 | // 埋点
25 | Vue.directive('$log', {
26 |   inserted: function (el, binding,vnode){
27 |     var getUrlId=getHtmlDocName().split('-');
28 |     $(el).attr('taglog',vnode.data.directives[0].value)
29 |     el.addEventListener('click', () => {
30 |       let floorEl=$(el).closest('.floor'),
31 |         floorId=floorEl.attr('floorid'),
32 |         floorName=floorEl.attr('floor-index'),
33 |         // appid=getUrlId[0]?getUrlId[0]:'0',
34 |         // pageid=getUrlId[1]?getUrlId[1]:'0',
35 |         // 预览页埋点方法
36 |         appid=getQueryUrl('app_id')||'0',
37 |         pageid=getQueryUrl('page_id')||0,
38 |         logString=appid+'|'+pageid+'|'+floorId+'|'+$(el).attr('taglog');
39 |       logString=Math.floor(Math.random()*2+1)+'|'+appid+'|' +pageid+'|'+floorId+'|楼层'+floorName+'|'+$(el).attr('taglog');
40 |       console.log('拼接后入参：'+logString)
41 |       log('esite', 'esite_h5',logString)
42 | 
43 |     })
44 |   }
45 | })
46 | app.$mount('#app')
47 | 


--------------------------------------------------------------------------------
/src/viewComponents/HeaderComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="mint-header" v-show="node.other.isFixed==1"></div>
 4 |     <mt-header :fixed="node.other.isFixed==1" :title="node.other.title" :style="node.styl" :component-name="node.name">
 5 |       <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
 6 |       <div slot="right">
 7 |         <mt-button v-if="node.other.title_menu==1" @chick="headerSearch">
 8 |           <div class="icon iconfont icon-search" slot="icon"></div>
 9 |         </mt-button>
10 |         <mt-button v-else-if="node.other.title_menu==2" @click="gouwuche">
11 |           <div class="icon iconfont icon-gouwuche" slot="icon"></div>
12 |         </mt-button>
13 |         <mt-button icon="more" @click="moreFn" slot="right" v-if="node.other.isMore==1"></mt-button>
14 |       </div>
15 |     </mt-header>
16 |   </div>
17 | 
18 | </template>
19 | 
20 | <script>
21 |   import { Header, Button,Search } from 'mint-ui';
22 |   export default {
23 |     name: 'header-component',
24 |     props: ['node', 'themeColor'],
25 |     data(){
26 |       return {
27 |         search:""
28 |       }
29 |     },
30 |     methods:{
31 |       goBack(){
32 |         history.back()
33 |       },
34 |       moreFn(){
35 |         this.$toast("暂未开启")
36 |       },
37 |       headerSearch(){
38 |         this.$toast("暂未开启")
39 |       },
40 |       gouwuche(){
41 |         this.$toast("暂未开启")
42 |       }
43 |     },
44 |     components:{
45 |       'mtHeader': Header,
46 |       'mtButton': Button,
47 |     }
48 |   }
49 | </script>
50 | 
51 | <style scoped>
52 | .mint-header{
53 |   background-color:#fff;color:#000;
54 | }
55 | </style>
56 | 
57 | 


--------------------------------------------------------------------------------
/src/widgets/util.js:
--------------------------------------------------------------------------------
 1 | let NODE_ENV=process.env.NODE_ENV;
 2 | // 获取cookie
 3 | export function getCookie(name) {
 4 |   var arr, reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
 5 |   if ( arr = document.cookie.match(reg))
 6 |     return (arr[2])
 7 |   else
 8 |     return null
 9 | }
10 | 
11 | // 设置cookie,增加到vue实例方便全局调用
12 | export function setCookie (c_name, value, expiredays) {
13 |   var exdate = new Date()
14 |   exdate.setDate(exdate.getDate() + expiredays)
15 |   document.cookie = c_name + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
16 | };
17 | 
18 | //删除cookie
19 | export function delCookie (name) {
20 |   var exp = new Date()
21 |   exp.setTime(exp.getTime() - 1)
22 |   var cval = getCookie(name)
23 |   if (cval != null)
24 |     document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
25 | };
26 | // 获取url 参数
27 | export function getQueryUrl (variable) {
28 |   var query = window.location.search.substring(1)
29 |   var vars = query.split('&');
30 |   for (var i = 0;i < vars.length;i++) {
31 |     var pair = vars[i].split('=')
32 |     if (pair[0] === variable) { return pair[1] }
33 |   }
34 |   return false
35 | }
36 | 
37 | export function getHtmlDocName() {
38 |   var str = window.location.href;
39 |   str = str.substring(str.lastIndexOf('/') + 1);
40 |   str = str.substring(0, str.lastIndexOf('.'));
41 |   return str
42 | }
43 | 
44 | export function link () {
45 |   let url
46 |   if (NODE_ENV === 'development'){
47 |     url = {
48 |       domain: '//kevin.com',
49 |       mItem: '//kevin.com'// 普通商品详情
50 |     }
51 |   } else {
52 |     url = {
53 |       domain: '',
54 |       mItem: '//kevin.com'// 普通商品详情
55 |     }
56 |   }
57 |   return url
58 | }
59 | 


--------------------------------------------------------------------------------
/src/viewComponents/hotImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component hot-image" :style="node.styl" :component-name="node.name" >
 3 |     <img :src="node.other.image" alt="" class="hot_bg_img">
 4 |     <a class="hot_link" v-for="(item,index) in hotStyle" :style="{width:`${item.w}`,height:`${item.h}`,left:`${item.x}`,top:`${item.y}`}" :link="item.linkValue" :link-type="item.linkType" @click.capture="clickHal(item.linkValue,item.linkType)"></a>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: "hotImage",
11 |     props: ['node', 'type'],
12 |     data(){
13 |       return {
14 |       }
15 |     },
16 |     computed: {
17 |       hotStyle(){
18 |         let elWidth=this.node.defaultwh.width,
19 |             elHeight=this.node.defaultwh.height;
20 |         this.node.hotStyle.map((item,i)=>{
21 |           item.w=(item.w/elWidth*100).toFixed(2)+'%';
22 |           item.h=(item.h/elHeight*100).toFixed(2)+'%';
23 |           item.x=(item.x/elWidth*100).toFixed(2)+'%';
24 |           item.y=(item.y/elHeight*100).toFixed(2)+'%';
25 |         })
26 |         return this.node.hotStyle
27 |       }
28 |     },
29 |     mounted(){
30 |     },
31 |     methods:{
32 |       clickHal(val,type){
33 |           if(type==0){
34 |             window.location.href=val;
35 |           }else if(type==1){
36 |             window.location.href='//item.m.jd.com/ware/view.action?wareId='+val;
37 |           }else{
38 |             window.location.href='//item.m.jd.com/ware/view.action?wareId='+val;
39 |           }
40 |       }
41 |     },
42 |   }
43 | </script>
44 | 
45 | <style scoped lang="less">
46 |   .image_title{
47 |     background-repeat:no-repeat;
48 |   }
49 | .hot-image{
50 |   position:relative;box-sizing: border-box;
51 |   .hot_bg_img{position:absolute;width:100%;height:100%;z-index:1}
52 |   .add_hot{position:absolute;z-index:99}
53 |   .hot_link{position:absolute;z-index:999;}
54 | }
55 | 
56 |   .el-input-group__prepend .el-select{
57 |    width:120px;
58 |   }
59 |   .el-input-group__prepend{background-color:#fff}
60 | </style>
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | vue_cms-x
 2 | ====
 3 | 可视化拖拽系统
 4 | #20190516 更新
 5 | 
 6 | 之前只是简单的删除了公司的一些代码，并没有细看，issues和私下有人说跑不起来，今天抽出几分钟吧主要的两个接口MOCK到本地，并实现`npm run dev` 跑起来！
 7 | 
 8 | 这里还要说一下，整个拖拽可视化过程都需要后端接口返回组件的样式和数据，这次只是今天加了一个楼层的配置模拟接口！
 9 | 
10 | 这个项目提交的github主要是提供一种VUE实现拖拽生成页面的开发思路，有很多不完美的地方，大家可以指正，开发这个项目时我也是第一次做这个场景的项目开发，并没有类似场景的开发经验，所以如果又其他更有更好的开发思路和方案欢迎交流沟通，不限框架！我当时在选型时考虑的是React和Vue的，之所以 选择Vue是因为相对熟练，毕竟从Vue1.x就在玩了，并且相对于React的单向数据流，Vue的双向数据绑定更能轻松实现场景中实时配置，可视化区域实时更新！如上是简单的选型考虑！至于实现方案我相信一定还有其他更好的方案，欢迎类似场景需求同行交流经验
11 | 
12 | #20180814更新
13 | 
14 | 1.加入组件code split优化
15 | 
16 | 2.项目目录出入口多页面打包完成，拆分view和edit两个页面，功能单一性；
17 |     
18 |       view只负责渲染组件用户浏览页面组件的加载
19 |       
20 |       edit加载更多UI和JS插件等
21 |       
22 |       view和edit拆分有助于后期开发的可观和操作性
23 |       
24 | 3.埋点的加入
25 | 
26 | ##使用说明
27 | ```
28 | npm install
29 | 
30 | npm run dev //本地运行 访问可视化编辑访问edit.html，显示效果访问view.html
31 | 
32 | npm run pre //预发打包
33 | 
34 | npm run build
35 | 
36 | ```
37 | componnet ====>编辑可视化组件
38 | 
39 | viewComponents  ====>  用户访问页面查看组件
40 | 
41 | layout  ====>   可视化编辑结构组件
42 | 
43 | server  ====>   所有相关请求接口文件配置
44 | 
45 | widgets ===>   组件列表编辑配置
46 | 
47 | plugins ===>   开发vue插件用，目前项目中用到的弹框等都是elementUI那一套，并没有自己开发，只写了个toast的例子在里边
48 | 
49 | 
50 | 组件开发步骤：
51 | 
52 | 1。src/components里创建vue文件，同时在index.js里创建异步组件方法例`ordinaryProduct:()=>import('./ordinaryProduct')`
53 | 
54 | 2。widgets-->widgets.js配置相关组件信息
55 | 
56 | 由于项目中设计到公司的一些域名，可能直接跑无法运行；
57 | 
58 | clone后要修改个文件：server中api文件中的createObject接口，这个接口是在拖拽后从后端请求组件配置接口，接口格式已经放到easy mock中；或者直接改掉store中getDefaultConfig方法，自己把组件配置写在本地一个文件中，这样拖拽时就可以看到效果
59 | 
60 | 整个可视化项目中心都在store和render文件里，viewRender只是clone了一下并删掉了一些view时没用的功能；
61 | 
62 | 核心:vuedraggable 和 vue的component组件，一切都围绕这两块做的
63 | 
64 | 分享整个可视化项目主要是给大家提供一个思路，（项目中用到了elementUI的一些上传，按钮，弹框的UI，所以打包后vendor比较大，也没有把view和edit单独打包公用插件）代码有瑕疵的地方还望指出，理想情况下如果创建一套这样可视化拖拽系统，其实应该加入node，虽然这一套可视化加入了异步加载组件，但如果用户访问我们搭建好的页面时还是需要加载js后才会出现页面，这各部分如果有node加入的话，用SSR效率和可用性更加完美，毕竟我们搭建的页面时给用户看的；
65 | 
66 | 欢迎大神指导意见
67 | 
68 | 整个项目从搭建开始都是作者一人在搞，项目近，任务重，请轻喷！！！
69 | 
70 | 原创不易，多多支持；
71 | 
72 | **TODOS**
73 | 
74 | copy 编辑配置有问题
75 | 
76 | 整体结构目录优化，重灾区top.vue，util文件夹，edit.js等文件调整和文件内部拆分颗粒
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 


--------------------------------------------------------------------------------
/src/view.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="root">
 3 |     <div class="view_box">
 4 |       <render v-for="(child,index) in site.children" :key="child.id" :index="index" :node="child" :type="'view'"/>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import './assets/less/rest.less'
11 |   import { mapState, mapActions} from 'vuex'
12 |   import Render from './layout/viewRender'
13 |   export default {
14 |     name: 'app',
15 |     components: {
16 |       Render,
17 |     },
18 |     data () {
19 |       return {
20 |         old:null,
21 |       }
22 |     },
23 |     computed: {
24 |       ...mapState(['site', 'currentConfig', 'page_id']),
25 |     },
26 |     methods: {
27 |       ...mapActions(['getSite']),
28 |     },
29 |     mounted () {
30 |       this.getSite();
31 | 
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style lang="less">
37 |   .no-dragClass{display:none;}
38 |   .root {
39 |     .laoding {
40 |       width: 100%;
41 |       height: 100%;
42 |       position: fixed;
43 |       left: 0;
44 |       top: 0;
45 |       z-index:9999;
46 |       font-size:14px;
47 |       color: #686868;
48 |       display:none;
49 |       text-align: center;
50 |       .jd-load {
51 |         position: relative;
52 |         top: 40%
53 |       }
54 |       .jd-load img {
55 |         display: block;
56 |         margin: 5px auto
57 |       }
58 |     }
59 |   }
60 |   .component_hover{
61 |     border:1px solid #5E9EF3;position: relative;
62 |     &:before{
63 |       content:attr(component-name);position:absolute;right:0;top:0;background-color:#5E9EF3;color:#fff;height:24px;line-height:24px;
64 |     }
65 |   }
66 |   .icon-shouqi{
67 |     transform: rotate(180deg);
68 |   }
69 |   .iconfont{
70 |     font-size:18px;color:#666;
71 |   }
72 |   .icon-white{color:#fff;}
73 | 
74 |   // main
75 |   #view_main{
76 |     background:url('./assets/img/main_bg.png') no-repeat;width:364px;height:720px;margin:0 auto;background-size:contain;position:relative;top:70px;
77 |     .view_box{
78 |       background-color:#F8F8F8;width:79%;height:72%;/*-webkit-transform: translate(13%,17%);*/border:1px solid #ccc;border-radius:5px;
79 |       overflow-x:auto;position:absolute;left: 10.2%;top: 12.8%;
80 |     }
81 |   }
82 | 
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/assets/less/rest.less:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | }
 5 | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
 6 |   display: block;
 7 | }
 8 | html {
 9 |   font-size: 12px;
10 |   font-family: 'Microsoft Yahei','Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
11 | }
12 | body{
13 |   height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch;max-width: 750px;margin:0 auto
14 | }
15 | audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
16 | img {
17 |   border: none;
18 |   vertical-align: middle;
19 | }
20 | a {
21 |   text-decoration: none;
22 |   outline: none;
23 |   /*设置的tap  A标签的时候出现的黑色高亮*/
24 |   -webkit-tap-highlight-color: transparent;
25 | }
26 | a:active { outline: 0; }
27 | .clearfix {
28 |   zoom: 1;
29 | }
30 | ul{list-style: none;}
31 | .clearfix:before,
32 | .clearfix:after {
33 |   content: '';
34 |   display: table;
35 | }
36 | .clearfix:after {
37 |   clear: both;
38 | }
39 | em {
40 |   font-style: normal;
41 | }
42 | input {
43 |   outline: none;
44 | }
45 | input[type="text"],
46 | input[type="tel"] {
47 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
48 |   user-select: text;
49 | }
50 | /* 去除iphone ipad 设备默认按钮样式 */
51 | input[type="button"], input[type="submit"], input[type="reset"] {
52 |   //-webkit-appearance: none;
53 |   border-radius: 0;
54 | }
55 | input::-webkit-outer-spin-button,
56 | input::-webkit-inner-spin-button {
57 |   //-webkit-appearance: none !important;
58 |   margin: 0;
59 | }
60 | input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; }
61 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
62 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; }
63 | image[lazy=loading] {
64 |   width: 40px;
65 |   height: 300px;
66 |   margin: auto;
67 | }
68 | /* 滚动槽 */
69 | ::-webkit-scrollbar {
70 |   width: 0px;
71 |   height: 0px;position:absolute;
72 | }
73 | ::-webkit-scrollbar-track {
74 |   border-radius: 3px;
75 |   background: rgba(0,0,0,0.0);
76 | }
77 | /* 滚动条滑块 */
78 | ::-webkit-scrollbar-thumb {
79 |   border-radius: 3px;
80 |   background: rgba(0,0,0,0);
81 | }
82 | @fontBase: 75;
83 | @import "../iconFont/iconfont.css";
84 | 


--------------------------------------------------------------------------------
/src/components/textLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component"  :component-name="node.name">
 3 |           <div class="container" :style="{'height':node.styl.height}">
 4 |             <ul :style="{'height':node.styl.height,'width':ulWidth}">
 5 |               <li :style="node.styl" v-for="(item,i) in imgList" :key="i" v-if="i<showNum">
 6 |                 <a href="javascript:;" :style="{'color':node.styl.color,'line-height':node.styl.height}"  :class="{ 'linehas': node.other.isLine == '1' }">{{item.title}}</a>
 7 |               </li>
 8 |             </ul>
 9 |           </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { poolList } from "../server/api";
15 | export default {
16 |   name: "text-link",
17 |   props: ["node", "themeColor"],
18 |   data() {
19 |     return {
20 |       imgList: [],
21 |     };
22 |   },
23 |   computed: {
24 |     pid: function() {
25 |       return this.node.other.pid;
26 |     },
27 |     showNum() {
28 |       if(parseInt(this.node.other.showNum)>this.imgList.length){
29 |            return this.imgList.length;
30 |       }else{
31 |            return parseInt(this.node.other.showNum) || 2;
32 |       }
33 |     },
34 |     ulWidth(){
35 |       var m = String(parseInt(this.node.styl.width)).length;
36 |       var n = this.node.styl.width.slice(m);
37 |       console.log(m,n);
38 |       console.log(this.showNum);
39 |       return parseInt(this.node.styl.width)*(this.showNum)+n;
40 |     }
41 |   },
42 |   watch: {
43 |     'pid': function(val, old) {
44 |       if (val.length >= 7) {
45 |         this.getData(val);
46 |       }
47 |     },
48 |   },
49 |   created() {
50 |     this.getData(this.pid);
51 |   },
52 |   methods: {
53 |     getData(id) {
54 |       let that = this;
55 |       poolList({ pid: id }).then(({ code, list }) => {
56 |         if (code == 0) {
57 |           that.imgList = [...list];
58 |           console.log(that.imgList);
59 |         } else {
60 |           this.$toast("接口错误");
61 |         }
62 |       });
63 |     }
64 |   }
65 | };
66 | </script>
67 | 
68 | <style lang="less">
69 | .container {
70 |   position:relative;
71 |   width: 100%;
72 |   overflow:scroll;
73 |   ul {
74 |     li {
75 |       float: left;
76 |       text-align: center;
77 |     }
78 |     .linehas{
79 |       text-decoration: underline;
80 |     }
81 |   }
82 | }
83 | </style>
84 | 
85 | 


--------------------------------------------------------------------------------
/src/viewComponents/textLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component"  :component-name="node.name">
 3 |           <div class="container" :style="{'height':node.styl.height}">
 4 |             <ul :style="{'height':node.styl.height,'width':ulWidth}">
 5 |               <li :style="node.styl" v-for="(item,i) in imgList" :key="i" v-if="i<showNum">
 6 |                 <a :href="item.link_value" :style="{'color':node.styl.color,'line-height':node.styl.height}"  :class="{ 'linehas': node.other.isLine == '1' }">{{item.title}}</a>
 7 |               </li>
 8 |             </ul>
 9 |           </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { poolList } from "../server/api";
15 | export default {
16 |   name: "text-link",
17 |   props: ["node", "themeColor"],
18 |   data() {
19 |     return {
20 |       imgList: [],
21 |     };
22 |   },
23 |   computed: {
24 |     pid: function() {
25 |       return this.node.other.pid;
26 |     },
27 |     showNum() {
28 |       if(parseInt(this.node.other.showNum)>this.imgList.length){
29 |            return this.imgList.length;
30 |       }else{
31 |            return parseInt(this.node.other.showNum) || 2;
32 |       }
33 |     },
34 |     ulWidth(){
35 |       var m = String(parseInt(this.node.styl.width)).length;
36 |       var n = this.node.styl.width.slice(m);
37 |       console.log(m,n);
38 |       return parseInt(this.node.styl.width)*(this.showNum)+n;
39 |     }
40 |   },
41 |   watch: {
42 |     'pid': function(val, old) {
43 |       if (val.length >= 7) {
44 |         this.getData(val);
45 |       }
46 |     },
47 |   },
48 |   created() {
49 |     this.getData(this.pid);
50 |   },
51 |   methods: {
52 |     getData(id) {
53 |       let that = this;
54 |       poolList({ pid: id }).then(({ code, list }) => {
55 |         if (code == 0) {
56 |           that.imgList = [...list];
57 |           console.log(that.imgList);
58 |         } else {
59 |           this.$toast("接口错误");
60 |         }
61 |       });
62 |     }
63 |   }
64 | };
65 | </script>
66 | 
67 | <style lang="less">
68 | .container {
69 |   position:relative;
70 |   width: 100%;
71 |   overflow:scroll;
72 |   ul {
73 |     // position:absolute;
74 |     // left:0;
75 |     li {
76 |       float: left;
77 |       text-align: center;
78 |     }
79 |     .linehas{
80 |       text-decoration: underline;
81 |     }
82 |   }
83 | }
84 | </style>
85 | 
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "CMSX",
 3 |   "version": "2.0.0",
 4 |   "description": "可视化拖拽",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --port 8080",
 8 |     "pre": "cross-env NODE_ENV=prefat webpack",
 9 |     "build": "cross-env NODE_ENV=production webpack",
10 |     "lint": "eslint ."
11 |   },
12 |   "keywords": [
13 |     "vuejs"
14 |   ],
15 |   "license": "MIT",
16 |   "bugs": {},
17 |   "devDependencies": {
18 |     "babel-core": "^6.26.0",
19 |     "babel-loader": "^7.1.2",
20 |     "babel-plugin-component": "^1.1.1",
21 |     "babel-plugin-import": "^1.7.0",
22 |     "babel-plugin-module-resolver": "^3.0.0",
23 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
24 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
25 |     "babel-plugin-transform-runtime": "^6.23.0",
26 |     "babel-preset-env": "^1.6.1",
27 |     "bezier-easing": "^2.1.0",
28 |     "clean-webpack-plugin": "^0.1.19",
29 |     "cross-env": "^5.2.0",
30 |     "css-loader": "^0.28.7",
31 |     "eslint": "^4.10.0",
32 |     "eslint-config-standard": "^10.2.1",
33 |     "eslint-plugin-import": "^2.8.0",
34 |     "eslint-plugin-node": "^5.2.1",
35 |     "eslint-plugin-promise": "^3.6.0",
36 |     "eslint-plugin-standard": "^3.0.1",
37 |     "express": "^4.16.2",
38 |     "file-loader": "^1.1.5",
39 |     "html-webpack-plugin": "^2.30.1",
40 |     "html-webpack-template": "^6.0.2",
41 |     "postcss-cssnext": "^3.0.2",
42 |     "postcss-fontpath": "^1.0.0",
43 |     "postcss-import": "^11.0.0",
44 |     "postcss-mixins": "^6.2.0",
45 |     "style-loader": "^0.19.1",
46 |     "url-loader": "^0.6.2",
47 |     "vue-lazyload": "^1.2.6",
48 |     "vue-loader": "^13.5.0",
49 |     "vue-pop-colorpicker": "^1.0.2",
50 |     "vue-style-loader": "^3.0.3",
51 |     "vue-template-compiler": "^2.5.3",
52 |     "webpack": "^3.8.1",
53 |     "webpack-dev-server": "^2.9.4",
54 |     "webpack-hot-middleware": "^2.20.0",
55 |     "webpack-parallel-uglify-plugin": "^1.1.0"
56 |   },
57 |   "dependencies": {
58 |     "axios": "^0.18.0",
59 |     "babel-polyfill": "^6.26.0",
60 |     "extract-text-webpack-plugin": "^3.0.2",
61 |     "jquery": "^1.11.3",
62 |     "element-ui": "^2.4.6",
63 |     "less": "^3.0.4",
64 |     "less-loader": "^4.1.0",
65 |     "mint-ui": "^2.2.13",
66 |     "vue": "^2.5.3",
67 |     "vuedraggable": "^2.16.0",
68 |     "vuex": "^3.0.1"
69 |   },
70 |   "eslintConfig": {
71 |     "extends": [
72 |       "standard"
73 |     ]
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/viewComponents/swipeBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <mt-swipe ref="swipe" :show-indicators="node.other.showButton==0?false:true" :auto="timer" :speed="speed" class="component swipe-banner" :style="node.styl" :component-name="node.name" v-if="upTimer">
 3 |     <mt-swipe-item v-for="(item,i) in imgList" :key="i" v-if="i<showNum" class="swipe_item">
 4 |       <a :href="item.url">
 5 |         <img :src="item.imgurl" />
 6 |         <p class="swipe_p" v-if="node.other.isTitle=='0'" :style="{'color':node.other.titleColor,'backgroundColor':node.other.titleBgColor}">{{item.name}}</p>
 7 |       </a>
 8 |     </mt-swipe-item>
 9 |   </mt-swipe>
10 | </template>
11 | 
12 | <script>
13 |   import { Swipe, SwipeItem } from 'mint-ui';
14 |   import {poolList} from '../server/api'
15 |   export default {
16 |     name: 'swipe-banner',
17 |     props: ['node', 'themeColor'],
18 |     data(){
19 |       return {
20 |         imgList:[],
21 |         upTimer:true
22 |       }
23 |     },
24 |     computed: {
25 |       "timer":function(){
26 |         this.upTimer=false;
27 |         this.$nextTick(function(){
28 |           this.upTimer=true;
29 |         })
30 |         return parseInt(this.node.other.timer)
31 |       },
32 |       speed:function(){
33 |         this.upTimer=false;
34 |         this.$nextTick(function(){
35 |           this.upTimer=true;
36 |         })
37 |         return parseInt(this.node.other.speed)
38 |       },
39 |       pid:function(){
40 |         return this.node.other.pid
41 |       },
42 |       showNum(){
43 |         return parseInt(this.node.other.showNum)||1
44 |       }
45 |     },
46 |     created(){
47 |       this.getData(this.pid);
48 |     },
49 |     mounted(){
50 |       console.log()
51 |     },
52 |     methods:{
53 |       getData(id){
54 |         let that=this;
55 |         poolList({pid:id}).then(({code, list})=>{
56 |           if(code==0){
57 |             that.imgList=[...list]
58 |           }else{
59 |             this.$toast("接口错误")
60 |           }
61 |         })
62 |       }
63 |     },
64 | 
65 |     components:{
66 |       'mtSwipe':Swipe,
67 |       'mtSwipeItem':SwipeItem
68 |     }
69 |   }
70 | </script>
71 | 
72 | <style lang="less">
73 |   .mint-swipe-item,.mint-swipe,.mint-swipe-items-wrap{
74 |     min-height:50px;
75 |   }
76 |   .mint-swipe-indicators{bottom:30px;}
77 |   .swipe_item{
78 |   img{width:100%;display:block;}
79 |   .swipe_p{
80 |     position:absolute;left:0;bottom:0;line-height:30px;background-color:rgba(0,0,0,.4);width:100%;text-indent: 14px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;
81 |   }
82 |   }
83 | </style>
84 | 
85 | 


--------------------------------------------------------------------------------
/src/components/swipeBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <mt-swipe ref="swipe" :show-indicators="node.other.showButton==0?false:true" :auto="timer" :speed="speed" class="component swipe-banner" :style="node.styl" :component-name="node.name" v-if="upTimer" @change="handleChange">
 3 |     <mt-swipe-item v-for="(item,i) in imgList" :key="i" v-if="i<showNum" class="swipe_item">
 4 |       <img :src="item.imgurl" />
 5 |       <p class="swipe_p" v-if="node.other.isTitle=='0'" :style="{'color':node.other.titleColor,'backgroundColor':node.other.titleBgColor}">{{item.name}}</p>
 6 |     </mt-swipe-item>
 7 |   </mt-swipe>
 8 | </template>
 9 | 
10 | <script>
11 |   import { Swipe, SwipeItem } from 'mint-ui';
12 |   import {poolList} from '../server/api'
13 |   export default {
14 |     name: 'swipe-banner',
15 |     props: ['node', 'themeColor'],
16 |     data(){
17 |       return {
18 |         imgList:[],
19 |         upTimer:true
20 |       }
21 |     },
22 |     computed: {
23 |       "timer":function(){
24 |         this.upTimer=false;
25 |         this.$nextTick(function(){
26 |           this.upTimer=true;
27 |         })
28 |         return parseInt(this.node.other.timer)
29 |       },
30 |       speed:function(){
31 |         this.upTimer=false;
32 |         this.$nextTick(function(){
33 |           this.upTimer=true;
34 |         })
35 |         return parseInt(this.node.other.speed)
36 |       },
37 |       pid:function(){
38 |         return this.node.other.pid
39 |       },
40 |       showNum(){
41 |         return parseInt(this.node.other.showNum)||1
42 |       }
43 |     },
44 |     watch:{
45 |       'pid':function(val,old){
46 |         if(val.length>=7){
47 |           this.getData(val)
48 |         }
49 | 
50 |       }
51 |     },
52 |     created(){
53 |       this.getData(this.pid);
54 |     },
55 |     mounted(){
56 |     },
57 |     methods:{
58 |       getData(id){
59 |         let that=this;
60 |         poolList({pid:id}).then(({code, list})=>{
61 |           if(code==0){
62 |             that.imgList=[...list]
63 |           }else{
64 |             this.$toast("接口错误")
65 |           }
66 |         })
67 |       },
68 |       handleChange(index){
69 | 
70 |       }
71 |     },
72 | 
73 |     components:{
74 |       'mtSwipe':Swipe,
75 |       'mtSwipeItem':SwipeItem
76 |     }
77 |   }
78 | </script>
79 | 
80 | <style lang="less">
81 | .mint-swipe-item,.mint-swipe,.mint-swipe-items-wrap{
82 |   min-height:50px;
83 | }
84 | .mint-swipe-indicators{bottom:30px;}
85 |   .swipe_item{
86 |     img{width:100%;display:block;}
87 |     .swipe_p{
88 |       position:absolute;left:0;bottom:0;line-height:30px;background-color:rgba(0,0,0,.4);width:100%;text-indent: 14px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;
89 |     }
90 |   }
91 | </style>
92 | 
93 | 


--------------------------------------------------------------------------------
/src/components/TheSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <draggable v-else class="section component floor" :floorId="node.id" :id="'floor-'+node.id" :style="node.styl" :component-name="node.name" :options="dragOptions" v-model="node.children" @input="oninput" @add="onAdd" @change="onchange" @choose="onChoose">
 3 |       <slot></slot>
 4 |     </draggable>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Draggable from 'vuedraggable'
 9 | import { mapMutations, mapState, mapActions } from 'vuex'
10 | 
11 | export default {
12 |   name: 'the-section',
13 |   components: {
14 |     Draggable
15 |   },
16 |   props: ['node', 'type' , 'curr'],
17 |   data () {
18 |     return {
19 |       dragOptions: {
20 |         group: {
21 |           name: 'widgets',
22 |           pull: false,
23 |           put: function(to,from){
24 |             return $(from.el).attr('class')=='leftModel'
25 |           }
26 |         },
27 |         sort: true,
28 |         filter:'.no-drag',
29 |         fallbackClass:'no-dragClass'
30 |       },
31 |       old:0,
32 |     }
33 |   },
34 |   computed: {
35 |     ...mapState(['site', 'currentConfig', 'htmlCon']),
36 |   },
37 |   created(){
38 | 
39 |   },
40 |   mounted(){
41 |   },
42 |   methods: {
43 |     ...mapMutations(['sortWidget', 'addWidget', 'setConfig', 'delCurrDom']),
44 |     ...mapActions(['getDefaultConfig']),
45 |     onChoose({oldIndex}){
46 |       this.setConfig({currDom:this.node, oldIndex})
47 |     },
48 |     oninput(s){
49 |       s.map((item,index)=>{
50 |         if(item.placeholder){
51 |           console.log(item,index)
52 |         }
53 |       })
54 |     },
55 |     onchange(a){
56 |       this.old=a.added.newIndex;
57 |     },
58 |     onAdd (sort) {
59 |       console.log(this.old)
60 |       let { item, newIndex}=sort;
61 |       this.node.children.splice(this.old,1)
62 |       const widgetType = item.getAttribute('type'),
63 |             model_id=item.getAttribute('model_id'),
64 |         close=item.getAttribute('close');
65 |       if(close){
66 |         this.$alert("此组件暂未开放");
67 |         return !1;
68 |       }
69 |       console.log(item,newIndex,this.node.children)
70 |       this.getDefaultConfig({ section: this.node.children, widgetType, newIndex ,model_id})
71 |       setTimeout(()=>{
72 |         this.setConfig({currDom:this.node, oldIndex:newIndex})
73 |       },200)
74 |       // this.setConfig({currDom:this.node, oldIndex:newIndex})
75 |       /*getConfig({model_id:temId}).then(res => {
76 |         this.addWidget({ section: this.node.children, widgetType, newIndex ,config: res.data['props']})
77 |       })*/
78 |     }
79 |   }
80 | }
81 | </script>
82 | 
83 | <style scoped>
84 |   .section {
85 |    background-color:darkgray;width:100%;min-height:30px;box-sizing: border-box;padding-top:4px!important;
86 |   }
87 | 
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/server/api.js:
--------------------------------------------------------------------------------
  1 | import http from "./http";
  2 | let NODE_ENV = process.env.NODE_ENV;
  3 | // 其他接口请修改此配置
  4 | let host_api = NODE_ENV !== "production" ? "//cms.kevin.com" : "";
  5 | 
  6 | let api = {
  7 |   // createObject: "//easy-mock.com/mock/5b5ac6ca87a58d3c7572a60b/api/getConfig", // 根据模型id生成配置项
  8 |   // getPool: "//easy-mock.com/mock/5b5ac6ca87a58d3c7572a60b/api/getpool", // 池数据
  9 |   createObject: "/api/getConfig", // 根据模型id生成配置项
 10 |   getPool: "/api/getpool",
 11 |   savePage: host_api + "/app/gui/ajaxSavePage", // 保存草稿
 12 |   publish: host_api + "/app/gui/ajaxPublish", // 发布
 13 |   preview: host_api + "/app/gui/ajaxPreview", // 预览
 14 |   getCategory: host_api + "/common/cate/getCatesByFid", // 获取分类列表
 15 |   createTem: host_api + "/app/pagetemplate/create", // 创建页面模板
 16 |   getTemType: host_api + "/app/pagetemplate/getType", // 获取模板品类列表
 17 |   getAllList: host_api + "/app/pagetemplate/getAll", // 页面模板列表
 18 |   modelUse: host_api + "/app/pagetemplate/choose", // 使用模版
 19 |   modelDel: host_api + "/app/pagetemplate/delete" // 删除模版
 20 | };
 21 | 
 22 | /**
 23 |  * 获取组件默认配置
 24 |  * @param params
 25 |  * @returns {*}
 26 |  */
 27 | export const getConfig = params => {
 28 |   return http.oGet(api.createObject, params);
 29 | };
 30 | /**
 31 |  * 获取池数据
 32 |  * @param params
 33 |  */
 34 | export const poolList = params => {
 35 |   return http.jsonp(api.getPool, params);
 36 | };
 37 | /**
 38 |  * 保存草稿
 39 |  * @param params
 40 |  * @returns {AxiosPromise<any>}
 41 |  */
 42 | export const savePage = params => {
 43 |   return http.post(api.savePage, params);
 44 | };
 45 | /**
 46 |  * 发布页面
 47 |  * @param params
 48 |  * @returns {AxiosPromise<any>}
 49 |  */
 50 | export const publish = params => {
 51 |   return http.post(api.publish, params);
 52 | };
 53 | /**
 54 |  * 预览
 55 |  * @param params
 56 |  * @returns {AxiosPromise<any>}
 57 |  */
 58 | export const preview = params => {
 59 |   return http.post(api.preview, params);
 60 | };
 61 | /**
 62 |  * 获取类目
 63 |  * @param params
 64 |  */
 65 | export const getCategory = params => {
 66 |   return http.oGet(api.getCategory, params);
 67 | };
 68 | /**
 69 |  * 创建模版
 70 |  * @param params
 71 |  */
 72 | export const createTem = params => {
 73 |   return http.post(api.createTem, params);
 74 | };
 75 | /**
 76 |  * 获取类型
 77 |  * @param params
 78 |  */
 79 | export const getTemType = params => {
 80 |   return http.oGet(api.getTemType, params);
 81 | };
 82 | /**
 83 |  * 页面模版列表
 84 |  * @param params
 85 |  */
 86 | export const getAllList = params => {
 87 |   return http.oGet(api.getAllList, params);
 88 | };
 89 | /**
 90 |  * 使用模版
 91 |  * @param params
 92 |  * @returns {AxiosPromise<any>}
 93 |  */
 94 | export const modelUse = params => {
 95 |   return http.post(api.modelUse, params);
 96 | };
 97 | export const modelDel = params => {
 98 |   return http.post(api.modelDel, params);
 99 | };
100 | 


--------------------------------------------------------------------------------
/src/viewComponents/scrollActive.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="component nab_tab_box"  :component-name="node.name">
 3 |     <scroll ref="scrollactive" :offset="0" :always-track="alwaysTrack" :duration="duration" :click-to-scroll="clickToScroll" :bezier-easing-value="easing" :activeObj="node.other" :style="node.styl">
 4 |       <ul class="nav-center">
 5 |         <li v-for="(item,index) in el" :style="{'lineHeight':node.styl.height}">
 6 |           <a :href="item.floor" v-if="index==0" :style="activeClass" class="scrollactive-item nav-item isActive">{{item.name}}</a>
 7 |           <a :href="item.floor" v-else :style="{'color':node.other.fontColor,'width':node.other.otherWidth}" class="scrollactive-item nav-item">{{item.name}}</a>
 8 |         </li>
 9 |       </ul>
10 |     </scroll>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |     import scroll from '~/common/scroll'
16 |     export default {
17 |       name: "scroll-active",
18 |       props: ['node', 'type'],
19 |       components:{
20 |         scroll,
21 |       },
22 |       data(){
23 |         return {
24 |           alwaysTrack: false,
25 |           duration: 600,
26 |           clickToScroll: true,
27 |           offset: this.node.other.lineHeight,
28 |           easing: '.5,0,.35,1',
29 | 
30 |           dialogFormVisible:false,
31 |           nav_json:[],
32 |           floor_list:[]
33 |         }
34 |       },
35 |       computed: {
36 |         numberOfElements() {
37 |           return this.el.length;
38 |         },
39 |         el(){
40 |           return this.node.saveConfig
41 |         },
42 |         activeClass(){
43 |           let obj=this.node.other;
44 |           let activeCss=`background-color:${obj.activeBgColor};background-image:url(${obj.activeBgImg});color:${obj.activeColor};width:${obj.otherWidth}`
45 |           return activeCss
46 |         }
47 |       },
48 |       mounted() {
49 |       },
50 |       methods: {
51 |       },
52 |     }
53 | </script>
54 | 
55 | <style lang="less">
56 | .nab_tab_box{
57 |   position:relative;min-height:24px;
58 |   .nav-center{
59 |     overflow:auto;display:flex;padding:0 10px;box-sizing:border-box;flex-flow:row nowrap;flex-shrink: 0;min-width: 100%;
60 |     li{
61 |       font-size: 14px;text-align:center;padding:0 5px;min-width:50px;display:inherit;
62 |       &:not(:first-child) {
63 |         margin-left: 15px;
64 |       }
65 |     }
66 |     a{
67 |       color:#000;display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
68 |     }
69 |   }
70 |   .nav_edit_but{position:absolute;height:24px;right:2px;top:100%;background-color:#fff;color:#5E9EF3;padding:0 5px;}
71 | }
72 | .contion{
73 |   width:80%;margin:0 auto
74 | }
75 | .el-select .el-input {
76 |   width: 100px;
77 | }
78 | .input-with-select .el-input-group__prepend {
79 |   background-color: #fff;
80 | }
81 | .input-with-select .el-input-group__prepend {
82 |   background-color: #fff;
83 | }
84 |   .el-row{margin-bottom:10px;}
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/server/http.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import {Toast} from 'mint-ui'
 3 | //http.js
 4 | //设置请求baseURL
 5 | // axios.defaults.baseURL = '/app'
 6 | //设置默认请求头
 7 | axios.defaults.headers = {
 8 |   "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
 9 |   'Accept': 'application/json',
10 | }
11 | axios.defaults.timeout = 10000
12 | axios.defaults.withCredentials=true
13 | //添加请求拦截器
14 | axios.interceptors.request.use(config => {
15 |   //在发送请求之前做某事，比如说 设置loading动画显示
16 |   const { url } = config
17 |   config.url = url + ".json"
18 |   if(config.data&&!config.data.cancelLoad){
19 |     $('#loading').show()
20 |   }
21 |   return config
22 | }, error => {
23 |   //请求错误时做些事
24 |   return Promise.reject(error)
25 | })
26 | 
27 | //添加响应拦截器
28 | axios.interceptors.response.use(res => {
29 |   //对响应数据做些事，比如说把loading动画关掉
30 |   $('#loading').hide()
31 |   if (res.status && res.status != 200) {
32 |     Toast("接口错误");
33 |     return;
34 |   }
35 |   return res.data
36 | }, error => {
37 |   //请求错误时做些事
38 |   console.log(error)
39 |   $('#loading').hide()
40 |   if (error.response&&(error.response.status == 504||error.response.status == 404)) {
41 |     Toast('服务器被吃了⊙﹏⊙∥');
42 |   } else {
43 |     Toast(error);
44 |   }
45 |   return Promise.reject(error)
46 | })
47 | 
48 | //如果不想要这个拦截器也简单，可以删除拦截器
49 | //axios.interceptors.request.eject(myInterceptor)
50 | // POST发送请求前处理入参的数据为：formData 形式
51 | axios.defaults.transformRequest = [function (data) {
52 |   let newData = ''
53 |   for (let k in data) {
54 |     newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
55 |   }
56 |   return newData
57 | }]
58 | axios.jsonp=(url,params)=>{
59 |   // 判断url是否存在以及是否为字符串
60 |   if(!url || typeof url !== 'string') throw new Error('必须传入字符串类型的url地址');
61 |   let param=function(data){
62 |     let url = ''
63 |     for (var k in data) {
64 |       let value = data[k] !== undefined ? data[k] : ''
65 |       url += '&' + k + '=' + encodeURIComponent(value)
66 |     }
67 |     return url ? url.substring(1) : ''
68 |   };
69 |   url += (url.indexOf('?') < 0 ? '?' : '&') + param(params)
70 |   return new Promise((resolve,reject) => {
71 |     // 处理返回的结果
72 |     var oDate=new Date().getTime();
73 |     window['jsonCallBack'+oDate]= (result) => {
74 |       resolve(result)
75 |     }
76 |     // 在页面创建script标签，并将src设置为请求地址，取回数据之后移除script标签
77 |     let JSONP = document.createElement("script");
78 |     JSONP.type = "text/javascript";
79 |     JSONP.src = `${url}&callback=jsonCallBack${oDate}`;
80 |     document.getElementsByTagName("head")[0].appendChild(JSONP);
81 |     setTimeout(() => {
82 |       document.getElementsByTagName("head")[0].removeChild(JSONP)
83 |     },500)
84 |   })
85 | }
86 | axios.oGet=(url,params)=>{
87 |   // return axios.get(url,{"params":params})
88 |   // if(process.env.NODE_ENV!=="production"){
89 |   //   return axios.jsonp(url+'?format=jsonp',params)
90 |   // }else{
91 |     return axios.get(url,{"params":params})
92 |   // }
93 | }
94 | //导出使用
95 | export default axios
96 | 


--------------------------------------------------------------------------------
/src/components/brandList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component1"  :component-name="node.name">
  3 |           <div class="container1" :style="node.styl">
  4 |             <ul v-for="(item,index) in imgList" :key="index" >
  5 |                   <li v-for="(img,ind) in item" :key="ind" v-show="img!=null">
  6 |                         <img :src="img.imgurl" alt="" :style="{'transform':mScale}">
  7 |                   </li>
  8 |                   <li class="kong" v-if="item.length < showNum" :style="{'flex':mod,'margin-left':mod*10+'px'}"></li>
  9 |             </ul>
 10 | 
 11 |           </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import { poolList } from "../server/api";
 17 | export default {
 18 |   name: "brand-list",
 19 |   props: ["node", "themeColor"],
 20 |   data() {
 21 |     return {
 22 |       imgList: [],
 23 |       list: [],
 24 |       mod: 0 //补空的flex值 和 对应 margin-left值
 25 |     };
 26 |   },
 27 |   computed: {
 28 |     pid: function() {
 29 |       return this.node.other.pid;
 30 |     },
 31 |     showNum: function() {
 32 |       return parseInt(this.node.other.showNum) || 2;
 33 |     },
 34 |     mScale: function() {
 35 |       if (
 36 |         Number(this.node.other.pictureSize) &&
 37 |         this.node.other.pictureSize < 1
 38 |       ) {
 39 |         return "scale(" + this.node.other.pictureSize + ")";
 40 |       } else {
 41 |         return "scale(1,1)";
 42 |       }
 43 |     }
 44 |   },
 45 |   watch: {
 46 |     pid: function(val, old) {
 47 |       if (val.length >= 7) {
 48 |         this.getData1(val);
 49 |       }
 50 |     },
 51 |     showNum: function() {
 52 |       this.largeFun();
 53 |     }
 54 |   },
 55 |   methods: {
 56 |     getData1(id) {
 57 |       let that = this;
 58 |       poolList({ pid: id }).then(({ code, list }) => {
 59 |         if (code == 0) {
 60 |           that.list = list;
 61 |           that.largeFun();
 62 |         } else {
 63 |           this.$toast("接口错误");
 64 |         }
 65 |       });
 66 |     },
 67 |     //显示数量变化调用方法
 68 |     largeFun() {
 69 |       this.imgList = [];
 70 |       var nn = Math.ceil(this.list.length / this.showNum);
 71 |       for (var i = 0; i < nn; i++) {
 72 |         this.imgList.push(
 73 |           this.list.slice(i * this.showNum, (i + 1) * this.showNum)
 74 |         );
 75 |       }
 76 |       this.mod = this.showNum - this.list.length % this.showNum;
 77 | 
 78 |     }
 79 |   },
 80 |   created() {
 81 |     this.getData1(this.pid);
 82 |   }
 83 | };
 84 | </script>
 85 | 
 86 | <style lang="less">
 87 | .container1 {
 88 |   width: 100%;
 89 |   padding: 0px 10px 10px 10px;
 90 |   box-sizing: border-box;
 91 |   overflow: hidden;
 92 |   p {
 93 |     text-align: center;
 94 |   }
 95 |   ul {
 96 |     display: -webkit-flex;
 97 |     display: flex;
 98 |     li {
 99 |       flex: 1;
100 |       margin-top: 10px;
101 |      img {
102 |           width: 100%;
103 |         }
104 |     }
105 |     li + li {
106 |       margin-left: 10px;
107 |     }
108 |     .kong {
109 |       background: none;
110 |       border: none;
111 |     }
112 |   }
113 | }
114 | </style>
115 | 
116 | 


--------------------------------------------------------------------------------
/src/components/ordinaryProduct.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component ordinary-product" :style="node.styl" :component-name="node.name">
  3 |     <ul class="product_list">
  4 |       <li v-for="(item,index) in productList" data-price-area="need">
  5 |           <img v-lazy="item.imgurl" :key="item.imgurl" alt="" class="_pimg">
  6 |           <p class="title">{{item.name}}</p>
  7 |           <div class="product_children" ><span :data-price-id="item.skuid" data-price-type="p"></span><i></i></div>
  8 |       </li>
  9 |     </ul>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 |   import {poolList} from '../server/api'
 15 |   import {link} from "~/widgets/util";
 16 |   export default {
 17 |     name: 'ordinaryProduct',
 18 |     props: ['node', 'themeColor'],
 19 |     data(){
 20 |       return {
 21 |         productList:'',
 22 |       }
 23 |     },
 24 |     computed: {
 25 |     },
 26 |     beforeUpdate(){
 27 |       this.$nextTick(function(){
 28 |         jdGetPriceByJs.init();
 29 |       })
 30 | 
 31 |     },
 32 |     created(){
 33 |       this.getData(this.node.other.pid||'0201348')
 34 |     },
 35 |     mounted(){
 36 |     },
 37 |     watch:{
 38 |       'node.other.pid':function(val,old){
 39 |           if(val.length>=3){
 40 |             this.getData(val)
 41 |           }
 42 | 
 43 |       }
 44 |     },
 45 |     methods:{
 46 |       getData(id){
 47 |         let that=this;
 48 |         console.log("334")
 49 |         poolList({pid:id}).then(res=>{
 50 |           if(res.code==0){
 51 |             that.productList.length>0&&(that.productList.length=0)
 52 |             that.productList=res.list;
 53 |             jdGetPriceByJs.init();
 54 |           }
 55 | 
 56 |         })
 57 |       }
 58 |     },
 59 |   }
 60 | </script>
 61 | 
 62 | <style lang="less">
 63 | .product_list{
 64 |   display:flex;flex-wrap:wrap;
 65 |   img{
 66 |     width:100%;
 67 |   }
 68 |   ._pimg[lazy=loading]{
 69 |     background: no-repeat center url(//common.360buyimg.com/shangou/rednew/common/img/loading.gif);
 70 |   }
 71 |   ._pimg[lazy=error]{
 72 |     background: no-repeat center url(//m.360buyimg.com/babel/jfs/t24394/33/669352346/2028/a1688747/5b3b7781Nab790b79.png);
 73 |   }
 74 |   li{
 75 |     width:46%;margin:2px;background-color:#fff;
 76 |     .title{
 77 |       overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;display:-webkit-box;margin:8px 0;color:#333;
 78 |     }
 79 |     .product_children{
 80 |       display:flex;padding:4px 8px;
 81 |       span{
 82 |         display:block;flex:1;
 83 |       }
 84 |       i{
 85 |         dispay:block;
 86 |         width: 16px;
 87 |         height: 16px;background-color:red;padding:2px;border-radius:4px;position:relative;
 88 |         &:before{
 89 |           content:"";position:absolute;left:11%;top:15%;width:15px;height:15px;
 90 |           background-image: url("//m.360buyimg.com/babel/jfs/t19954/149/1197396512/53003/d995012f/5b1792e9Ncc0da2b3.png");
 91 |           background-size: 297px 291.5px;
 92 |           background-position: -15px -253.5px;
 93 |         }
 94 | 
 95 |       }
 96 |     }
 97 |   }
 98 | 
 99 | }
100 | </style>
101 | 
102 | 


--------------------------------------------------------------------------------
/src/viewComponents/brandList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component1"  :component-name="node.name">
  3 |           <div class="container1" :style="node.styl">
  4 |             <ul v-for="(item,index) in imgList" :key="index" >
  5 |                   <li v-for="(img,ind) in item" :key="ind" v-show="img!=null">
  6 |                       <img :src="img.imgurl" alt="" :style="{'transform':mScale}" @click="mJump(img.url)">
  7 |                   </li>
  8 |                   <li class="kong" v-if="item.length < showNum" :style="{'flex':mod,'margin-left':mod*10+'px'}"></li>
  9 |             </ul>
 10 | 
 11 |           </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import { poolList } from "../server/api";
 17 | export default {
 18 |   name: "brand-list",
 19 |   props: ["node", "themeColor"],
 20 |   data() {
 21 |     return {
 22 |       imgList: [],
 23 |       list: [],
 24 |       mod: 0 //补空的flex值 和 对应 margin-left值
 25 |     };
 26 |   },
 27 |   computed: {
 28 |     pid: function() {
 29 |       return this.node.other.pid;
 30 |     },
 31 |     showNum: function() {
 32 |       return parseInt(this.node.other.showNum) || 2;
 33 |     },
 34 |     mScale: function() {
 35 |       if (
 36 |         Number(this.node.other.pictureSize) &&
 37 |         this.node.other.pictureSize < 1
 38 |       ) {
 39 |         return "scale(" + this.node.other.pictureSize + ")";
 40 |       } else {
 41 |         return "scale(1,1)";
 42 |       }
 43 |     }
 44 |   },
 45 |   watch: {
 46 |     pid: function(val, old) {
 47 |       if (val.length >= 7) {
 48 |         this.getData1(val);
 49 |       }
 50 |     },
 51 |     showNum: function() {
 52 |       this.largeFun();
 53 |     }
 54 |   },
 55 |   methods: {
 56 |     getData1(id) {
 57 |       console.log(this.node.other);
 58 |       let that = this;
 59 |       poolList({ pid: id }).then(({ code, list }) => {
 60 |         if (code == 0) {
 61 |           console.log(list);
 62 |           that.list = list;
 63 |           that.largeFun();
 64 |         } else {
 65 |           this.$toast("接口错误");
 66 |         }
 67 |       });
 68 |     },
 69 |     mJump(x) {
 70 |       window.location.href = x;
 71 |     },
 72 |     //显示数量变化调用方法
 73 |     largeFun() {
 74 |       this.imgList = [];
 75 |       var nn = Math.ceil(this.list.length / this.showNum);
 76 |       console.log(nn);
 77 |       for (var i = 0; i < nn; i++) {
 78 |         this.imgList.push(
 79 |           this.list.slice(i * this.showNum, (i + 1) * this.showNum)
 80 |         );
 81 |       }
 82 |       this.mod = this.showNum - this.list.length % this.showNum;
 83 |     }
 84 |   },
 85 |   created() {
 86 |     this.getData1(this.pid);
 87 |     console.log(this.node.other);
 88 |     console.log(this.node.styl);
 89 |   }
 90 | };
 91 | </script>
 92 | 
 93 | <style lang="less">
 94 | .container1 {
 95 |   width: 100%;
 96 |   padding: 0px 10px 10px 10px;
 97 |   box-sizing: border-box;
 98 |   overflow: hidden;
 99 |   p {
100 |     text-align: center;
101 |   }
102 |   ul {
103 |     display: -webkit-flex;
104 |     display: flex;
105 |     li {
106 |       flex: 1;
107 |       margin-top: 10px;
108 |       img {
109 |           width: 100%;
110 |         }
111 |     }
112 |     li + li {
113 |       margin-left: 10px;
114 |     }
115 |     .kong {
116 |       background: none;
117 |       border: none;
118 |     }
119 |   }
120 | }
121 | </style>
122 | 
123 | 


--------------------------------------------------------------------------------
/src/widgets/widgetTree.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 2018/5/16
  3 |  * Created by kevin
  4 |  */
  5 | // 线上
  6 | let pro=[{
  7 |   text:"页面楼层",
  8 |   icon: 'icon-yemianlouceng',
  9 |   attrId:1,
 10 |   list:[{
 11 |     name: '楼层容器',
 12 |     icon: 'icon-loucengrongqi',
 13 |     model_id: 2,
 14 |     w:'floor',
 15 |     placeholder: {
 16 |       type: 'the-section',
 17 |       children: []
 18 |     }
 19 |   }]
 20 | },{
 21 |   text:"布局容器",
 22 |   icon:'icon-bujurongqi',
 23 |   attrId:1,
 24 |   list:[{
 25 |     name: "文字title",
 26 |     icon: 'icon-dingbugudingdaohang',
 27 |     model_id: 3,
 28 |     placeholder: {
 29 |       type: 'text-title'
 30 |     }
 31 |   },{
 32 |     name: "图片title",
 33 |     icon: 'icon-dingbugudingdaohang',
 34 |     model_id: 4,
 35 |     placeholder: {
 36 |       type: 'img-title'
 37 |     }
 38 |   }]
 39 | },{
 40 |   text:"导航类",
 41 |   icon:'icon-daohang',
 42 |   attrId:1,
 43 |   list:[{
 44 |     name: "header组件",
 45 |     icon: 'icon-dingbugudingdaohang',
 46 |     model_id: 5,
 47 |     placeholder: {
 48 |       type: 'header-component'
 49 |     }
 50 |   }]
 51 | },{
 52 |   text:"图文广告",
 53 |   icon:'icon-tuwen',
 54 |   attrId:1,
 55 |   list:[{
 56 |     name: '通栏广告',
 57 |     icon: 'icon-tonglanguanggao',
 58 |     model_id: 8,
 59 |     placeholder: {
 60 |       type: 'pass-banner',
 61 |     }
 62 |   },{
 63 |     name: '品牌列表',
 64 |     icon: 'icon-pinpailiebiao',
 65 |     isClose:false,
 66 |     model_id: 14,
 67 |     placeholder: {
 68 |       type: 'brand-list',
 69 |     }
 70 |   }]
 71 | },{
 72 |   text:"商品类",
 73 |   icon:'icon-shangpin',
 74 |   attrId:1,
 75 |   list:[{
 76 |     name: '普通商品',
 77 |     icon: 'icon-shangpin',
 78 |     model_id: 6,
 79 |     placeholder: {
 80 |       type: 'ordinary-product'
 81 |     }
 82 |   }]
 83 | },{
 84 |   text:"活动类",
 85 |   icon:'icon-huodong',
 86 |   attrId:1,
 87 |   list:[]
 88 | },{
 89 |   text:"基本类",
 90 |   icon:'icon-tongyonglei',
 91 |   attrId:1,
 92 |   list:[{
 93 |     name: '图片热区',
 94 |     icon: 'icon-tupianrequ',
 95 |     model_id: 7,
 96 |     placeholder: {
 97 |       type: 'hot-image',
 98 |     }
 99 |   },{
100 |     name: '轮播图',
101 |     icon: 'icon-lunboyangshi',
102 |     model_id: 9,
103 |     placeholder: {
104 |       type: 'swipe-banner',
105 |     }
106 |   },{
107 |     name: "楼层锚点",
108 |     icon: 'icon-loucengmaodian',
109 |     model_id: 10,
110 |     w:'floor',
111 |     placeholder: {
112 |       type: 'scroll-active',
113 |       saveConfig:[]
114 |     }
115 |   }]
116 | },{
117 |   text:"其他类",
118 |   icon: 'icon-qita',
119 |   attrId:1,
120 |   list:[{
121 |     name: "文字链",
122 |     icon: 'icon-wenzilian',
123 |     model_id: 12,
124 |     isClose: false,//提示暂未开发
125 |     placeholder: {
126 |       type: 'text-link',
127 |       saveConfig:[]
128 |     }
129 |   },{
130 |     name: "启动动效",
131 |     icon: 'icon-qidongdongxiao',
132 |     model_id: 13,
133 |     isClose:false,// 提示暂未开发
134 |     w: 'floor', // 配置floor后可拖拽至楼层级别
135 |     placeholder: {
136 |       type: 'start-effect',
137 |       saveConfig:[]
138 |     }
139 |   }]
140 | },{
141 |   text:"楼层导航",
142 |   icon: 'icon-qita',
143 |   attrId:2
144 | }]
145 | let tabTree;
146 | console.log(process.env.NODE_ENV)
147 | /*if(process.env.NODE_ENV=="development"){
148 |   tabTree=dev
149 | }else if(process.env.NODE_ENV=="prefat"){
150 |   tabTree=pre
151 | }else{
152 |   tabTree=pro
153 | }*/
154 | //直接生产cmsx建模型
155 | export default pro
156 | 


--------------------------------------------------------------------------------
/src/viewComponents/ordinaryProduct.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component ordinary-product" :style="node.styl" :component-name="node.name">
  3 |     <ul class="product_list">
  4 |       <li v-for="(item,index) in productList" v-$log :taglog="node.id+'|'+node.name+'|k'+index+'|'+node.other.pid+'|itemid-'+index+'|itemtype1'" data-price-area="need" @click.stop="itemLinkUrl(item.skuid)">
  5 |           <img v-lazy="item.imgurl" :key="item.imgurl" alt="" class="_pimg">
  6 |           <p class="title">{{item.name}}</p>
  7 |           <div class="product_children" ><span :data-price-id="item.skuid" data-price-type="p"></span><i></i></div>
  8 |       </li>
  9 |     </ul>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 |   import {poolList} from '../server/api'
 15 |   import {link} from "~/widgets/util";
 16 | 
 17 |   export default {
 18 |     name: 'ordinaryProduct',
 19 |     props: ['node', 'themeColor'],
 20 |     data(){
 21 |       return {
 22 |         productList:'',
 23 |       }
 24 |     },
 25 |     computed: {
 26 |     },
 27 |     beforeUpdate(){
 28 |       this.$nextTick(function(){
 29 |         jdGetPriceByJs.init();
 30 |       })
 31 | 
 32 |     },
 33 |     created(){
 34 |       this.getData(this.node.other.pid||'0201348')
 35 |     },
 36 |     mounted(){
 37 |     },
 38 |     watch:{
 39 |       'node.other.pid':function(val,old){
 40 |           if(val.length>=3){
 41 |             this.getData(val)
 42 |           }
 43 | 
 44 |       }
 45 |     },
 46 |     methods:{
 47 |       getData(id){
 48 |         let that=this;
 49 |         console.log("334")
 50 |         poolList({pid:id}).then(res=>{
 51 |           if(res.code==0){
 52 |             that.productList.length>0&&(that.productList.length=0)
 53 |             that.productList=res.list;
 54 |             jdGetPriceByJs.init();
 55 |           }
 56 | 
 57 |         })
 58 |       },
 59 |       itemLinkUrl(skuId){
 60 |         window.location.href=link().mItem+'/ware/view.action?wareId='+skuId
 61 |       }
 62 |     },
 63 |   }
 64 | </script>
 65 | 
 66 | <style lang="less">
 67 | .product_list{
 68 |   display:flex;flex-wrap:wrap;
 69 |   img{
 70 |     width:100%;
 71 |   }
 72 |   ._pimg[lazy=loading]{
 73 |     background: no-repeat center url(//common.360buyimg.com/shangou/rednew/common/img/loading.gif);
 74 |   }
 75 |   ._pimg[lazy=error]{
 76 |     background: no-repeat center url(//m.360buyimg.com/babel/jfs/t24394/33/669352346/2028/a1688747/5b3b7781Nab790b79.png);
 77 |   }
 78 |   li{
 79 |     width:46%;margin:2px;background-color:#fff;
 80 |     .title{
 81 |       overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;display:-webkit-box;margin:8px 0;color:#333;
 82 |     }
 83 |     .product_children{
 84 |       display:flex;padding:4px 8px;
 85 |       span{
 86 |         display:block;flex:1;
 87 |       }
 88 |       i{
 89 |         dispay:block;
 90 |         width: 16px;
 91 |         height: 16px;background-color:red;padding:2px;border-radius:4px;position:relative;
 92 |         &:before{
 93 |           content:"";position:absolute;left:11%;top:15%;width:15px;height:15px;
 94 |           background-image: url("//m.360buyimg.com/babel/jfs/t19954/149/1197396512/53003/d995012f/5b1792e9Ncc0da2b3.png");
 95 |           background-size: 297px 291.5px;
 96 |           background-position: -15px -253.5px;
 97 |         }
 98 | 
 99 |       }
100 |     }
101 |   }
102 | 
103 | }
104 | </style>
105 | 
106 | 


--------------------------------------------------------------------------------
/assets/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1510759602811'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1510759602811#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
 6 |   url('iconfont.ttf?t=1510759602811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1510759602811#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-lego:before { content: "\e639"; }
19 | 
20 | .icon-legoblock:before { content: "\e847"; }
21 | 
22 | .icon-page1:before { content: "\e613"; }
23 | 
24 | .icon-Lego:before { content: "\ea10"; }
25 | 
26 | .icon-Lego1:before { content: "\ec93"; }
27 | 
28 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | 
  4 | import oneSite from './widgets/siteTree'
  5 | import tabTree from './widgets/widgetTree'
  6 | const htmlCon = window.htmlConfig
  7 | import { getQueryUrl } from '~/widgets/util'
  8 | import {getConfig} from './server/api'
  9 | Vue.use(Vuex)
 10 | const store = new Vuex.Store({
 11 |   state: {
 12 |     pid: 1000,
 13 |     configShow:false,
 14 |     page_id: getQueryUrl('page_id'),
 15 |     htmlCon,
 16 |     currentConfig:null,
 17 |     site: oneSite,
 18 |     tabTree:tabTree,
 19 |     widgets: []
 20 |   },
 21 | 
 22 |   mutations: {
 23 |     assignState (state, obj) {
 24 |       Object.assign(state, obj)
 25 |     },
 26 |     setWidget({widgets},arr){
 27 |       // widgets.length=0;
 28 |       widgets.splice(0,widgets.length)
 29 |       arr.map(item=>{widgets.push(item)});
 30 |     },
 31 |     sortWidget (state, { array, oldIndex, newIndex }) {
 32 |       console.log("storeSort")
 33 |       let target = array[oldIndex]
 34 |       array.splice(oldIndex, 1)
 35 |       array.splice(newIndex, 0, target)
 36 |     },
 37 |     copyWidget (state,{array, oldIndex, newIndex}){
 38 |       console.log("copyEl",oldIndex,newIndex)
 39 |       store.commit('incrementGid')
 40 |       //let el=array[oldIndex]  浅拷贝有问题
 41 |       let el= JSON.parse(JSON.stringify(array[oldIndex]));
 42 |       el.id=state.pid;
 43 |       array.splice(-1,0,el)
 44 |       // store.commit('setConfig',{oldIndex:newIndex,currDom:el})
 45 |     },
 46 |     addWidget ({widgets, pid, site}, { section, widgetType, newIndex, config }) {
 47 |       console.log("addWidget:"+newIndex);
 48 |       const widget = widgets.find(widget => widget.placeholder.type === widgetType);
 49 |       let styl={},other={};
 50 |       config&&(config.map(item=>{
 51 |         if(item.remark === 'css'){
 52 |           styl[item.name] = item.default_val
 53 |         }else{
 54 |           other[item.name] = item.default_val
 55 |         }
 56 |       }))
 57 |       // store.commit('incrementGid')
 58 |       let obj={ ...widget.placeholder, config,styl,other, id: pid ,name:widget.name}
 59 |       if (widget.w=='floor') {
 60 |         // section.splice(newIndex,1);
 61 |         section.splice(newIndex, 0, obj)
 62 |         section[newIndex].children = []
 63 |         store.commit('setConfig',{oldIndex:newIndex,currDom:site})
 64 |         return false
 65 |       }
 66 |       section.splice(newIndex,0,obj);
 67 |     },
 68 |     delCurrDom ({site}, {section, oldIndex}) {
 69 |       store.commit('setConfig', { oldIndex: -1, currDom: {} })
 70 |       section.splice(oldIndex, 1)
 71 |       store.commit('changeShow',false)
 72 |     },
 73 |     setConfig (stat, {oldIndex, currDom}) {
 74 |       console.log("setConfig")
 75 |       stat.currentConfig = null
 76 |       oldIndex >= 0 && (currDom.index = oldIndex)
 77 |       stat.currentConfig = {...currDom}
 78 |       console.log({...currDom})
 79 |       store.commit('changeShow',true)
 80 |       console.log(currDom)
 81 |     },
 82 |     changeShow(sta,val){
 83 |       console.log("show")
 84 |       sta.configShow=val
 85 |     },
 86 |     incrementGid (state) {
 87 |       console.log("addPid")
 88 |       state.pid++;
 89 |     }
 90 |   },
 91 |   actions: {
 92 |     async getSite ({ commit }) {
 93 |       const site =await window.config&&window.config.type?window.config:oneSite
 94 |       commit('assignState', { site })
 95 |       // commit('assignState', { currentPage: site.children[0] })
 96 |     },
 97 |     setSite({commit},site){
 98 |       commit('assignState',{site})
 99 |     },
100 |     getDefaultConfig({commit},{section,widgetType,newIndex,model_id}){
101 |       getConfig({"model_id":model_id}).then(res=>{
102 |         commit('addWidget',{section,widgetType,newIndex,config:res.data['props']})
103 |       })
104 |     }
105 |   }
106 | })
107 | 
108 | export default store
109 | 


--------------------------------------------------------------------------------
/src/viewComponents/startEffect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component startEffect"  :component-name="node.name" v-show="mVisible">
  3 |           <div class="container3">
  4 |               <div class="btn1 btn" v-if="node.other.isStyle == '0'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}" @click="skipFun1">
  5 |                   跳转{{mTime}}秒
  6 |               </div>
  7 |               <div class="btn2 btn" v-else-if="node.other.isStyle == '1'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}" @click="skipFun1">
  8 |                    跳转{{mTime}}秒
  9 |               </div>
 10 |               <div class="btn3 btn" v-else-if="node.other.isStyle == '2'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}">
 11 |                   {{mTime}}秒
 12 |               </div>
 13 |               <img :src="node.other.pictureVideo" alt="" :style="node.styl">
 14 |           </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import { poolList } from "../server/api";
 20 | export default {
 21 |   name: "start-effect",
 22 |   props: ["node", "themeColor"],
 23 |   data() {
 24 |     return {
 25 |       imgList: [],
 26 |       mVisible: true,
 27 |       mTime: 6,
 28 |       tt: null
 29 |     };
 30 |   },
 31 |   computed: {
 32 |     isShow: function() {
 33 |       return parseInt(this.node.other.isShow);
 34 |     },
 35 |     timeLong: function() {
 36 |       return parseInt(this.node.other.timeLong);
 37 |     }
 38 |   },
 39 |   watch: {
 40 |     isShow: function() {
 41 |       if (this.isShow == 0) {
 42 |         this.mVisible = true;
 43 |         this.mTime = this.timeLong;
 44 |         if (this.tt) {
 45 |           clearTimeout(this.tt);
 46 |         }
 47 |         this.countDownFun();
 48 |       } else {
 49 |         this.mVisible = false;
 50 |       }
 51 |     },
 52 |     timeLong: function() {
 53 |       this.mTime = this.timeLong;
 54 |       if (this.tt) {
 55 |         clearTimeout(this.tt);
 56 |       }
 57 |       this.countDownFun();
 58 |     }
 59 |   },
 60 | 
 61 |   created() {
 62 |     this.mTime = this.timeLong;
 63 |     this.countDownFun();
 64 |   },
 65 |   methods: {
 66 |     //点击跳转按钮
 67 |     skipFun1:function(){
 68 |       this.mVisible=false;
 69 |     },
 70 |     //倒计时方法
 71 |     countDownFun: function() {
 72 |       var that = this;
 73 |       that.tt = setTimeout(function() {
 74 |         if (that.mTime == 1) {
 75 |           that.mVisible = false;
 76 |         } else {
 77 |           that.mTime = that.mTime - 1;
 78 |           that.countDownFun();
 79 |         }
 80 |       }, 1000);
 81 |     }
 82 |   }
 83 | };
 84 | </script>
 85 | 
 86 | <style lang="less">
 87 | .startEffect {
 88 |   z-index:100;
 89 |   height: 100%;
 90 |   width: 100%;
 91 |   top: 0;
 92 |   left: 0;
 93 |   position: absolute;
 94 |   background-color:#CACACA;
 95 |   .container3 {
 96 |     width: 100%;
 97 |     height: 100%;
 98 |     position: relative;
 99 |     img {
100 |       width: 100%;
101 |       display: block;
102 |     }
103 |     .btn {
104 |       text-align: center;
105 |       border-width: 1px;
106 |       border-style: solid;
107 |       position: absolute;
108 |       top: 5px;
109 |       right: 10px;
110 |     }
111 |     .btn1 {
112 |       height: 28px;
113 |       width: 58px;
114 |       line-height: 28px;
115 |       -moz-border-radius: 16px;
116 |       -ms-border-radius: 16px;
117 |       -o-border-radius: 16px;
118 |       border-radius: 16px;
119 |     }
120 |     .btn2 {
121 |       height: 48px;
122 |       width: 48px;
123 |       line-height: 48px;
124 |       -moz-border-radius: 50%;
125 |       -ms-border-radius: 50%;
126 |       -o-border-radius: 50%;
127 |       border-radius: 50%;
128 |     }
129 |     .btn3 {
130 |       height: 25px;
131 |       width: 25px;
132 |       line-height: 25px;
133 |       -moz-border-radius: 50%;
134 |       -ms-border-radius: 50%;
135 |       -o-border-radius: 50%;
136 |       border-radius: 50%;
137 |     }
138 |   }
139 | }
140 | </style>
141 | 
142 | 


--------------------------------------------------------------------------------
/src/components/startEffect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component startEffect"  :component-name="node.name" v-show="mVisible">
  3 |           <div class="container3" :style="{'height':node.styl.height,'width':node.styl.width}">
  4 |               <div class="btn1 btn" v-if="node.other.isStyle == '0'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}">
  5 |                   跳转{{mTime}}秒
  6 |               </div>
  7 |               <div class="btn2 btn" v-else-if="node.other.isStyle == '1'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}">
  8 |                    跳转{{mTime}}秒
  9 |               </div>
 10 |               <div class="btn3 btn" v-else-if="node.other.isStyle == '2'" :style="{'background-color':node.styl.backgroundColor,'color':node.styl.color,'border-color':node.styl.borderColor}">
 11 |                   {{mTime}}秒
 12 |               </div>
 13 |               <img :src="node.other.pictureVideo" alt="" :style="{'height':node.styl.height,'width':node.styl.width}">
 14 |           </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import { poolList } from "../server/api";
 20 | export default {
 21 |   name: "start-effect",
 22 |   props: ["node", "themeColor"],
 23 |   data() {
 24 |     return {
 25 |       imgList: [],
 26 |       mVisible: true,
 27 |       mTime: 6,
 28 |       tt: null
 29 |     };
 30 |   },
 31 |   computed: {
 32 |     isShow: function() {
 33 |       return parseInt(this.node.other.isShow);
 34 |     },
 35 |     timeLong: function() {
 36 |       return parseInt(this.node.other.timeLong);
 37 |     }
 38 |   },
 39 |   watch: {
 40 |     isShow: function() {
 41 |       if (this.isShow == 0) {
 42 |         this.mVisible = true;
 43 |         this.mTime = this.timeLong;
 44 |         if (this.tt) {
 45 |           clearTimeout(this.tt);
 46 |         }
 47 |         this.countDownFun();
 48 |       } else {
 49 |         this.mVisible = false;
 50 |       }
 51 |     },
 52 |     timeLong: function() {
 53 |       this.mTime = this.timeLong;
 54 |       if (this.tt) {
 55 |         clearTimeout(this.tt);
 56 |       }
 57 |       this.countDownFun();
 58 |     }
 59 |   },
 60 | 
 61 |   created() {
 62 |     console.log(this.node.other);
 63 |     console.log(this.node.styl);
 64 |     this.mTime = this.timeLong;
 65 |     this.countDownFun();
 66 |   },
 67 |   methods: {
 68 |     //倒计时方法
 69 |     countDownFun: function() {
 70 |       var that = this;
 71 |       that.tt = setTimeout(function() {
 72 |         if (that.mTime == 1) {
 73 |           // that.mVisible = false;
 74 |         } else {
 75 |           that.mTime = that.mTime - 1;
 76 |           that.countDownFun();
 77 |         }
 78 |       }, 1000);
 79 |     }
 80 |   }
 81 | };
 82 | </script>
 83 | 
 84 | <style lang="less">
 85 | .startEffect {
 86 |   z-index:100;
 87 |   height: 100%;
 88 |   width: 100%;
 89 |   top: 0;
 90 |   left: 0;
 91 |   position: absolute;
 92 |   background-color:#CACACA;
 93 |   .container3 {
 94 |     width: 100%;
 95 |     height: 100%;
 96 |     position: relative;
 97 |     img {
 98 |       width: 100%;
 99 |       display: block;
100 |     }
101 |     .btn {
102 |       text-align: center;
103 |       border-width: 1px;
104 |       border-style: solid;
105 |       position: absolute;
106 |       top: 5px;
107 |       right: 10px;
108 |     }
109 |     .btn1 {
110 |       height: 28px;
111 |       width: 58px;
112 |       line-height: 28px;
113 |       -moz-border-radius: 16px;
114 |       -ms-border-radius: 16px;
115 |       -o-border-radius: 16px;
116 |       border-radius: 16px;
117 |     }
118 |     .btn2 {
119 |       height: 48px;
120 |       width: 48px;
121 |       line-height: 48px;
122 |       -moz-border-radius: 50%;
123 |       -ms-border-radius: 50%;
124 |       -o-border-radius: 50%;
125 |       border-radius: 50%;
126 |     }
127 |     .btn3 {
128 |       height: 25px;
129 |       width: 25px;
130 |       line-height: 25px;
131 |       -moz-border-radius: 50%;
132 |       -ms-border-radius: 50%;
133 |       -o-border-radius: 50%;
134 |       border-radius: 50%;
135 |     }
136 |   }
137 | }
138 | </style>
139 | 
140 | 


--------------------------------------------------------------------------------
/src/edit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="root" :style="!htmlCon.readOnly&&({backgroundColor:'#f8f8f8'})">
  3 |     <div id="loading" class="laoding">
  4 |       <div class="jd-load"><img src="//st.360buyimg.com/m/images/index/loading.gif">加载中……</div>
  5 |     </div>
  6 |     <Top v-if="!htmlCon.readOnly"></Top>
  7 |     <left-model v-if="!htmlCon.readOnly"></left-model>
  8 |     <div id="view_main" v-if="!htmlCon.readOnly" @click="stopClick" @mouseover.capture="hoverFn($event)">
  9 |       <draggable element="main" class="view_box" :options="drogOptions" @add="onAdd" v-model="site.children" @choose.stop="onChoose" @change="onchange">
 10 |          <render v-for="(child,index) in site.children" :key="index" v-if="!child.placeholder" :node="child" :type="'edit'"/>
 11 |       </draggable>
 12 |     </div>
 13 |     <Config v-if="!htmlCon.readOnly"></Config>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import './assets/less/rest.less'
 19 | import './assets/less/UI.less'
 20 | import { mapState, mapActions , mapMutations} from 'vuex'
 21 | import Draggable from 'vuedraggable'
 22 | import Render from './layout/Render'
 23 | import Config from './layout/configRight'
 24 | import Top from './layout/top'
 25 | import leftModel from '~/layout/leftModel'
 26 | if(!htmlConfig.readOnly){
 27 |   $("html").css('backgroundColor','#f8f8f8')
 28 | }
 29 | export default {
 30 |   name: 'app',
 31 |   components: {
 32 |     Render,
 33 |     Draggable,
 34 |     Config,
 35 |     Top,
 36 |     leftModel,
 37 |   },
 38 |   data () {
 39 |     return {
 40 |       tabIndex:0,
 41 |       leftHide: false,
 42 |       drogOptions:{
 43 |         group: {
 44 |           name: 'widgets',
 45 |         },
 46 |         filter:'.no-drag',
 47 |         forceFallback:true,
 48 | 
 49 |       },
 50 |       old:null,
 51 |     }
 52 |   },
 53 |   computed: {
 54 |     ...mapState(['site', 'currentConfig', 'htmlCon','page_id']),
 55 |   },
 56 |   methods: {
 57 |     ...mapMutations(['addWidget', 'sortWidget', 'setConfig','setWidget']),
 58 |     ...mapActions(['getSite','getDefaultConfig']),
 59 |     stopClick(){
 60 |       console.log("stop")
 61 |     },
 62 |     onchange(a){
 63 |       this.old=a.added.newIndex;
 64 |     },
 65 |     onAdd ({ item, newIndex }) {
 66 |       const widgetType = item.getAttribute('type'),
 67 |            wType = item.getAttribute('wtype'),
 68 |             model_id=item.getAttribute('model_id');
 69 |       this.site.children.splice(this.old,1)
 70 |       if(wType=='floor'){
 71 |         this.getDefaultConfig({ section: this.site.children, widgetType, newIndex ,model_id})
 72 |       }else{
 73 |         this.site.children.splice(newIndex,1);
 74 |         this.$alert("非楼层级别组件请拖拽至楼层组件内")
 75 |         return false;
 76 |       }
 77 |     },
 78 |     onSort ({oldIndex, newIndex, from, to}) {
 79 |       console.log("onSort")
 80 |       if(from === to) {
 81 |         this.sortWidget({array: this.site.children, oldIndex, newIndex})
 82 |         this.currentConfig.index=-1
 83 |       }
 84 |     },
 85 |     onChoose({oldIndex}){
 86 |       this.setConfig({oldIndex, currDom: this.site})
 87 |     },
 88 |     hoverFn(e){
 89 |       let self_el=$(e.target),
 90 |         name=self_el.attr('component-name');
 91 |       if(self_el.attr('id')!=='view_main'){
 92 |         $('.component').on("mouseover",function(){$(this).addClass('component_hover')})
 93 |         $('.component').on("mouseout",function(){$(this).removeClass('component_hover')})
 94 | 
 95 |       }
 96 | 
 97 |     }
 98 |   },
 99 |   mounted () {
100 |     this.getSite();
101 | 
102 |   }
103 | }
104 | </script>
105 | 
106 | <style lang="less">
107 |   .no-dragClass{display:none;}
108 | .root {
109 |   .laoding {
110 |     width: 100%;
111 |     height: 100%;
112 |     position: fixed;
113 |     left: 0;
114 |     top: 0;
115 |     z-index:9999;
116 |     font-size:14px;
117 |     color: #686868;
118 |     display:none;
119 |     text-align: center;
120 |     .jd-load {
121 |       position: relative;
122 |       top: 40%
123 |     }
124 |     .jd-load img {
125 |       display: block;
126 |       margin: 5px auto
127 |     }
128 |   }
129 | }
130 | .component{box-sizing:border-box}
131 | .component_hover{
132 |   border:1px solid #5E9EF3;position: relative;
133 |   &:before{
134 |     content:attr(component-name);position:absolute;right:0;top:0;background-color:#5E9EF3;color:#fff;height:24px;line-height:24px;z-index: 9999;
135 |   }
136 | }
137 | .icon-shouqi{
138 |   transform: rotate(180deg);
139 | }
140 | .iconfont{
141 |   font-size:18px;color:#666;
142 | }
143 | .icon-white{color:#fff;}
144 | 
145 | // main
146 | #view_main{
147 |   background:url('./assets/img/main_bg.png') no-repeat;width:364px;height:720px;margin:0 auto;background-size:contain;position:relative;top:70px;
148 |   .view_box{
149 |     background-color:#F8F8F8;width:79%;height:72%;/*-webkit-transform: translate(13%,17%);*/border:1px solid #ccc;border-radius:5px;
150 |     overflow-x:auto;position:absolute;left: 10.2%;top: 12.8%;
151 |   }
152 | }
153 | 
154 | </style>
155 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const webpack = require('webpack')
  3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  4 | // 引包：删除（旧的打包文件）dist目录
  5 | const CleanWebpackPlugin = require('clean-webpack-plugin')
  6 | var config = require('./config.json')
  7 | let isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'prefat' ? 'dev' : 'pro'
  8 | let proPlugins = []
  9 | if (isDev !== 'dev') {
 10 |   proPlugins.push(
 11 |     new webpack.optimize.UglifyJsPlugin({
 12 |       // 最紧凑的输出
 13 |       beautify: false,
 14 |       // 删除所有的注释
 15 |       comments: false,
 16 |       compress: {
 17 |         // 在UglifyJs删除没有用到的代码时不输出警告
 18 |         warnings: false,
 19 |         // 删除所有的 `console` 语句
 20 |         // 还可以兼容ie浏览器
 21 |         drop_console: true,
 22 |         // 内嵌定义了但是只用到一次的变量
 23 |         collapse_vars: true,
 24 |         // 提取出出现多次但是没有定义成变量去引用的静态值
 25 |         reduce_vars: true
 26 |       }
 27 |     }),
 28 |     new CleanWebpackPlugin(path.resolve('./dist/', config.version))// build命令清空dist下配置的当前版本文件
 29 |   )
 30 | }
 31 | module.exports = {
 32 |   entry: {
 33 |     vendor: ["vue", "vuex", "vuedraggable", "mint-ui", "element-ui", "axios"],
 34 |     build: ["babel-polyfill", path.resolve(__dirname, "./src/edit.js")],
 35 |     view: [path.resolve(__dirname, "./src/view.js")]
 36 |   },
 37 |   output: {
 38 |     path: path.resolve("./dist/", config.version),
 39 |     filename: "[name].js",
 40 |     chunkFilename: "chunk[id].js?[chunkhash]",
 41 |     publicPath: "/"
 42 |   },
 43 |   devtool: "inline-source-map",
 44 |   devServer: {
 45 |     host: "0.0.0.0",
 46 |     port: 8080,
 47 |     https: false,
 48 |     hotOnly: true,
 49 |     disableHostCheck: true,
 50 |     proxy: {
 51 |       "/api": {
 52 |         target: "http://localhost:8080",
 53 |         changeOrigin: true,
 54 |         pathRewrite: {
 55 |           "^/api": "/mock"
 56 |         }
 57 |       }
 58 |     },
 59 |     // contentBase: "./dist",
 60 |     compress: true,
 61 |     hot: true,
 62 |     disableHostCheck: true,
 63 |     inline: true
 64 |   },
 65 |   plugins: [
 66 |     new webpack.optimize.CommonsChunkPlugin("vendor"),
 67 |     new HtmlWebpackPlugin({
 68 |       filename: "edit.html",
 69 |       inject: "body",
 70 |       template: "./src/tpl/edit.html",
 71 |       title: "cmsx",
 72 |       appMountId: "app",
 73 |       excludeChunks: ["view"],
 74 |       chunksSortMode: function(chunk1, chunk2) {
 75 |         var order = ["vendor", "build"];
 76 |         var order1 = order.indexOf(chunk1.names[0]);
 77 |         var order2 = order.indexOf(chunk2.names[0]);
 78 |         return order1 - order2;
 79 |       },
 80 |       minify: {
 81 |         // 打包后压缩
 82 |         removeComments: true, // 打包后删除注释
 83 |         collapseWhitespace: true // 打包后删除空格
 84 |       },
 85 |       mobile: true
 86 |     }),
 87 |     new HtmlWebpackPlugin({
 88 |       filename: "view.html",
 89 |       inject: "body",
 90 |       template: "./src/tpl/view.html",
 91 |       title: "cmsx",
 92 |       appMountId: "app",
 93 |       excludeChunks: ["build"],
 94 |       chunksSortMode: function(chunk1, chunk2) {
 95 |         var order = ["vendor", "view"];
 96 |         var order1 = order.indexOf(chunk1.names[0]);
 97 |         var order2 = order.indexOf(chunk2.names[0]);
 98 |         return order1 - order2;
 99 |       },
100 |       minify: {
101 |         // 打包后压缩
102 |         removeComments: true, // 打包后删除注释
103 |         collapseWhitespace: true // 打包后删除空格
104 |       },
105 |       mobile: true
106 |     }),
107 |     new webpack.DefinePlugin({
108 |       "process.env": {
109 |         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
110 |       }
111 |     }),
112 |     ...proPlugins,
113 |     new webpack.NamedModulesPlugin(),
114 |     new webpack.HotModuleReplacementPlugin()
115 |   ],
116 |   module: {
117 |     rules: [
118 |       {
119 |         test: /\.vue$/,
120 |         loader: "vue-loader",
121 |         options: {
122 |           postcss: [require("postcss-cssnext")()]
123 |         }
124 |       },
125 |       {
126 |         test: /\.js$/,
127 |         loader: "babel-loader",
128 |         exclude: /node_modules/
129 |       },
130 |       {
131 |         test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
132 |         loader: "url-loader",
133 |         options: {
134 |           limit: 10000
135 |         }
136 |       },
137 |       {
138 |         test: /\.less$/,
139 |         use: ["style-loader", "css-loader", "less-loader"],
140 |         exclude: /node_modules/
141 |       },
142 |       {
143 |         test: /\.css$/,
144 |         loader: [
145 |           "vue-style-loader",
146 |           "style-loader",
147 |           "css-loader",
148 |           "less-loader"
149 |         ]
150 |       },
151 |       {
152 |         // 图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
153 |         // 如下配置，将小于8192byte的图片转成base64码
154 |         test: /\.(png|jpg|gif)$/,
155 |         loader: "url-loader?limit=8192&name=[name].[ext]?[hash]"
156 |       }
157 |     ]
158 |   },
159 |   resolve: {
160 |     extensions: [".js", ".vue"],
161 |     alias: {
162 |       "~": path.resolve(__dirname, "./src")
163 |     }
164 |   }
165 | };
166 | 


--------------------------------------------------------------------------------
/src/components/hotImage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component hot-image" :style="node.styl" :component-name="node.name" >
  3 |     <img :src="node.other.image" alt="" class="hot_bg_img">
  4 |       <drag v-if="isRenner" v-for="(item,index) in hotStyle" ref="hot" :w="item.w" :h="item.h" :x="item.x" :y="item.y" :key="index" :dragindex="index" @dragstop="onDrag" @resizestop="onResize" :parent="true">
  5 |         {{index}}
  6 |       </drag>
  7 |       <span @click.stop.self="edit" class="add_hot">编辑</span>
  8 |       <el-dialog title="热区设置" :visible.sync="dialogFormVisible" :width="'30%'" class="contion" :append-to-body="true" :modal-append-to-body="true">
  9 |         <el-row v-for="(item,index) in temHot" :key="index">
 10 |           <el-input v-model="item.linkValue" class="input-with-select" size="mini" :placeholder="item.linkType==0?'请输入http://或https://开头的链接地址':'请输入ID数字'">
 11 |             <el-select v-model="item.linkType" slot="prepend">
 12 |               <el-option v-for="(list,i) in options" :key="i" :label="list.label" :value="list.value"></el-option>
 13 |             </el-select>
 14 |             <el-button type="danger" slot="append" icon="el-icon-delete" v-if="temHot.length>1" @click="del(index)"></el-button>
 15 |           </el-input>
 16 |         </el-row>
 17 |         <el-row>
 18 |           <el-button type="primary" size="mini" @click="add">新增热区</el-button>
 19 |         </el-row>
 20 |         <div slot="footer" class="dialog-footer">
 21 |           <el-button @click.stop="cacle">取 消</el-button>
 22 |           <el-button type="primary" @click.stop="saveEdit">确 定</el-button>
 23 |         </div>
 24 |       </el-dialog>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 |   import drag from '~/common/hotDrag'
 30 |   export default {
 31 |     name: "hotImage",
 32 |     props: ['node', 'type'],
 33 |     components:{
 34 |       drag
 35 |     },
 36 |     data(){
 37 |       return {
 38 |         hotStyle:[
 39 |           {
 40 |             w:80,
 41 |             h:30,
 42 |             x:20,
 43 |             y:30,
 44 |             linkType:'0',
 45 |             linkValue:''
 46 |           }
 47 |         ],
 48 |         temHot:[],
 49 |         isRenner:true,
 50 |         defalutHot:{
 51 |           w:80,
 52 |           h:30,
 53 |           x:60,
 54 |           y:60,
 55 |           linkType:'0',
 56 |           linkValue:''
 57 |         },
 58 |         dialogFormVisible:false,
 59 |         activeModle:0,
 60 |         activeValue:'0',
 61 |         activeInput:'',
 62 |         options:[{
 63 |           value:'0',
 64 |           label:'链接'
 65 |         },{
 66 |           value:'1',
 67 |           label:'商品id'
 68 |         },{
 69 |           value:'2',
 70 |           label:'店铺id'
 71 |         }],
 72 |         elWidth:0,
 73 |         elHeight:0,
 74 |       }
 75 |     },
 76 |     computed: {
 77 |     },
 78 |     mounted(){
 79 |       !this.node.hotStyle&&(this.node.hotStyle=this.hotStyle)||(this.hotStyle=this.node.hotStyle);
 80 |       this.node.defaultwh={
 81 |         width:$('.hot-image').width(),
 82 |         height:$('.hot-image').height()
 83 |       }
 84 |     },
 85 |     watch:{
 86 |       'node.styl.height':function(val){
 87 |         this.isRenner = false
 88 |         this.$nextTick(() => {
 89 |           this.isRenner = true
 90 |         })
 91 |       },
 92 |       'node.styl.width':function(val){
 93 |         this.isRenner = false
 94 |         this.$nextTick(() => {
 95 |           this.isRenner = true
 96 |         })
 97 |       }
 98 |     },
 99 |     methods:{
100 |       edit(){
101 |         this.dialogFormVisible=true;
102 |         this.temHot.length=0;
103 |         let a=JSON.parse(JSON.stringify(this.hotStyle))
104 |         this.temHot.push(...a);
105 |       },
106 |       del(i){
107 |         this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
108 |           confirmButtonText: '确定',
109 |           cancelButtonText: '取消',
110 |           type: 'warning'
111 |         }).then(() => {
112 |           this.temHot.splice(i,1)
113 |         }).catch(() => {
114 | 
115 |         });
116 | 
117 |       },
118 |       add(){
119 |         this.temHot.push({...this.defalutHot})
120 |       },
121 |       saveEdit(){
122 |         this.hotStyle.length=0;
123 |         this.hotStyle.push(...this.temHot)
124 |         this.dialogFormVisible=false
125 |       },
126 |       cacle(){
127 |         this.dialogFormVisible=false;
128 |       },
129 |       onResize: function (x, y, w, h,i) {
130 |         let old=this.hotStyle[i];
131 |         this.hotStyle.splice(i,1,Object.assign(old,{x:x,y:y,w:w,h:h}))
132 |       },
133 |       onDrag: function (x,y,i) {
134 |         this.hotStyle[i].x=x
135 |         this.hotStyle[i].y=y
136 |       }
137 |     },
138 |   }
139 | </script>
140 | 
141 | <style scoped lang="less">
142 |   .image_title{
143 |     background-repeat:no-repeat;
144 |   }
145 | .hot-image{
146 |   position:relative;box-sizing: border-box;
147 |   .hot_bg_img{position:absolute;width:100%;height:100%;z-index:1}
148 |   .add_hot{position:absolute;z-index:999;color:#5E9EF3;padding:8px 12px;background-color:#fff;cursor:pointer}
149 |   .hot_link{position:absolute;}
150 | }
151 |   .el-row{margin-bottom:10px;}
152 |   .el-input-group__prepend .el-select{
153 |    width:120px;
154 |   }
155 |   .el-input-group__prepend{background-color:#fff}
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/components/scrollActive.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="component nab_tab_box" :component-name="node.name" :style="node.styl">
  3 |     <scroll ref="scrollactive" :offset="offset" :always-track="alwaysTrack" :duration="duration" :click-to-scroll="clickToScroll" :bezier-easing-value="easing" :activeObj="node.other" :style="node.styl">
  4 |         <ul class="nav-center">
  5 |           <li v-for="(item,index) in el" :style="{'lineHeight':node.styl.height}">
  6 |             <a :href="item.floor" v-if="index==0" :style="activeClass" class="scrollactive-item nav-item isActive">{{item.name}}</a>
  7 |             <a :href="item.floor" v-else :style="{'color':node.other.fontColor,'width':node.other.otherWidth}" class="scrollactive-item nav-item">{{item.name}}</a>
  8 |           </li>
  9 |         </ul>
 10 |         <p @click.stop.self="edit" class="nav_edit_but" type="text">编辑</p>
 11 |     </scroll>
 12 |     <el-dialog title="锚点编辑" :visible.sync="dialogFormVisible" :width="'30%'" class="contion" :append-to-body="true" :modal-append-to-body="true">
 13 |         <el-row v-for="(item,index) in nav_json" :key="index">
 14 |           <el-input v-model="item.name" class="input-with-select" size="mini">
 15 |             <el-select v-model="item.floor" slot="prepend">
 16 |               <el-option v-for="(list,i) in floor_list" :key="i" :label="'楼层'+(i+1)" :value="list"></el-option>
 17 |             </el-select>
 18 |             <el-button type="danger" slot="append" icon="el-icon-delete" @click="removeElement(index)"></el-button>
 19 |           </el-input>
 20 |         </el-row>
 21 |         <el-row>
 22 |           <el-button type="success" size="mini" @click="addNewElement">+锚点</el-button>
 23 |         </el-row>
 24 |       <div slot="footer" class="dialog-footer">
 25 |         <el-button @click.stop="cancel">取 消</el-button>
 26 |         <el-button type="primary" @click.stop="success">确 定</el-button>
 27 |       </div>
 28 |     </el-dialog>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |     import scroll from '~/common/scroll'
 34 |     export default {
 35 |       name: "scroll-active",
 36 |       props: ['node', 'type'],
 37 |       components:{
 38 |         scroll,
 39 |       },
 40 |       data(){
 41 |         return {
 42 |           alwaysTrack: false,
 43 |           duration: 600,
 44 |           clickToScroll: true,
 45 |           offset: this.node.other.lineHeight,
 46 |           easing: '.5,0,.35,1',
 47 | 
 48 |           dialogFormVisible:false,
 49 |           nav_json:[],
 50 |           floor_list:[]
 51 |         }
 52 |       },
 53 |       computed: {
 54 |         numberOfElements() {
 55 |           return this.el.length;
 56 |         },
 57 |         el(){
 58 |           return this.node.saveConfig
 59 |         },
 60 |         activeClass(){
 61 |           let obj=this.node.other;
 62 |           let activeCss=`background-color:${obj.activeBgColor};background-image:url(${obj.activeBgImg});color:${obj.activeColor};width:${obj.otherWidth}`
 63 |           return activeCss
 64 |         }
 65 |       },
 66 |       mounted() {
 67 |         let el=document.querySelector('.nab_tab_box');
 68 |         this.$off('choose')
 69 |       },
 70 |       methods: {
 71 |         stop(e){
 72 |           e.preventDefault();
 73 |           return false
 74 |         },
 75 |         edit(){
 76 |           this.dialogFormVisible = true;
 77 |           let query=document.querySelectorAll('.floor');
 78 |           this.floor_list.splice(0,this.floor_list.length);
 79 |           query.forEach(item=>{
 80 |             this.floor_list.push('#'+item.id)
 81 |           })
 82 |         },
 83 |         addNewElement() {
 84 |           let defaultVal={
 85 |             name:'标题',
 86 |             floor:''
 87 |           }
 88 |           this.nav_json.push(defaultVal)
 89 |         },
 90 |         removeElement(i) {
 91 |           this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
 92 |             confirmButtonText: '确定',
 93 |             cancelButtonText: '取消',
 94 |             type: 'warning'
 95 |           }).then(() => {
 96 |             this.nav_json.splice(i,1)
 97 |           }).catch(() => {
 98 | 
 99 |           });
100 | 
101 |         },
102 |         cancel(){
103 |           let that=this;
104 |           this.dialogFormVisible = false;
105 |           this.nav_json.length=0
106 |           this.el.map(item=>that.nav_json.push(item));
107 |         },
108 |         success(){
109 |           let that=this;
110 |           that.el.length=0
111 |           this.nav_json.map(item=>that.el.push(item))
112 |           this.dialogFormVisible = false;
113 |         }
114 |       },
115 |     }
116 | </script>
117 | 
118 | <style lang="less">
119 | .nab_tab_box{
120 |   position:relative;min-height:24px;
121 |   .nav-center{
122 |     overflow:auto;padding:0 10px;box-sizing:border-box;display:flex;flex-flow:row nowrap;flex-shrink:1;flex-basic:50px;
123 |     li{
124 |       font-size: 14px;text-align:center;padding:0 5px;display:block;
125 |       &:not(:first-child) {
126 |         margin-left: 15px;
127 |       }
128 |     }
129 |     a{
130 |       color:inherit;display:inline-block;min-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
131 |     }
132 |   }
133 |   .nav_edit_but{position:absolute;line-height:26px;left:0px;top:0;background-color:#fff;color:#5E9EF3;padding:0 8px;}
134 | }
135 | .contion{
136 |   width:80%;margin:0 auto
137 | }
138 | .el-select .el-input {
139 |   width: 100px;
140 | }
141 | .input-with-select .el-input-group__prepend {
142 |   background-color: #fff;
143 | }
144 | .input-with-select .el-input-group__prepend {
145 |   background-color: #fff;
146 | }
147 | .sortable-ghost{z-index:99;}
148 |   .el-row{margin-bottom:10px;}
149 | </style>
150 | 


--------------------------------------------------------------------------------
/src/layout/leftModel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="left_box">
  3 |       <h3 class="left_title">
  4 |         <span v-show="leftHide||floor_nav">组件库</span>
  5 |         <i @click.stop="switchFn" class="icon iconfont icon-zhankai icon-white" :class="leftHide?'icon-shouqi':''"></i>
  6 |       </h3>
  7 |       <div class="left_scroll">
  8 |         <ul class="tab_nav" @click="tabClick">
  9 |           <li v-for="(tabItem,index) in tabTree" :class="tabIndex==index?'active':''">
 10 |             <i class="icon iconfont tabIcon" :class="tabItem.icon"></i>
 11 |             <p>{{tabItem.text}}</p>
 12 |           </li>
 13 |         </ul>
 14 |         <p class="list_length" v-show="leftHide" v-if="widgets.length">全部（{{widgets.length}}）</p>
 15 |         <draggable v-show="leftHide" :options="dragOptions" class="leftModel" :list="widgets" >
 16 |           <p class="nolist" v-if="!widgets.length">暂无相关组件</p>
 17 |           <div v-else v-for="widget in widgets" class="widget-card" :wtype="widget.w" :type="widget.placeholder.type" :model_id="widget.model_id" :close="widget.isClose">
 18 |             <i class="icon iconfont" :class="widget.icon"></i>
 19 |             <p>{{widget.name}}</p>
 20 |           </div>
 21 |         </draggable>
 22 |         <div v-if="floor_nav" class="leftModel">
 23 |           <tree :json="site.children"></tree>
 24 |         </div>
 25 |       </div>
 26 | 
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import { mapState, mapActions , mapMutations} from 'vuex'
 32 |   import Draggable from 'vuedraggable'
 33 |   import Tree from '~/common/jsonTree'
 34 |     export default {
 35 |       name: "leftModel",
 36 |       components: {
 37 |         Draggable,
 38 |         Tree
 39 |       },
 40 |       data(){
 41 |           return {
 42 |             tabIndex:0,
 43 |             leftHide: false,
 44 |             floor_nav:false,
 45 |             dragOptions: {
 46 |               group: {
 47 |                 name: 'widgets',
 48 |                 pull: 'clone',
 49 |                 put:false,
 50 |               },
 51 |               sort: false,
 52 |               forceFallback: true
 53 |             },
 54 |           }
 55 |       },
 56 |       computed: {
 57 |         ...mapState(['tabTree','widgets','site']),
 58 |       },
 59 |       mounted(){
 60 |         this.setWidget(this.tabTree[0].list)
 61 |         this.leftHide=true;
 62 |         $('.left_scroll,.tab_nav,.leftModel').css("maxHeight",$(window).height()-70+'px');
 63 |         window.onresize=function(){
 64 |           $('.left_scroll,.tab_nav,.leftModel').css("maxHeight",$(window).height()-20+"px");
 65 |         }
 66 |         $(window).scroll(function(){
 67 |           var scrollTop = $(window).scrollTop();
 68 |           if(scrollTop+$(window).height()>$('body').height()+80){
 69 |             return false
 70 |           }
 71 |           if(scrollTop < 80)
 72 |             $(".left_box").css('top', '80px');
 73 |           else
 74 |             $(".left_box").css('top', scrollTop +'px');
 75 |             $('.left_scroll,.tab_nav,.leftModel').css("maxHeight",$(window).height()-32+"px");
 76 |         });
 77 |       },
 78 |       methods:{
 79 |         ...mapMutations(['setWidget']),
 80 |         ...mapActions(['getSite','getDefaultConfig']),
 81 |         tabClick(e){
 82 |           let i=$(e.target).parent().index();
 83 |           this.tabIndex=i
 84 |           if(this.tabTree[i].attrId==1){
 85 |             this.setWidget(this.tabTree[i].list)
 86 |             this.floor_nav=false;
 87 |             this.leftHide=true;
 88 |           }else{
 89 |             this.leftHide=false;
 90 |             this.floor_nav=true;
 91 |           }
 92 | 
 93 |         },
 94 |         switchFn(){
 95 |           this.leftHide?this.leftHide=false:this.leftHide=true;
 96 |         },
 97 |       }
 98 |     }
 99 | </script>
100 | 
101 | <style lang="less">
102 | .left_box {
103 |   background-color:#fff;
104 |   position:absolute;
105 |   top:70px;left:0;overflow:hidden;
106 |   max-width:280px;
107 |   .left_title{
108 |     color:#fff;
109 |     background-color:#5E9EF3;
110 |     display:flex;
111 |     justify-content: space-between;
112 |     padding:6px 8px;
113 |     span{
114 |       display: block;width: 80%;
115 |     }
116 |     i{
117 |       text-align: center;flex: 1;
118 |     }
119 |   }
120 |   .left_scroll{
121 | 
122 |   }
123 |   .tab_nav{
124 |     width:70px;text-align:center;border-right:1px solid #F0F0F0;float:left;color:#666;overflow:auto;
125 |     li{
126 |       padding:5px 0;
127 |       &:hover i,&:hover p{
128 |         color:#5E9EF3;curpor:pointer;
129 |       }
130 |     }
131 |     .active{
132 |       background-color:#5E9EF3;color:#fff;
133 |       .iconfont{color:#fff }
134 |       &:hover i,&:hover p{
135 |         color:#fff;
136 |       }
137 |     }
138 |     .tabIcon{
139 |       font-size:24px;text-align:center;display:block;width:100%;padding:4px 0;
140 |     }
141 |   }
142 |   .list_length{
143 |     width:170px;float:left;display:inline-block;fonn-size:12px;color:#D3D3D3;line-height:16px;padding:6px 5px;box-sizing:border-box;
144 |   }
145 |   .leftModel{
146 |     width:170px;overflow-y: auto;display:flex;flex-wrap: wrap;justify-items: baseline;
147 |     .nolist{color:#666;display:block;width:100%;padding:40px 30px;text-align:center;}
148 |   }
149 |   .widget-card {
150 |     border-radius: 2px;
151 |     width: 85px;margin:6px 0;
152 |     display: flex;
153 |     flex-direction: column;
154 |     align-items: center;
155 |     cursor: move;
156 |     i {
157 |       display: block;
158 |       font-size: 2em;
159 |     }
160 |     p {
161 |       margin-top: 5px;
162 |       margin-bottom: 5px;color:#666;
163 |     }
164 |     &:hover i,&:hover p{
165 |       color:#5E9EF3;
166 |     }
167 |   }
168 | }
169 | </style>
170 | 


--------------------------------------------------------------------------------
/src/assets/iconFont/demo.css:
--------------------------------------------------------------------------------
  1 | *{margin: 0;padding: 0;list-style: none;}
  2 | /*
  3 | KISSY CSS Reset
  4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
  5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
  6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
  7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
  8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
  9 |  */
 10 | 
 11 | /** 清除内外边距 **/
 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 14 | pre, /* text formatting elements 文本格式元素 */
 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 16 | th, td /* table elements 表格元素 */ {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | /** 设置默认字体 **/
 22 | body,
 23 | button, input, select, textarea /* for ie */ {
 24 |   font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
 25 | }
 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 30 | 
 31 | /** 重置列表元素 **/
 32 | ul, ol { list-style: none; }
 33 | 
 34 | /** 重置文本格式元素 **/
 35 | a { text-decoration: none; }
 36 | a:hover { text-decoration: underline; }
 37 | 
 38 | 
 39 | /** 重置表单元素 **/
 40 | legend { color: #000; } /* for ie6 */
 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 43 | /* 注：optgroup 无法扶正 */
 44 | 
 45 | /** 重置表格元素 **/
 46 | table { border-collapse: collapse; border-spacing: 0; }
 47 | 
 48 | /* 清除浮动 */
 49 | .ks-clear:after, .clear:after {
 50 |   content: '\20';
 51 |   display: block;
 52 |   height: 0;
 53 |   clear: both;
 54 | }
 55 | .ks-clear, .clear {
 56 |   *zoom: 1;
 57 | }
 58 | 
 59 | .main {
 60 |   padding: 30px 100px;
 61 | width: 960px;
 62 | margin: 0 auto;
 63 | }
 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
 65 | 
 66 | .helps{margin-top:40px;}
 67 | .helps pre{
 68 |   padding:20px;
 69 |   margin:10px 0;
 70 |   border:solid 1px #e7e1cd;
 71 |   background-color: #fffdef;
 72 |   overflow: auto;
 73 | }
 74 | 
 75 | .icon_lists{
 76 |   width: 100% !important;
 77 | 
 78 | }
 79 | 
 80 | .icon_lists li{
 81 |   float:left;
 82 |   width: 100px;
 83 |   height:180px;
 84 |   text-align: center;
 85 |   list-style: none !important;
 86 | }
 87 | .icon_lists .icon{
 88 |   font-size: 42px;
 89 |   line-height: 100px;
 90 |   margin: 10px 0;
 91 |   color:#333;
 92 |   -webkit-transition: font-size 0.25s ease-out 0s;
 93 |   -moz-transition: font-size 0.25s ease-out 0s;
 94 |   transition: font-size 0.25s ease-out 0s;
 95 | 
 96 | }
 97 | .icon_lists .icon:hover{
 98 |   font-size: 100px;
 99 | }
100 | 
101 | 
102 | 
103 | .markdown {
104 |   color: #666;
105 |   font-size: 14px;
106 |   line-height: 1.8;
107 | }
108 | 
109 | .highlight {
110 |   line-height: 1.5;
111 | }
112 | 
113 | .markdown img {
114 |   vertical-align: middle;
115 |   max-width: 100%;
116 | }
117 | 
118 | .markdown h1 {
119 |   color: #404040;
120 |   font-weight: 500;
121 |   line-height: 40px;
122 |   margin-bottom: 24px;
123 | }
124 | 
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 |   color: #404040;
131 |   margin: 1.6em 0 0.6em 0;
132 |   font-weight: 500;
133 |   clear: both;
134 | }
135 | 
136 | .markdown h1 {
137 |   font-size: 28px;
138 | }
139 | 
140 | .markdown h2 {
141 |   font-size: 22px;
142 | }
143 | 
144 | .markdown h3 {
145 |   font-size: 16px;
146 | }
147 | 
148 | .markdown h4 {
149 |   font-size: 14px;
150 | }
151 | 
152 | .markdown h5 {
153 |   font-size: 12px;
154 | }
155 | 
156 | .markdown h6 {
157 |   font-size: 12px;
158 | }
159 | 
160 | .markdown hr {
161 |   height: 1px;
162 |   border: 0;
163 |   background: #e9e9e9;
164 |   margin: 16px 0;
165 |   clear: both;
166 | }
167 | 
168 | .markdown p,
169 | .markdown pre {
170 |   margin: 1em 0;
171 | }
172 | 
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 |   width: 80%;
179 | }
180 | 
181 | .markdown ul > li {
182 |   list-style: circle;
183 | }
184 | 
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 |   margin-left: 20px;
188 |   padding-left: 4px;
189 | }
190 | 
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 |   margin: 0.6em 0;
194 | }
195 | 
196 | .markdown ol > li {
197 |   list-style: decimal;
198 | }
199 | 
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 |   margin-left: 20px;
203 |   padding-left: 4px;
204 | }
205 | 
206 | .markdown code {
207 |   margin: 0 3px;
208 |   padding: 0 5px;
209 |   background: #eee;
210 |   border-radius: 3px;
211 | }
212 | 
213 | .markdown pre {
214 |   border-radius: 6px;
215 |   background: #f7f7f7;
216 |   padding: 20px;
217 | }
218 | 
219 | .markdown pre code {
220 |   border: none;
221 |   background: #f7f7f7;
222 |   margin: 0;
223 | }
224 | 
225 | .markdown strong,
226 | .markdown b {
227 |   font-weight: 600;
228 | }
229 | 
230 | .markdown > table {
231 |   border-collapse: collapse;
232 |   border-spacing: 0px;
233 |   empty-cells: show;
234 |   border: 1px solid #e9e9e9;
235 |   width: 95%;
236 |   margin-bottom: 24px;
237 | }
238 | 
239 | .markdown > table th {
240 |   white-space: nowrap;
241 |   color: #333;
242 |   font-weight: 600;
243 | 
244 | }
245 | 
246 | .markdown > table th,
247 | .markdown > table td {
248 |   border: 1px solid #e9e9e9;
249 |   padding: 8px 16px;
250 |   text-align: left;
251 | }
252 | 
253 | .markdown > table th {
254 |   background: #F7F7F7;
255 | }
256 | 
257 | .markdown blockquote {
258 |   font-size: 90%;
259 |   color: #999;
260 |   border-left: 4px solid #e9e9e9;
261 |   padding-left: 0.8em;
262 |   margin: 1em 0;
263 |   font-style: italic;
264 | }
265 | 
266 | .markdown blockquote p {
267 |   margin: 0;
268 | }
269 | 
270 | .markdown .anchor {
271 |   opacity: 0;
272 |   transition: opacity 0.3s ease;
273 |   margin-left: 8px;
274 | }
275 | 
276 | .markdown .waiting {
277 |   color: #ccc;
278 | }
279 | 
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 |   opacity: 1;
287 |   display: inline-block;
288 | }
289 | 
290 | .markdown > br,
291 | .markdown > p > br {
292 |   clear: both;
293 | }
294 | 
295 | 
296 | .hljs {
297 |   display: block;
298 |   background: white;
299 |   padding: 0.5em;
300 |   color: #333333;
301 |   overflow-x: auto;
302 | }
303 | 
304 | .hljs-comment,
305 | .hljs-meta {
306 |   color: #969896;
307 | }
308 | 
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 |   color: #df5000;
316 | }
317 | 
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 |   color: #a71d5d;
322 | }
323 | 
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 |   color: #0086b3;
329 | }
330 | 
331 | .hljs-section,
332 | .hljs-name {
333 |   color: #63a35c;
334 | }
335 | 
336 | .hljs-tag {
337 |   color: #333333;
338 | }
339 | 
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 |   color: #795da3;
347 | }
348 | 
349 | .hljs-addition {
350 |   color: #55a532;
351 |   background-color: #eaffea;
352 | }
353 | 
354 | .hljs-deletion {
355 |   color: #bd2c00;
356 |   background-color: #ffecec;
357 | }
358 | 
359 | .hljs-link {
360 |   text-decoration: underline;
361 | }
362 | 
363 | pre{
364 |   background: #fff;
365 | }
366 | 
367 | 
368 | 
369 | 
370 | 
371 | 


--------------------------------------------------------------------------------
/src/common/scroll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="scrollactive-nav" ref="scrollactive-nav-wrapper">
  3 |     <slot></slot>
  4 |   </nav>
  5 | </template>
  6 | 
  7 | <script>
  8 |   import bezierEasing from 'bezier-easing';
  9 |   export default {
 10 |     name:"scroll",
 11 |     props: {
 12 |       activeClass: {
 13 |         type: String,
 14 |         default: 'isActive',
 15 |       },
 16 |       activeObj:{
 17 |         type:Object,
 18 |         default:''
 19 |       },
 20 |       offset: {
 21 |         type: Number,
 22 |         default: 20,
 23 |       },
 24 | 
 25 |       clickToScroll: {
 26 |         type: Boolean,
 27 |         default: true,
 28 |       },
 29 | 
 30 |       duration: {
 31 |         type: Number,
 32 |         default: 600,
 33 |       },
 34 | 
 35 |       alwaysTrack: {
 36 |         type: Boolean,
 37 |         default: false,
 38 |       },
 39 | 
 40 |       bezierEasingValue: {
 41 |         type: String,
 42 |         default: '.5,0,.35,1',
 43 |       },
 44 | 
 45 |       modifyUrl: {
 46 |         type: Boolean,
 47 |         default: true,
 48 |       },
 49 | 
 50 |       exact: {
 51 |         type: Boolean,
 52 |         default: false,
 53 |       },
 54 |     },
 55 |     data() {
 56 |       return {
 57 |         observer: null,
 58 |         items: [],
 59 |         el:[],
 60 |         currentItem: null,
 61 |         lastActiveItem: null,
 62 |         scrollAnimationFrame: null,
 63 |         bezierEasing,
 64 |       };
 65 |     },
 66 |     computed: {
 67 |       cubicBezierArray() {
 68 |         return this.bezierEasingValue.split(',');
 69 |       },
 70 |       activeCss(){
 71 |         let obj=this.activeObj;
 72 |         let activeCss=`background-color:${obj.activeBgColor};background-image:url(${obj.activeBgImg});color:${obj.activeColor};width:${obj.otherWidth}`
 73 |         return activeCss
 74 |       }
 75 |     },
 76 |     watch:{
 77 |       activeCss:function(value){
 78 |         var el=document.querySelector('.isActive')||0;
 79 |         if(el){
 80 |           el.style.cssText='';
 81 |           el.style.cssText=value
 82 |         }
 83 |       }
 84 |     },
 85 |     mounted() {
 86 |       let that=this;
 87 |       const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 88 |       if (!this.observer) {
 89 |         // Watch for DOM changes in the scrollactive element wrapper
 90 |         this.observer = new MutationObserver(this.initScrollactiveItems);
 91 |         this.observer.observe(this.$refs['scrollactive-nav-wrapper'], {
 92 |           childList: true,
 93 |           subtree: true,
 94 |         });
 95 |       };
 96 |       this.initScrollactiveItems();
 97 |       this.removeActiveClass();
 98 |       this.currentItem = this.getItemInsideWindow();
 99 |       if (this.currentItem) {
100 |         console.log("sss")
101 |         this.currentItem.classList.add(this.activeClass);
102 |         this.currentItem.style.cssText=this.activeCss;
103 |       }else{//加载后默认选中项
104 |         var el=document.querySelector('.nav-center').querySelector('a')||0;
105 |         el&&(el.style.cssText=this.activeCss);
106 |       }
107 |       window.addEventListener('scroll', this.onScroll);
108 |     },
109 |     updated() {
110 |       this.initScrollactiveItems();
111 |     },
112 |     beforeDestroy() {
113 |       window.removeEventListener('scroll', this.onScroll);
114 |       window.cancelAnimationFrame(this.scrollAnimationFrame);
115 |     },
116 |     methods: {
117 |       onScroll(event) {
118 |         this.currentItem = this.getItemInsideWindow();
119 |         if (this.currentItem !== this.lastActiveItem) {
120 |           this.removeActiveClass();
121 |           this.$emit('itemchanged', event, this.currentItem, this.lastActiveItem);
122 |           this.lastActiveItem = this.currentItem;
123 |         }
124 |         if (this.currentItem) {
125 |           this.currentItem.classList.add(this.activeClass);
126 |           this.currentItem.style.cssText=this.activeCss;
127 |         }
128 | 
129 |       },
130 | 
131 |       getItemInsideWindow() {
132 |         let currentItem;
133 |         [].forEach.call(this.items, (item) => {
134 |           const target =item.hash&&document.querySelector(item.hash)||1;
135 |           if (!target) return;
136 |           const isScreenPastSection = window.pageYOffset >= this.getOffsetTop(target) - this.offset;
137 |           const isScreenBeforeSectionEnd = window.pageYOffset <
138 |             (this.getOffsetTop(target) - this.offset) + target.offsetHeight;
139 |           if (this.exact && isScreenPastSection && isScreenBeforeSectionEnd) currentItem = item;
140 |           if (!this.exact && isScreenPastSection) currentItem = item;
141 |         });
142 |         return currentItem;
143 |       },
144 | 
145 |       initScrollactiveItems() {
146 |         this.items = this.$el.querySelectorAll('.scrollactive-item');
147 |         if (this.clickToScroll) {
148 |           [].forEach.call(this.items, (item) => {
149 |             item.addEventListener('click', this.handleClick);
150 |           });
151 |           return;
152 |         }
153 |         [].forEach.call(this.items, (item) => {
154 |           item.removeEventListener('click', this.handleClick);
155 |         });
156 |       },
157 | 
158 |       setScrollactiveItems() {
159 |         this.initScrollactiveItems();
160 |       },
161 | 
162 |       handleClick(event) {
163 |         event.preventDefault();
164 |         const { hash } = event.currentTarget;
165 |         const target = hash&&document.querySelector(hash)||1;
166 |         if (!target) {
167 |           console.warn(`[vue-scrollactive] Element '${hash}' was not found. Make sure it is set in the DOM.`);
168 |           return;
169 |         }
170 | 
171 |         if (!this.alwaysTrack) {
172 |           window.removeEventListener('scroll', this.onScroll);
173 |           window.cancelAnimationFrame(this.scrollAnimationFrame);
174 |           this.removeActiveClass();
175 |           event.currentTarget.classList.add(this.activeClass);
176 |           console.log(this.activeCss)
177 |           event.currentTarget.style.cssText=this.activeCss;
178 |         }
179 |         this.scrollTo(target).then(() => {
180 |           if (this.modifyUrl) {
181 |             // Update the location hash after we've finished animating
182 |             if (window.history.pushState) {
183 |               window.history.pushState(null, null, hash);
184 |             } else {
185 |               window.location.hash = hash;
186 |             }
187 |           }
188 |         });
189 |       },
190 | 
191 |       scrollTo(target) {
192 |         return new Promise((resolve) => {
193 |           const targetDistanceFromTop = this.getOffsetTop(target);
194 |           const startingY = window.pageYOffset;
195 |           const difference = targetDistanceFromTop - startingY;
196 |           const easing = this.bezierEasing(...this.cubicBezierArray);
197 |           let start = null;
198 |           const step = (timestamp) => {
199 |             if (!start) start = timestamp;
200 |             let progress = timestamp - start;
201 |             let progressPercentage = progress / this.duration;
202 |             if (progress >= this.duration) progress = this.duration;
203 |             if (progressPercentage >= 1) progressPercentage = 1;
204 |             const perTick = startingY + (easing(progressPercentage) * (difference - this.offset));
205 |             window.scrollTo(0, perTick);
206 |             if (progress < this.duration) {
207 |               this.scrollAnimationFrame = window.requestAnimationFrame(step);
208 |             } else {
209 |               window.addEventListener('scroll', this.onScroll);
210 |               resolve();
211 |             }
212 |           };
213 |           window.requestAnimationFrame(step);
214 |         });
215 |       },
216 | 
217 |       getOffsetTop(element) {
218 |         let yPosition = 0;
219 |         let nextElement = element;
220 |         while (nextElement) {
221 |           yPosition += (nextElement.offsetTop);
222 |           nextElement = nextElement.offsetParent;
223 |         }
224 |         return yPosition;
225 |       },
226 | 
227 |       removeActiveClass() {
228 |         [].forEach.call(this.items, (item) => {
229 |           item.classList.remove(this.activeClass);
230 |           item.style.cssText='width:'+this.activeObj.otherWidth
231 |         });
232 |       },
233 |     },
234 |   };
235 | </script>
236 | <style lang="less">
237 | .scrollactive-nav{
238 |   width:100%;overflow:hidden;box-sizing: border-box;
239 | }
240 | 
241 | </style>
242 | 


--------------------------------------------------------------------------------
/src/assets/iconFont/demo_fontclass.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <link rel="stylesheet" href="iconfont.css">
  9 | </head>
 10 | <body>
 11 |     <div class="main markdown">
 12 |         <h1>IconFont 图标</h1>
 13 |         <ul class="icon_lists clear">
 14 |             
 15 |                 <li>
 16 |                 <i class="icon iconfont icon-gouwuche"></i>
 17 |                     <div class="name">购物车</div>
 18 |                     <div class="fontclass">.icon-gouwuche</div>
 19 |                 </li>
 20 |             
 21 |                 <li>
 22 |                 <i class="icon iconfont icon-duigou"></i>
 23 |                     <div class="name">对勾</div>
 24 |                     <div class="fontclass">.icon-duigou</div>
 25 |                 </li>
 26 |             
 27 |                 <li>
 28 |                 <i class="icon iconfont icon-shezhi"></i>
 29 |                     <div class="name">设置</div>
 30 |                     <div class="fontclass">.icon-shezhi</div>
 31 |                 </li>
 32 |             
 33 |                 <li>
 34 |                 <i class="icon iconfont icon-tanhao"></i>
 35 |                     <div class="name">叹号</div>
 36 |                     <div class="fontclass">.icon-tanhao</div>
 37 |                 </li>
 38 |             
 39 |                 <li>
 40 |                 <i class="icon iconfont icon-search"></i>
 41 |                     <div class="name">search</div>
 42 |                     <div class="fontclass">.icon-search</div>
 43 |                 </li>
 44 |             
 45 |                 <li>
 46 |                 <i class="icon iconfont icon-wenhao"></i>
 47 |                     <div class="name">问号</div>
 48 |                     <div class="fontclass">.icon-wenhao</div>
 49 |                 </li>
 50 |             
 51 |                 <li>
 52 |                 <i class="icon iconfont icon-dingbugudingdaohang"></i>
 53 |                     <div class="name">顶部固定导航</div>
 54 |                     <div class="fontclass">.icon-dingbugudingdaohang</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont icon-bujurongqi"></i>
 59 |                     <div class="name">布局容器</div>
 60 |                     <div class="fontclass">.icon-bujurongqi</div>
 61 |                 </li>
 62 |             
 63 |                 <li>
 64 |                 <i class="icon iconfont icon-baocun"></i>
 65 |                     <div class="name">保存</div>
 66 |                     <div class="fontclass">.icon-baocun</div>
 67 |                 </li>
 68 |             
 69 |                 <li>
 70 |                 <i class="icon iconfont icon-daohang"></i>
 71 |                     <div class="name">导航</div>
 72 |                     <div class="fontclass">.icon-daohang</div>
 73 |                 </li>
 74 |             
 75 |                 <li>
 76 |                 <i class="icon iconfont icon-buyulan"></i>
 77 |                     <div class="name">不预览</div>
 78 |                     <div class="fontclass">.icon-buyulan</div>
 79 |                 </li>
 80 |             
 81 |                 <li>
 82 |                 <i class="icon iconfont icon-fuzhi"></i>
 83 |                     <div class="name">复制</div>
 84 |                     <div class="fontclass">.icon-fuzhi</div>
 85 |                 </li>
 86 |             
 87 |                 <li>
 88 |                 <i class="icon iconfont icon-huodong"></i>
 89 |                     <div class="name">活动</div>
 90 |                     <div class="fontclass">.icon-huodong</div>
 91 |                 </li>
 92 |             
 93 |                 <li>
 94 |                 <i class="icon iconfont icon-putongshangpin"></i>
 95 |                     <div class="name">普通商品</div>
 96 |                     <div class="fontclass">.icon-putongshangpin</div>
 97 |                 </li>
 98 |             
 99 |                 <li>
100 |                 <i class="icon iconfont icon-qidongdongxiao"></i>
101 |                     <div class="name">启动动效</div>
102 |                     <div class="fontclass">.icon-qidongdongxiao</div>
103 |                 </li>
104 |             
105 |                 <li>
106 |                 <i class="icon iconfont icon-shanchu"></i>
107 |                     <div class="name">删除</div>
108 |                     <div class="fontclass">.icon-shanchu</div>
109 |                 </li>
110 |             
111 |                 <li>
112 |                 <i class="icon iconfont icon-qita"></i>
113 |                     <div class="name">其他</div>
114 |                     <div class="fontclass">.icon-qita</div>
115 |                 </li>
116 |             
117 |                 <li>
118 |                 <i class="icon iconfont icon-jiben"></i>
119 |                     <div class="name">基本</div>
120 |                     <div class="fontclass">.icon-jiben</div>
121 |                 </li>
122 |             
123 |                 <li>
124 |                 <i class="icon iconfont icon-shangpin"></i>
125 |                     <div class="name">商品</div>
126 |                     <div class="fontclass">.icon-shangpin</div>
127 |                 </li>
128 |             
129 |                 <li>
130 |                 <i class="icon iconfont icon-shangyi"></i>
131 |                     <div class="name">上移</div>
132 |                     <div class="fontclass">.icon-shangyi</div>
133 |                 </li>
134 |             
135 |                 <li>
136 |                 <i class="icon iconfont icon-tongyonglei"></i>
137 |                     <div class="name">通用类</div>
138 |                     <div class="fontclass">.icon-tongyonglei</div>
139 |                 </li>
140 |             
141 |                 <li>
142 |                 <i class="icon iconfont icon-toupiaolei"></i>
143 |                     <div class="name">投票类</div>
144 |                     <div class="fontclass">.icon-toupiaolei</div>
145 |                 </li>
146 |             
147 |                 <li>
148 |                 <i class="icon iconfont icon-loucengrongqi"></i>
149 |                     <div class="name">楼层容器</div>
150 |                     <div class="fontclass">.icon-loucengrongqi</div>
151 |                 </li>
152 |             
153 |                 <li>
154 |                 <i class="icon iconfont icon-xiayi"></i>
155 |                     <div class="name">下移 </div>
156 |                     <div class="fontclass">.icon-xiayi</div>
157 |                 </li>
158 |             
159 |                 <li>
160 |                 <i class="icon iconfont icon-tuwen"></i>
161 |                     <div class="name">图文</div>
162 |                     <div class="fontclass">.icon-tuwen</div>
163 |                 </li>
164 |             
165 |                 <li>
166 |                 <i class="icon iconfont icon-zhankai"></i>
167 |                     <div class="name">展开</div>
168 |                     <div class="fontclass">.icon-zhankai</div>
169 |                 </li>
170 |             
171 |                 <li>
172 |                 <i class="icon iconfont icon-yemianlouceng"></i>
173 |                     <div class="name">页面楼层</div>
174 |                     <div class="fontclass">.icon-yemianlouceng</div>
175 |                 </li>
176 |             
177 |                 <li>
178 |                 <i class="icon iconfont icon-yulan"></i>
179 |                     <div class="name">预览</div>
180 |                     <div class="fontclass">.icon-yulan</div>
181 |                 </li>
182 |             
183 |                 <li>
184 |                 <i class="icon iconfont icon-tosatcuowu"></i>
185 |                     <div class="name">tosat错误</div>
186 |                     <div class="fontclass">.icon-tosatcuowu</div>
187 |                 </li>
188 |             
189 |                 <li>
190 |                 <i class="icon iconfont icon-daojishi"></i>
191 |                     <div class="name">倒计时</div>
192 |                     <div class="fontclass">.icon-daojishi</div>
193 |                 </li>
194 |             
195 |                 <li>
196 |                 <i class="icon iconfont icon-loucengmaodian"></i>
197 |                     <div class="name">楼层锚点</div>
198 |                     <div class="fontclass">.icon-loucengmaodian</div>
199 |                 </li>
200 |             
201 |                 <li>
202 |                 <i class="icon iconfont icon-qidongdongxiao1"></i>
203 |                     <div class="name">启动动效</div>
204 |                     <div class="fontclass">.icon-qidongdongxiao1</div>
205 |                 </li>
206 |             
207 |                 <li>
208 |                 <i class="icon iconfont icon-tonglanguanggao"></i>
209 |                     <div class="name">通栏广告</div>
210 |                     <div class="fontclass">.icon-tonglanguanggao</div>
211 |                 </li>
212 |             
213 |                 <li>
214 |                 <i class="icon iconfont icon-tupianrequ"></i>
215 |                     <div class="name">图片热区</div>
216 |                     <div class="fontclass">.icon-tupianrequ</div>
217 |                 </li>
218 |             
219 |                 <li>
220 |                 <i class="icon iconfont icon-lunboyangshi"></i>
221 |                     <div class="name">轮播样式</div>
222 |                     <div class="fontclass">.icon-lunboyangshi</div>
223 |                 </li>
224 |             
225 |                 <li>
226 |                 <i class="icon iconfont icon-pinpailiebiao"></i>
227 |                     <div class="name">品牌列表</div>
228 |                     <div class="fontclass">.icon-pinpailiebiao</div>
229 |                 </li>
230 |             
231 |                 <li>
232 |                 <i class="icon iconfont icon-wenzilian"></i>
233 |                     <div class="name">文字链</div>
234 |                     <div class="fontclass">.icon-wenzilian</div>
235 |                 </li>
236 |             
237 |         </ul>
238 | 
239 |         <h2 id="font-class-">font-class引用</h2>
240 |         <hr>
241 | 
242 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
243 |         <p>与unicode使用方式相比，具有如下特点：</p>
244 |         <ul>
245 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
246 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
247 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
248 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
249 |         </ul>
250 |         <p>使用步骤如下：</p>
251 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
252 | 
253 | 
254 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
255 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
256 |         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
257 |         <blockquote>
258 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
259 |         </blockquote>
260 |     </div>
261 | </body>
262 | </html>
263 | 


--------------------------------------------------------------------------------
/src/assets/iconFont/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1534755961395'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1534755961395#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
 6 |   url('iconfont.ttf?t=1534755961395') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1534755961395#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-gouwuche:before { content: "\e64c"; }
19 | 
20 | .icon-duigou:before { content: "\e632"; }
21 | 
22 | .icon-shezhi:before { content: "\e64b"; }
23 | 
24 | .icon-tanhao:before { content: "\e793"; }
25 | 
26 | .icon-search:before { content: "\e6a4"; }
27 | 
28 | .icon-wenhao:before { content: "\e630"; }
29 | 
30 | .icon-dingbugudingdaohang:before { content: "\e602"; }
31 | 
32 | .icon-bujurongqi:before { content: "\e603"; }
33 | 
34 | .icon-baocun:before { content: "\e604"; }
35 | 
36 | .icon-daohang:before { content: "\e605"; }
37 | 
38 | .icon-buyulan:before { content: "\e606"; }
39 | 
40 | .icon-fuzhi:before { content: "\e607"; }
41 | 
42 | .icon-huodong:before { content: "\e608"; }
43 | 
44 | .icon-putongshangpin:before { content: "\e609"; }
45 | 
46 | .icon-qidongdongxiao:before { content: "\e60a"; }
47 | 
48 | .icon-shanchu:before { content: "\e60b"; }
49 | 
50 | .icon-qita:before { content: "\e60c"; }
51 | 
52 | .icon-jiben:before { content: "\e60d"; }
53 | 
54 | .icon-shangpin:before { content: "\e60e"; }
55 | 
56 | .icon-shangyi:before { content: "\e60f"; }
57 | 
58 | .icon-tongyonglei:before { content: "\e610"; }
59 | 
60 | .icon-toupiaolei:before { content: "\e611"; }
61 | 
62 | .icon-loucengrongqi:before { content: "\e612"; }
63 | 
64 | .icon-xiayi:before { content: "\e613"; }
65 | 
66 | .icon-tuwen:before { content: "\e614"; }
67 | 
68 | .icon-zhankai:before { content: "\e615"; }
69 | 
70 | .icon-yemianlouceng:before { content: "\e616"; }
71 | 
72 | .icon-yulan:before { content: "\e617"; }
73 | 
74 | .icon-tosatcuowu:before { content: "\e618"; }
75 | 
76 | .icon-daojishi:before { content: "\e619"; }
77 | 
78 | .icon-loucengmaodian:before { content: "\e61a"; }
79 | 
80 | .icon-qidongdongxiao1:before { content: "\e61b"; }
81 | 
82 | .icon-tonglanguanggao:before { content: "\e61c"; }
83 | 
84 | .icon-tupianrequ:before { content: "\e61d"; }
85 | 
86 | .icon-lunboyangshi:before { content: "\e61e"; }
87 | 
88 | .icon-pinpailiebiao:before { content: "\e61f"; }
89 | 
90 | .icon-wenzilian:before { content: "\e620"; }
91 | 
92 | 


--------------------------------------------------------------------------------
/assets/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="iconfont" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="iconfont"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
24 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
25 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
26 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
27 |     
28 | 
29 |     
30 |     <glyph glyph-name="lego" unicode="&#58937;" d="M956.8793-136.892395 97.345072-136.892395c-11.302417 0-20.466124 9.162684-20.466124 20.466124L76.878948 743.107957c0 11.30344 9.163707 20.466124 20.466124 20.466124l859.534228 0c11.30344 0 20.466124-9.162684 20.466124-20.466124l0-859.534228C977.345424-127.729711 968.18274-136.892395 956.8793-136.892395zM117.811196-95.960147l818.60198 0L936.413176 722.641833 117.811196 722.641833 117.811196-95.960147zM338.930269 353.907771c-68.775386 0-124.728746 55.95336-124.728746 124.728746 0 68.775386 55.95336 124.728746 124.728746 124.728746 68.775386 0 124.728746-55.95336 124.728746-124.728746C463.659015 409.86113 407.705656 353.907771 338.930269 353.907771zM338.930269 562.433014c-46.205345 0-83.796498-37.591153-83.796498-83.796498 0-46.205345 37.591153-83.796498 83.796498-83.796498 46.205345 0 83.796498 37.591153 83.796498 83.796498C422.726767 524.841861 385.135614 562.433014 338.930269 562.433014zM715.295126 353.907771c-68.775386 0-124.728746 55.95336-124.728746 124.728746 0 68.775386 55.95336 124.728746 124.728746 124.728746s124.728746-55.95336 124.728746-124.728746C840.023872 409.86113 784.070512 353.907771 715.295126 353.907771zM715.295126 562.433014c-46.205345 0-83.796498-37.591153-83.796498-83.796498 0-46.205345 37.59013-83.796498 83.796498-83.796498s83.796498 37.591153 83.796498 83.796498C799.091624 524.841861 761.500471 562.433014 715.295126 562.433014zM338.930269 18.231615c-68.775386 0-124.728746 55.95336-124.728746 124.728746s55.95336 124.728746 124.728746 124.728746c68.775386 0 124.728746-55.95336 124.728746-124.728746S407.705656 18.231615 338.930269 18.231615zM338.930269 226.756859c-46.205345 0-83.796498-37.59013-83.796498-83.796498s37.591153-83.796498 83.796498-83.796498c46.205345 0 83.796498 37.59013 83.796498 83.796498S385.135614 226.756859 338.930269 226.756859zM715.295126 18.231615c-68.775386 0-124.728746 55.95336-124.728746 124.728746s55.95336 124.728746 124.728746 124.728746 124.728746-55.95336 124.728746-124.728746S784.070512 18.231615 715.295126 18.231615zM715.295126 226.756859c-46.205345 0-83.796498-37.59013-83.796498-83.796498s37.59013-83.796498 83.796498-83.796498 83.796498 37.59013 83.796498 83.796498S761.500471 226.756859 715.295126 226.756859z"  horiz-adv-x="1024" />
31 | 
32 |     
33 |     <glyph glyph-name="legoblock" unicode="&#59463;" d="M1024 172 0 172 0 641.333333l1024 0L1024 172zM85.333333 257.333333l853.333333 0L938.666667 556 85.333333 556 85.333333 257.333333zM426.666667 556 85.333333 556 85.333333 812l341.333333 0L426.666667 556zM170.666667 641.333333l170.666667 0L341.333333 726.666667 170.666667 726.666667 170.666667 641.333333zM938.666667 556l-341.333333 0L597.333333 812l341.333333 0L938.666667 556zM682.666667 641.333333l170.666667 0L853.333333 726.666667l-170.666667 0L682.666667 641.333333zM1024-212 0-212 0 257.333333l1024 0L1024-212zM85.333333-126.666667l853.333333 0 0 298.666667L85.333333 172 85.333333-126.666667z"  horiz-adv-x="1024" />
34 | 
35 |     
36 |     <glyph glyph-name="page1" unicode="&#58899;" d="M960.317003 585.089102C960.317003 554.965256 938.568534 517.296439 912.479541 502.231969L595.172993 319.033339C549.566927 292.704904 474.443262 292.699809 428.827007 319.033339L111.520459 502.231969C85.436561 517.291344 63.682997 554.965256 63.682997 585.089102L63.682997 589.816808C63.682997 619.940654 85.431466 657.614566 111.520459 672.673942L428.827007 855.872572C474.433073 882.201006 549.556738 882.206101 595.172993 855.872572L912.479541 672.673942C938.563439 657.614566 960.317003 619.945749 960.317003 589.816808L960.317003 585.089102ZM960.317003 452.779546 960.317003 447.537294C960.317003 417.413448 938.568534 379.744631 912.479541 364.680161L595.172993 181.481531C549.566927 155.153096 474.443262 155.148002 428.827007 181.481531L111.520459 364.680161C85.436561 379.739537 63.682997 417.413448 63.682997 447.537294L63.682997 452.779546 63.682997 522.115847C73.77013 506.424751 86.868119 492.934485 101.331436 484.584581L418.637984 301.385951C470.561244 271.409846 553.448945 271.414941 605.362016 301.385951L922.668564 484.584581C937.131881 492.934485 950.22987 506.424751 960.317003 522.115847L960.317003 452.779546ZM960.317003 310.133227 960.317003 304.890975C960.317003 274.767129 938.568534 237.098312 912.479541 222.033842L595.172993 38.835212C549.566927 12.506777 474.443262 12.501683 428.827007 38.835212L111.520459 222.033842C85.436561 237.093217 63.682997 274.767129 63.682997 304.890975L63.682997 310.133227 63.682997 384.564039C73.77013 368.872944 86.868119 355.382678 101.331436 347.032773L418.637984 163.834144C470.561244 133.858039 553.448945 133.863133 605.362016 163.834144L922.668564 347.032773C937.131881 355.382678 950.22987 368.872944 960.317003 384.564039L960.317003 310.133227ZM960.317003 182.622702C960.317003 152.498856 938.568534 114.830038 912.479541 99.765568L595.172993-83.433061C549.566927-109.761496 474.443262-109.766591 428.827007-83.433061L111.520459 99.765568C85.436561 114.824944 63.682997 152.498856 63.682997 182.622702L63.682997 241.91772C73.77013 226.226625 86.868119 212.736358 101.331436 204.386454L418.637984 21.187825C470.561244-8.788281 553.448945-8.783186 605.362016 21.187825L922.668564 204.386454C937.131881 212.736358 950.22987 226.226625 960.317003 241.91772L960.317003 182.622702ZM980.67467 590.331354C980.445417 627.628272 954.911726 671.705985 922.668564 690.321329L605.362016 873.519959C553.438756 903.496064 470.551055 903.49097 418.637984 873.519959L101.331436 690.321329C69.083179 671.705985 43.554583 627.623177 43.32533 590.331354L43.304952 590.331354 43.304952 589.816808 43.304952 585.089102 43.304952 452.779546 43.304952 447.537294 43.304952 310.133227 43.304952 304.890975 43.304952 182.622702C43.304952 145.218799 68.940533 100.820132 101.331436 82.118181L418.637984-101.080449C470.561244-131.056554 553.448945-131.051459 605.362016-101.080449L922.668564 82.118181C955.064562 100.820132 980.695048 145.223893 980.695048 182.622702L980.695048 304.890975 980.695048 310.133227 980.695048 447.537294 980.695048 452.779546 980.695048 585.089102 980.695048 589.816808 980.695048 590.331354 980.67467 590.331354ZM363.666678 626.521744 363.666678 623.867504C363.666678 600.65691 325.457842 577.064228 275.047652 577.064228 224.632367 577.064228 186.423532 600.65691 186.423532 623.867504L186.423532 626.521744 186.423532 626.735714C186.423532 649.941213 224.632367 673.53899 275.047652 673.53899 325.457842 673.53899 363.666678 649.941213 363.666678 626.735714L363.666678 626.521744ZM363.666678 564.327949C363.666678 541.117355 325.457842 517.519578 275.047652 517.519578 224.632367 517.519578 186.423532 541.117355 186.423532 564.327949L186.423532 584.288245C206.317599 567.333711 238.550573 556.258243 275.047652 556.258243 311.539637 556.258243 343.777705 567.333711 363.666678 584.288245L363.666678 564.327949ZM275.047652 694.344974C214.585991 694.344974 165.571697 664.073388 165.571697 626.735714L165.571697 626.521744 165.571697 623.867504 165.571697 564.327949C165.571697 526.98518 214.585991 496.718688 275.047652 496.718688 335.504219 496.718688 384.518513 526.98518 384.518513 564.327949L384.518513 623.867504 384.518513 626.521744 384.518513 626.735714C384.518513 664.073388 335.504219 694.344974 275.047652 694.344974L275.047652 694.344974ZM837.57494 626.521744 837.57494 623.867504C837.57494 600.65691 799.366104 577.064228 748.955914 577.064228 698.540629 577.064228 660.331794 600.65691 660.331794 623.867504L660.331794 626.521744 660.331794 626.735714C660.331794 649.941213 698.540629 673.53899 748.955914 673.53899 799.366104 673.53899 837.57494 649.941213 837.57494 626.735714L837.57494 626.521744ZM837.57494 564.327949C837.57494 541.117355 799.366104 517.519578 748.955914 517.519578 698.540629 517.519578 660.331794 541.117355 660.331794 564.327949L660.331794 584.288245C680.225861 567.333711 712.458834 556.258243 748.955914 556.258243 785.447899 556.258243 817.685967 567.333711 837.57494 584.288245L837.57494 564.327949ZM748.955914 694.344974C688.494253 694.344974 639.479959 664.073388 639.479959 626.735714L639.479959 626.521744 639.479959 623.867504 639.479959 564.327949C639.479959 526.98518 688.494253 496.718688 748.955914 496.718688 809.412481 496.718688 858.426775 526.98518 858.426775 564.327949L858.426775 623.867504 858.426775 626.521744 858.426775 626.735714C858.426775 664.073388 809.412481 694.344974 748.955914 694.344974L748.955914 694.344974ZM603.227416 771.18498 603.227416 768.53074C603.227416 745.320146 565.01858 721.727464 514.60839 721.727464 464.193105 721.727464 425.98427 745.320146 425.98427 768.53074L425.98427 771.18498 425.98427 772.351623C425.98427 795.562217 464.193105 819.159994 514.60839 819.159994 565.01858 819.159994 603.227416 795.562217 603.227416 772.351623L603.227416 771.18498ZM603.227416 709.943859C603.227416 686.738359 565.01858 663.140583 514.60839 663.140583 464.193105 663.140583 425.98427 686.738359 425.98427 709.943859L425.98427 728.951481C445.878337 711.996947 478.11131 700.921479 514.60839 700.921479 551.100375 700.921479 583.338443 711.996947 603.227416 728.951481L603.227416 709.943859ZM514.60839 839.960884C454.146729 839.960884 405.132434 809.689297 405.132434 772.351623L405.132434 771.18498 405.132434 768.53074 405.132434 709.943859C405.132434 672.606185 454.146729 642.334598 514.60839 642.334598 575.064957 642.334598 624.079251 672.606185 624.079251 709.943859L624.079251 768.53074 624.079251 771.18498 624.079251 772.351623C624.079251 809.689297 575.064957 839.960884 514.60839 839.960884L514.60839 839.960884ZM603.227416 469.547112 603.227416 466.892871C603.227416 443.682277 565.01858 420.089595 514.60839 420.089595 464.193105 420.089595 425.98427 443.682277 425.98427 466.892871L425.98427 469.547112 425.98427 470.713755C425.98427 493.924349 464.193105 517.522126 514.60839 517.522126 565.01858 517.522126 603.227416 493.924349 603.227416 470.713755L603.227416 469.547112ZM603.227416 408.30599C603.227416 385.095396 565.01858 361.502714 514.60839 361.502714 464.193105 361.502714 425.98427 385.095396 425.98427 408.30599L425.98427 427.313612C445.878337 410.359078 478.11131 399.283611 514.60839 399.283611 551.100375 399.283611 583.338443 410.359078 603.227416 427.313612L603.227416 408.30599ZM514.60839 538.323016C454.146729 538.323016 405.132434 508.051429 405.132434 470.713755L405.132434 469.547112 405.132434 466.892871 405.132434 408.30599C405.132434 370.968316 454.146729 340.69673 514.60839 340.69673 575.064957 340.69673 624.079251 370.968316 624.079251 408.30599L624.079251 466.892871 624.079251 469.547112 624.079251 470.713755C624.079251 508.051429 575.064957 538.323016 514.60839 538.323016L514.60839 538.323016Z"  horiz-adv-x="1024" />
37 | 
38 |     
39 |     <glyph glyph-name="Lego" unicode="&#59920;" d="M0 896M955.733333 537.6h-102.4v68.266667c0 11.810133 0 34.133333-34.133333 34.133333H648.533333c-34.133333 0-34.133333-22.3232-34.133333-34.133333v-68.266667H443.733333v68.266667c0 11.810133 0 34.133333-29.866666 34.133333h-213.333334C170.666667 640 170.666667 617.6768 170.666667 605.866667v-68.266667H72.533333C34.133333 537.6 34.133333 515.2768 34.133333 503.466667v-341.333334c0-11.810133 0-34.133333 38.4-34.133333H955.733333c34.133333 0 34.133333 22.3232 34.133334 34.133333v341.333334c0 11.810133 0 34.133333-34.133334 34.133333z m-307.2 68.266667h170.666667v-68.266667H648.533333v68.266667z m-443.733333 0h204.8v-68.266667H204.8v68.266667z"  horiz-adv-x="1024" />
40 | 
41 |     
42 |     <glyph glyph-name="Lego1" unicode="&#60563;" d="M0 896M955.733333 128H68.266667c-9.4208 0-17.066667 7.68-17.066667 17.066667V520.533333A17.066667 17.066667 0 0 0 68.266667 537.6h887.466666c9.386667 0 17.066667-7.645867 17.066667-17.066667v-375.466666c0-9.386667-7.68-17.066667-17.066667-17.066667z m-870.4 34.133333h853.333334v341.333334h-853.333334v-341.333334zM409.6 503.466667H204.8a17.066667 17.066667 0 0 0-17.066667 17.066666v102.4a17.066667 17.066667 0 0 0 17.066667 17.066667h204.8a17.066667 17.066667 0 0 0 17.066667-17.066667v-102.4a17.066667 17.066667 0 0 0-17.066667-17.066666z m-187.733333 34.133333h170.666666v68.266667h-170.666666v-68.266667zM819.2 503.466667H614.4c-9.386667 0-17.066667 7.645867-17.066667 17.066666v102.4c0 9.4208 7.68 17.066667 17.066667 17.066667h204.8c9.386667 0 17.066667-7.645867 17.066667-17.066667v-102.4c0-9.4208-7.68-17.066667-17.066667-17.066666z m-187.733333 34.133333h170.666666v68.266667h-170.666666v-68.266667z"  horiz-adv-x="1024" />
43 | 
44 |     
45 | 
46 | 
47 |   </font>
48 | </defs></svg>
49 | 


--------------------------------------------------------------------------------
/src/layout/configRight.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="config_right">
  3 |     <div class="config_header">
  4 |       <i class="icon iconfont icon-zhankai icon-white" :class="configShow?'':'icon-shouqi'" @click="showCon"></i>
  5 |       <h3><span v-if="configShow&&currentConfig">{{config.name}}</span>编辑区</h3>
  6 |     </div>
  7 |     <dl class="config_dl" >
  8 |       <template v-if="configShow">
  9 |       <dd class="btn-box">
 10 |         <i class="icon iconfont icon-shanchu" @click="del"></i>
 11 |         <i class="icon iconfont icon-fuzhi" @click="copyEl"></i>
 12 |         <i class="icon iconfont icon-shangyi" @click="moveUp"></i>
 13 |         <i class="icon iconfont icon-xiayi" @click="moveDown"></i>
 14 |         <!--<i class="icon iconfont" @click="reset">重置</i>-->
 15 |         <i class="icon iconfont icon-baocun" v-if="config.name=='楼层容器'" @click="saveCon"></i>
 16 |       </dd>
 17 |       <dd v-for="(item,pIndex) in config.config">
 18 | 
 19 |         <!--色块选择器-->
 20 |         <template v-if="item.ui_type==6">
 21 |           <label for="">{{item.title}}:</label>
 22 |           <color-picker v-model="item.default_val"></color-picker>
 23 |         </template>
 24 |         <!--图片上传-->
 25 |         <template v-else-if="item.ui_type==7">
 26 |           <label for="">{{item.title}}:</label>
 27 |           <!--<span style="font-size:12px;">请进图片的宽高与组件宽高保持一致，才会正常展示哦！</span>-->
 28 |           <div class="active-new-img" v-show="item.default_val">
 29 |             <img v-if="item.default_val" :src="item.default_val" class="avatar">
 30 |             <div class="active-upload-set">
 31 |               <i class="icon iconfont icon-shanchu" @click="activUploadImgDel(item)"></i>
 32 |             </div>
 33 |           </div>
 34 |           <el-upload
 35 |             v-show="!item.default_val"
 36 |             class="avatar-uploader"
 37 |             :action="uploadLink"
 38 |             name="image"
 39 |             :with-credentials="true"
 40 |             :before-upload="beforeAvatarUpload"
 41 |             :show-file-list="false"
 42 |             :on-success="(res,file)=>{return handleAvatarSuccess(res,file,pIndex)}"
 43 |             :on-error="uploadErr">
 44 |             <img v-if="item.default_val" :src="item.default_val" class="avatar">
 45 |             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 46 |             <div class="el-upload__tip" slot="tip">
 47 |               建议上传jpg/png文件，且不超过500kb；<br>
 48 | 
 49 |             </div>
 50 |           </el-upload>
 51 |         </template>
 52 |         <!--内外边距多值-->
 53 |         <template v-else-if="item.name=='margin'|| item.name=='padding'">
 54 |           <label for="">{{item.title}}:</label>
 55 |           <ul class="input_group">
 56 |             <li v-for="(val,i) in item.default_val">{{groupText[i]}}:<input type="text" v-model="item.default_val[i]==''?0:item.default_val[i]"></li>
 57 |           </ul>
 58 |         </template>
 59 |         <!--单选框-->
 60 |         <template v-else-if="item.ui_type==3">
 61 |           <label for="">{{item.title}}:</label>
 62 |           <el-radio-group v-model="radio[pIndex]=item.default_val" class="radio_group_flex">
 63 |             <el-radio v-for="(sItem,index) in item.options" :key="index" :label="sItem.value">{{sItem.name}}</el-radio>
 64 |           </el-radio-group>
 65 |         </template>
 66 |         <!--复选框-->
 67 |         <template v-else-if="item.ui_type==4">
 68 |           <label for="">{{item.title}}:</label>
 69 |           <el-checkbox-group
 70 |             v-model="item.default_val">
 71 |             <el-checkbox v-for="(check,index) in item.options" :label="check.value" :key="index">{{check.name}}</el-checkbox>
 72 |           </el-checkbox-group>
 73 |         </template>
 74 |         <!--下拉框-->
 75 |         <template v-else-if="item.ui_type==2">
 76 |           <label for="">{{item.title}}:</label>
 77 |           <el-select v-model="select[pIndex]=item.default_val" placeholder="请选择" size="mini">
 78 |             <el-option
 79 |               v-for="(sItem,index) in item.options"
 80 |               :key="index"
 81 |               :label="sItem.name"
 82 |               :value="sItem.value">
 83 |             </el-option>
 84 |           </el-select>
 85 |         </template>
 86 |         <template v-else>
 87 |           <template v-if="item.title=='宽'">
 88 |             <label for="">{{item.title}}:</label>
 89 |             <input type="text" v-model="item.default_val">
 90 |               <p style="font-size:12px;line-height:28px;">请将图片的宽与组件宽保持一致，才会正常展示哦！</p>
 91 |           </template>
 92 |           <template v-else-if="item.title=='高'">
 93 |             <label for="">{{item.title}}:</label>
 94 |             <input type="text" v-model="item.default_val">
 95 |             <p style="font-size:12px;line-height:28px;">请将图片的高与组件高保持一致，才会正常展示哦！</p>
 96 |           </template>
 97 |           <template v-else>
 98 |             <label for="">{{item.title}}:</label>
 99 |             <input type="text" v-model="item.default_val">
100 | 
101 |           </template>
102 |         </template>
103 |       </dd>
104 |       </template>
105 |     </dl>
106 |   </div>
107 | </template>
108 | <script>
109 |   import { mapMutations, mapState } from 'vuex'
110 |   import { Select, Option,RadioGroup, Radio, CheckboxGroup, Checkbox } from 'element-ui';
111 |   import { VueColorpicker } from 'vue-pop-colorpicker'
112 |   import {link} from "~/widgets/util";
113 | 
114 |   export default {
115 |     components: {
116 |       'color-picker': VueColorpicker,
117 |       'elSelect': Select,
118 |       'elOption': Option,
119 |       'elRadioGroup': RadioGroup,
120 |       'elRadio': Radio,
121 |       'elCheckboxGroup':CheckboxGroup,
122 |       'elCheckbox':Checkbox
123 |     },
124 |     data() {
125 |           return {
126 |             uploadLink:link().domain+'/common/img/ajaxUpload',
127 |             groupText:['上','右','下','左'],
128 |             defaultList: [],
129 |             imgName: '',
130 |             visible: false,
131 |             select:[],
132 |             checked:{},
133 |             imageUrl:'',
134 |             radio:[],
135 |           }
136 |       },
137 |       computed:{
138 |         ...mapState(['currentConfig','site']),
139 |         configShow:function(){
140 |           return this.$store.state.configShow
141 |         },
142 |         config:function(){/*
143 |           if(this.currentConfig.type=='page'&&this.currentConfig.index==='0'){
144 |             return this.currentConfig
145 |           }else{*/
146 |             let index=this.currentConfig.index;
147 |             if(index>=0) {
148 |               this.dekonstruo(this.currentConfig.children[index])
149 |               return this.currentConfig.children[index]
150 |             }else{
151 |               this.dekonstruo(this.currentConfig)
152 |               return this.currentConfig
153 |             }
154 |         }
155 |           //}
156 |       },
157 | 
158 |       mounted(){
159 |         $('.config_dl').css("maxHeight",$(window).height()-70+"px");
160 |         window.onresize=function(){
161 |           $('.config_dl').css("maxHeight",$(window).height()-20+"px");
162 |         }
163 |         $(window).scroll(function(){
164 |           var scrollTop = $(window).scrollTop();
165 |           if(scrollTop+$(window).height()>$('body').height()+80){
166 |             return false
167 |           }
168 |           if(scrollTop < 80)
169 |             $("#config_right").css('top', '80px');
170 |           else
171 |             $("#config_right").css('top', scrollTop +'px');
172 |             $('.config_dl').css("maxHeight",$(window).height()-32+"px");
173 |         });
174 |       },
175 |       methods: {
176 |         ...mapMutations(['delCurrDom', 'sortWidget', 'copyWidget', 'changeShow']),
177 |         activUploadImgDel(obj){
178 |           obj.default_val="";
179 |         },
180 |         handleAvatarSuccess(res, file,i) {
181 |           console.log(res,file,i)
182 |           let index=this.currentConfig.index;
183 |           this.currentConfig.children[index].config.map((item,index)=>{
184 |             if(index==i){
185 |               item.default_val=res.data.img_url
186 |             }
187 |           })
188 |         },
189 |         dekonstruo(val){
190 |           val.config.map(item=>{
191 |             if(item.name=='margin'||item.name=='padding'){
192 |               item.default_val=typeof item.default_val=='string'?item.default_val.split(' '):item.default_val;
193 |             }/*else if(item.name=='backgroundImage'){
194 |               item.default_val=this.imageUrl;
195 |             }*/
196 |             if(item.remark === 'css'){
197 |               if(item.name=='backgroundImage'){
198 |                 val.styl[item.name]='url('+item.default_val+')'
199 |               }else{
200 |                 val.styl[item.name] = typeof item.default_val=='object'?item.default_val.join(' '):item.default_val;
201 |               }
202 |             }else{
203 |               val.other[item.name] = item.default_val
204 |             }
205 |           })
206 |         },
207 |         beforeAvatarUpload(file) {
208 |           const isJPG = (file.type).indexOf("image/")!=-1;
209 |           console.log(file.type)
210 |           const isLt2M = file.size / 1024/ 1024 < 2;
211 |           if (!isJPG) {
212 |             this.$alert('请上传图片文件!');
213 |             return isJPG
214 |           }
215 |           if (!isLt2M) {
216 |             this.$alert('上传图片大小不能超过2M!');
217 |             return isLt2M;
218 |           }
219 |         },
220 |         uploadErr(err){
221 |           this.$toast(err)
222 |         },
223 |         showCon(){
224 |           this.configShow?this.changeShow(false):this.changeShow(true);
225 |         },
226 |         del(){
227 |           this.delCurrDom({section:this.currentConfig.children, oldIndex:this.currentConfig.index})
228 |         },
229 |         /*reset(){
230 |           this.currentConfig.children[this.currentConfig.index].config=[{
231 |             type: 'text',
232 |             value: '重置测试文字',
233 |             key: 'title',
234 |             text: '重置测试'
235 |           }]
236 |         },*/
237 |         copyEl(){
238 |           let oEl=this.currentConfig.children[this.currentConfig.index]
239 |           this.copyWidget({array:this.currentConfig.children, oldIndex:this.currentConfig.index})
240 |         },
241 |         moveUp (){
242 |           let oldIndex = this.currentConfig.index
243 |           if(oldIndex>0){
244 |             this.currentConfig.index--
245 |             this.sortWidget({array:this.currentConfig.children,oldIndex,newIndex: oldIndex-1})
246 |           }else{
247 |             alert('已到顶')
248 |           }
249 | 
250 |         },
251 |         moveDown(){
252 |           let oldIndex = this.currentConfig.index
253 |           if(oldIndex<this.currentConfig.children.length-1){
254 |             this.currentConfig.index++
255 |             this.sortWidget({array:this.currentConfig.children,oldIndex,newIndex: oldIndex+1});
256 |           }else{
257 |             alert('已到低')
258 |           }
259 |         },
260 |         saveCon(){
261 |           var that=this
262 |           this.$toast('功能暂未开放')
263 |           console.log(JSON.stringify(this.site))
264 |         }
265 |       },
266 |       watch: {
267 |         'currentConfig' : {
268 |           handler: function (val, oldVal) {
269 |             //this.$forceUpdate();
270 |           },
271 |           deep: true
272 |         },
273 |       },
274 | 
275 |   }
276 | </script>
277 | <style lang="less" >
278 |   #config_right{
279 |     position:absolute;top:70px;right:0;background-color:#fff;max-height:100%;
280 |   }
281 |   input{line-height:26px;border-radius:5px;border:1px solid #ccc;padding:0 6px;}
282 |   .el-select{max-width:100px;}
283 |   .radio_group_flex{display:flex}
284 |   .config_header {
285 |     background-color:#5E9EF3;padding:4px 10px;display:flex;color:#fff;
286 |     &>i {margin-right:12px;}
287 |   }
288 |   .uploader-example {
289 |     width: 100px;height:100px;
290 |     margin: 0;
291 |     box-shadow: 0 0 10px rgba(0, 0, 0, .4);
292 |   }
293 |   .uploader-example .uploader-btn {
294 |     margin-right: 4px;width:80px;height:80px;
295 |   }
296 |   .config_dl{
297 |     color:#fff;overflow-y:auto;max-height:500px;
298 | 
299 |     &>dd{
300 |       color:#333333;font-size:14px;padding:0 5px;margin-bottom:12px;min-width:300px;padding:4px 10px;
301 |       label{
302 |         display:block;padding:6px 0;
303 |         font-weight:bold;
304 |       }
305 |       .label_flex{
306 |         display:flex;justify-content:space-between;
307 |       }
308 |     }
309 | 
310 |     &>.btn-box{
311 |       display:flex;justify-content: flex-start;
312 |       &>i{
313 |         padding:6px 8px;color:#999;
314 | 
315 |       }
316 |       &>i:hover{color:#5E9EF3}
317 |     }
318 |   }
319 |   .active-new-img {
320 |     position: relative;
321 |     width: 120px;
322 |     height: 60px;
323 |     overflow: hidden;
324 |     border: 1px dashed #d3d3d3;
325 |     img{width:100%;}
326 |     .active-upload-set{display:none;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;width:120px;height:60px;text-align:center;}
327 |     .active-upload-set i{cursor:pointer;color:#fff;line-height:60px;}
328 |     &:hover .active-upload-set{display:block;}
329 |   }
330 |   .input_group {
331 |     display: grid;
332 |     grid-template-columns: repeat(2, 1fr);
333 |     grid-template-rows:40px;
334 |     & input{width:50px;margin-left:10px}
335 |   }
336 |   .el-upload{
337 |     width:120px;height:60px;line-height:60px;border: 1px dashed;
338 |     &>img{
339 |       width:120px;height:60px;
340 |     }
341 |   }
342 | </style>
343 | 
344 | 


--------------------------------------------------------------------------------
/assets/iconfont.js:
--------------------------------------------------------------------------------
1 | (function(window){var svgSprite='<svg><symbol id="icon-lego" viewBox="0 0 1024 1024"><path d="M956.8793 948.892395 97.345072 948.892395c-11.302417 0-20.466124-9.162684-20.466124-20.466124L76.878948 68.892043c0-11.30344 9.163707-20.466124 20.466124-20.466124l859.534228 0c11.30344 0 20.466124 9.162684 20.466124 20.466124l0 859.534228C977.345424 939.729711 968.18274 948.892395 956.8793 948.892395zM117.811196 907.960147l818.60198 0L936.413176 89.358167 117.811196 89.358167 117.811196 907.960147z"  ></path><path d="M338.930269 458.092229c-68.775386 0-124.728746-55.95336-124.728746-124.728746 0-68.775386 55.95336-124.728746 124.728746-124.728746 68.775386 0 124.728746 55.95336 124.728746 124.728746C463.659015 402.13887 407.705656 458.092229 338.930269 458.092229zM338.930269 249.566986c-46.205345 0-83.796498 37.591153-83.796498 83.796498 0 46.205345 37.591153 83.796498 83.796498 83.796498 46.205345 0 83.796498-37.591153 83.796498-83.796498C422.726767 287.158139 385.135614 249.566986 338.930269 249.566986z"  ></path><path d="M715.295126 458.092229c-68.775386 0-124.728746-55.95336-124.728746-124.728746 0-68.775386 55.95336-124.728746 124.728746-124.728746s124.728746 55.95336 124.728746 124.728746C840.023872 402.13887 784.070512 458.092229 715.295126 458.092229zM715.295126 249.566986c-46.205345 0-83.796498 37.591153-83.796498 83.796498 0 46.205345 37.59013 83.796498 83.796498 83.796498s83.796498-37.591153 83.796498-83.796498C799.091624 287.158139 761.500471 249.566986 715.295126 249.566986z"  ></path><path d="M338.930269 793.768385c-68.775386 0-124.728746-55.95336-124.728746-124.728746s55.95336-124.728746 124.728746-124.728746c68.775386 0 124.728746 55.95336 124.728746 124.728746S407.705656 793.768385 338.930269 793.768385zM338.930269 585.243141c-46.205345 0-83.796498 37.59013-83.796498 83.796498s37.591153 83.796498 83.796498 83.796498c46.205345 0 83.796498-37.59013 83.796498-83.796498S385.135614 585.243141 338.930269 585.243141z"  ></path><path d="M715.295126 793.768385c-68.775386 0-124.728746-55.95336-124.728746-124.728746s55.95336-124.728746 124.728746-124.728746 124.728746 55.95336 124.728746 124.728746S784.070512 793.768385 715.295126 793.768385zM715.295126 585.243141c-46.205345 0-83.796498 37.59013-83.796498 83.796498s37.59013 83.796498 83.796498 83.796498 83.796498-37.59013 83.796498-83.796498S761.500471 585.243141 715.295126 585.243141z"  ></path></symbol><symbol id="icon-legoblock" viewBox="0 0 1024 1024"><path d="M1024 640 0 640 0 170.666667l1024 0L1024 640zM85.333333 554.666667l853.333333 0L938.666667 256 85.333333 256 85.333333 554.666667z"  ></path><path d="M426.666667 256 85.333333 256 85.333333 0l341.333333 0L426.666667 256zM170.666667 170.666667l170.666667 0L341.333333 85.333333 170.666667 85.333333 170.666667 170.666667z"  ></path><path d="M938.666667 256l-341.333333 0L597.333333 0l341.333333 0L938.666667 256zM682.666667 170.666667l170.666667 0L853.333333 85.333333l-170.666667 0L682.666667 170.666667z"  ></path><path d="M1024 1024 0 1024 0 554.666667l1024 0L1024 1024zM85.333333 938.666667l853.333333 0 0-298.666667L85.333333 640 85.333333 938.666667z"  ></path></symbol><symbol id="icon-page1" viewBox="0 0 1024 1024"><path d="M960.317003 310.910898C960.317003 341.034744 938.568534 378.703561 912.479541 393.768031L595.172993 576.966661C549.566927 603.295096 474.443262 603.300191 428.827007 576.966661L111.520459 393.768031C85.436561 378.708656 63.682997 341.034744 63.682997 310.910898L63.682997 306.183192C63.682997 276.059346 85.431466 238.385434 111.520459 223.326058L428.827007 40.127428C474.433073 13.798994 549.556738 13.793899 595.172993 40.127428L912.479541 223.326058C938.563439 238.385434 960.317003 276.054251 960.317003 306.183192L960.317003 310.910898ZM960.317003 443.220454 960.317003 448.462706C960.317003 478.586552 938.568534 516.255369 912.479541 531.319839L595.172993 714.518469C549.566927 740.846904 474.443262 740.851998 428.827007 714.518469L111.520459 531.319839C85.436561 516.260463 63.682997 478.586552 63.682997 448.462706L63.682997 443.220454 63.682997 373.884153C73.77013 389.575249 86.868119 403.065515 101.331436 411.415419L418.637984 594.614049C470.561244 624.590154 553.448945 624.585059 605.362016 594.614049L922.668564 411.415419C937.131881 403.065515 950.22987 389.575249 960.317003 373.884153L960.317003 443.220454ZM960.317003 585.866773 960.317003 591.109025C960.317003 621.232871 938.568534 658.901688 912.479541 673.966158L595.172993 857.164788C549.566927 883.493223 474.443262 883.498317 428.827007 857.164788L111.520459 673.966158C85.436561 658.906783 63.682997 621.232871 63.682997 591.109025L63.682997 585.866773 63.682997 511.435961C73.77013 527.127056 86.868119 540.617322 101.331436 548.967227L418.637984 732.165856C470.561244 762.141961 553.448945 762.136867 605.362016 732.165856L922.668564 548.967227C937.131881 540.617322 950.22987 527.127056 960.317003 511.435961L960.317003 585.866773ZM960.317003 713.377298C960.317003 743.501144 938.568534 781.169962 912.479541 796.234432L595.172993 979.433061C549.566927 1005.761496 474.443262 1005.766591 428.827007 979.433061L111.520459 796.234432C85.436561 781.175056 63.682997 743.501144 63.682997 713.377298L63.682997 654.08228C73.77013 669.773375 86.868119 683.263642 101.331436 691.613546L418.637984 874.812175C470.561244 904.788281 553.448945 904.783186 605.362016 874.812175L922.668564 691.613546C937.131881 683.263642 950.22987 669.773375 960.317003 654.08228L960.317003 713.377298ZM980.67467 305.668646C980.445417 268.371728 954.911726 224.294015 922.668564 205.678671L605.362016 22.480041C553.438756-7.496064 470.551055-7.49097 418.637984 22.480041L101.331436 205.678671C69.083179 224.294015 43.554583 268.376823 43.32533 305.668646L43.304952 305.668646 43.304952 306.183192 43.304952 310.910898 43.304952 443.220454 43.304952 448.462706 43.304952 585.866773 43.304952 591.109025 43.304952 713.377298C43.304952 750.781201 68.940533 795.179868 101.331436 813.881819L418.637984 997.080449C470.561244 1027.056554 553.448945 1027.051459 605.362016 997.080449L922.668564 813.881819C955.064562 795.179868 980.695048 750.776107 980.695048 713.377298L980.695048 591.109025 980.695048 585.866773 980.695048 448.462706 980.695048 443.220454 980.695048 310.910898 980.695048 306.183192 980.695048 305.668646 980.67467 305.668646Z"  ></path><path d="M363.666678 269.478256 363.666678 272.132496C363.666678 295.34309 325.457842 318.935772 275.047652 318.935772 224.632367 318.935772 186.423532 295.34309 186.423532 272.132496L186.423532 269.478256 186.423532 269.264286C186.423532 246.058787 224.632367 222.46101 275.047652 222.46101 325.457842 222.46101 363.666678 246.058787 363.666678 269.264286L363.666678 269.478256ZM363.666678 331.672051C363.666678 354.882645 325.457842 378.480422 275.047652 378.480422 224.632367 378.480422 186.423532 354.882645 186.423532 331.672051L186.423532 311.711755C206.317599 328.666289 238.550573 339.741757 275.047652 339.741757 311.539637 339.741757 343.777705 328.666289 363.666678 311.711755L363.666678 331.672051ZM275.047652 201.655026C214.585991 201.655026 165.571697 231.926612 165.571697 269.264286L165.571697 269.478256 165.571697 272.132496 165.571697 331.672051C165.571697 369.01482 214.585991 399.281312 275.047652 399.281312 335.504219 399.281312 384.518513 369.01482 384.518513 331.672051L384.518513 272.132496 384.518513 269.478256 384.518513 269.264286C384.518513 231.926612 335.504219 201.655026 275.047652 201.655026L275.047652 201.655026Z"  ></path><path d="M837.57494 269.478256 837.57494 272.132496C837.57494 295.34309 799.366104 318.935772 748.955914 318.935772 698.540629 318.935772 660.331794 295.34309 660.331794 272.132496L660.331794 269.478256 660.331794 269.264286C660.331794 246.058787 698.540629 222.46101 748.955914 222.46101 799.366104 222.46101 837.57494 246.058787 837.57494 269.264286L837.57494 269.478256ZM837.57494 331.672051C837.57494 354.882645 799.366104 378.480422 748.955914 378.480422 698.540629 378.480422 660.331794 354.882645 660.331794 331.672051L660.331794 311.711755C680.225861 328.666289 712.458834 339.741757 748.955914 339.741757 785.447899 339.741757 817.685967 328.666289 837.57494 311.711755L837.57494 331.672051ZM748.955914 201.655026C688.494253 201.655026 639.479959 231.926612 639.479959 269.264286L639.479959 269.478256 639.479959 272.132496 639.479959 331.672051C639.479959 369.01482 688.494253 399.281312 748.955914 399.281312 809.412481 399.281312 858.426775 369.01482 858.426775 331.672051L858.426775 272.132496 858.426775 269.478256 858.426775 269.264286C858.426775 231.926612 809.412481 201.655026 748.955914 201.655026L748.955914 201.655026Z"  ></path><path d="M603.227416 124.81502 603.227416 127.46926C603.227416 150.679854 565.01858 174.272536 514.60839 174.272536 464.193105 174.272536 425.98427 150.679854 425.98427 127.46926L425.98427 124.81502 425.98427 123.648377C425.98427 100.437783 464.193105 76.840006 514.60839 76.840006 565.01858 76.840006 603.227416 100.437783 603.227416 123.648377L603.227416 124.81502ZM603.227416 186.056141C603.227416 209.261641 565.01858 232.859417 514.60839 232.859417 464.193105 232.859417 425.98427 209.261641 425.98427 186.056141L425.98427 167.048519C445.878337 184.003053 478.11131 195.078521 514.60839 195.078521 551.100375 195.078521 583.338443 184.003053 603.227416 167.048519L603.227416 186.056141ZM514.60839 56.039116C454.146729 56.039116 405.132434 86.310703 405.132434 123.648377L405.132434 124.81502 405.132434 127.46926 405.132434 186.056141C405.132434 223.393815 454.146729 253.665402 514.60839 253.665402 575.064957 253.665402 624.079251 223.393815 624.079251 186.056141L624.079251 127.46926 624.079251 124.81502 624.079251 123.648377C624.079251 86.310703 575.064957 56.039116 514.60839 56.039116L514.60839 56.039116Z"  ></path><path d="M603.227416 426.452888 603.227416 429.107129C603.227416 452.317723 565.01858 475.910405 514.60839 475.910405 464.193105 475.910405 425.98427 452.317723 425.98427 429.107129L425.98427 426.452888 425.98427 425.286245C425.98427 402.075651 464.193105 378.477874 514.60839 378.477874 565.01858 378.477874 603.227416 402.075651 603.227416 425.286245L603.227416 426.452888ZM603.227416 487.69401C603.227416 510.904604 565.01858 534.497286 514.60839 534.497286 464.193105 534.497286 425.98427 510.904604 425.98427 487.69401L425.98427 468.686388C445.878337 485.640922 478.11131 496.716389 514.60839 496.716389 551.100375 496.716389 583.338443 485.640922 603.227416 468.686388L603.227416 487.69401ZM514.60839 357.676984C454.146729 357.676984 405.132434 387.948571 405.132434 425.286245L405.132434 426.452888 405.132434 429.107129 405.132434 487.69401C405.132434 525.031684 454.146729 555.30327 514.60839 555.30327 575.064957 555.30327 624.079251 525.031684 624.079251 487.69401L624.079251 429.107129 624.079251 426.452888 624.079251 425.286245C624.079251 387.948571 575.064957 357.676984 514.60839 357.676984L514.60839 357.676984Z"  ></path></symbol><symbol id="icon-Lego" viewBox="0 0 1024 1024"><path d="M0 0"  ></path><path d="M955.733333 358.4h-102.4v-68.266667c0-11.810133 0-34.133333-34.133333-34.133333H648.533333c-34.133333 0-34.133333 22.3232-34.133333 34.133333v68.266667H443.733333v-68.266667c0-11.810133 0-34.133333-29.866666-34.133333h-213.333334C170.666667 256 170.666667 278.3232 170.666667 290.133333v68.266667H72.533333C34.133333 358.4 34.133333 380.7232 34.133333 392.533333v341.333334c0 11.810133 0 34.133333 38.4 34.133333H955.733333c34.133333 0 34.133333-22.3232 34.133334-34.133333v-341.333334c0-11.810133 0-34.133333-34.133334-34.133333z m-307.2-68.266667h170.666667v68.266667H648.533333v-68.266667z m-443.733333 0h204.8v68.266667H204.8v-68.266667z"  ></path></symbol><symbol id="icon-Lego1" viewBox="0 0 1024 1024"><path d="M0 0"  ></path><path d="M955.733333 768H68.266667c-9.4208 0-17.066667-7.68-17.066667-17.066667V375.466667A17.066667 17.066667 0 0 1 68.266667 358.4h887.466666c9.386667 0 17.066667 7.645867 17.066667 17.066667v375.466666c0 9.386667-7.68 17.066667-17.066667 17.066667z m-870.4-34.133333h853.333334v-341.333334h-853.333334v341.333334z"  ></path><path d="M409.6 392.533333H204.8a17.066667 17.066667 0 0 1-17.066667-17.066666v-102.4a17.066667 17.066667 0 0 1 17.066667-17.066667h204.8a17.066667 17.066667 0 0 1 17.066667 17.066667v102.4a17.066667 17.066667 0 0 1-17.066667 17.066666z m-187.733333-34.133333h170.666666v-68.266667h-170.666666v68.266667zM819.2 392.533333H614.4c-9.386667 0-17.066667-7.645867-17.066667-17.066666v-102.4c0-9.4208 7.68-17.066667 17.066667-17.066667h204.8c9.386667 0 17.066667 7.645867 17.066667 17.066667v102.4c0 9.4208-7.68 17.066667-17.066667 17.066666z m-187.733333-34.133333h170.666666v-68.266667h-170.666666v68.266667z"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)


--------------------------------------------------------------------------------
/src/common/hotDrag.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vdr" id="vdr" :class="{ draggable: draggable && !disable, resizable: resizable && !disable, active , dragging, resizing}" @mousedown.stop="elmDown" tabindex="0" :style="style">
  3 |     <!-- 如果可改变大小为真 -->
  4 |     <template v-if="resizable && !disable">
  5 |       <!-- 待优化 -->
  6 |       <div class="handle handle-br" v-if="resizable === true || resizable === 1" @mousedown.stop.prevent="handleDown('br')">
  7 |       </div>
  8 |     </template>
  9 |     <slot></slot>
 10 | 
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 |   export default {
 16 |     replace: true,
 17 |     name: 'hot-drag',
 18 |     props: {
 19 |       dragindex:{
 20 |         type:Number,
 21 |         defalut:0
 22 |       },
 23 |       draggable: { // 是否可被拖动
 24 |         type: [Boolean, Number],
 25 |         default: true
 26 |       },
 27 |       resizable: { // 是否可改变大小
 28 |         type: [Boolean, Number],
 29 |         default: true
 30 |       },
 31 |       w: { // 宽度
 32 |         type: Number,
 33 |         default: 200,
 34 |         validator: (val) => {
 35 |           return (typeof val === 'number' && val > 0)
 36 |         }
 37 |       },
 38 |       h: { // 高度
 39 |         type: Number,
 40 |         default: 200,
 41 |         validator: (val) => {
 42 |           return (typeof val === 'number' && val > 0)
 43 |         }
 44 |       },
 45 |       minw: { // 最小宽度
 46 |         type: Number,
 47 |         default: 60,
 48 |         validator: function (val) {
 49 |           return val > 0
 50 |         }
 51 |       },
 52 |       minh: { // 最小高度
 53 |         type: Number,
 54 |         default: 30,
 55 |         validator: function (val) {
 56 |           return val > 0
 57 |         }
 58 |       },
 59 |       x: { // 距父元素左上角X轴偏移量
 60 |         type: Number,
 61 |         default: 0
 62 |       },
 63 |       y: { // 距父元素左上角Y轴偏移量
 64 |         type: Number,
 65 |         default: 0
 66 |       },
 67 |       zoom: {
 68 |         type: Number,
 69 |         default: 1
 70 |       },
 71 |       grid: {
 72 |         type: Array,
 73 |         default: () => {
 74 |           return [1, 1]
 75 |         }
 76 |       },
 77 |       restrain: { // 约束组件大小
 78 |         type: Number,
 79 |         default: 0
 80 |       },
 81 |       parent: {
 82 |         type: Boolean, default: false
 83 |       },
 84 |       disable: {
 85 |         type: Boolean, default: false
 86 |       }
 87 |     },
 88 |     data () {
 89 |       return {
 90 |         top: this.y,
 91 |         left: this.x,
 92 |         width: this.w,
 93 |         height: this.h,
 94 |         resizing: false,
 95 |         dragging: false,
 96 |         active: false,
 97 |         handle: null,
 98 |         parentX: 0,
 99 |         parentW: 9999,
100 |         parentY: 0,
101 |         parentH: 9999,
102 |         mouseX: 0,
103 |         mouseY: 0,
104 |         lastMouseX: 0,
105 |         lastMouseY: 0,
106 |         mouseOffX: 0,
107 |         mouseOffY: 0,
108 |         elmX: 0,
109 |         elmY: 0,
110 |         elmW: 0,
111 |         elmH: 0,
112 |       }
113 |     },
114 |     mounted () {
115 |       // 初始化控件宽高
116 |       if (this.minw > this.w) this.width = this.minw
117 |       if (this.minh > this.h) this.height = this.minh
118 |       // 判断是否只能在父级元素中拖动
119 |       if (this.parent) this.calculationParent()
120 |       // 判断浏览器是否支持passive
121 |       try {
122 |         Object.defineProperty({}, "passive", {
123 |           get: function() {
124 |             this.passiveSupported = true;
125 |           }
126 |         });
127 |       } catch(err) {}
128 |       this.$emit('resizing', this.left, this.top, this.width, this.height)
129 |     },
130 |     methods: {
131 |       calculationParent () {
132 |         this.parentW = parseInt(this.$el.parentNode.clientWidth, 10)
133 |         this.parentH = parseInt(this.$el.parentNode.clientHeight, 10)
134 |         if (this.w > this.parentW) this.width = this.parentW
135 |         if (this.h > this.parentH) this.height = this.parentH
136 |         if ((this.x + this.width) > this.parentW) this.left = this.parentW - this.width
137 |         if ((this.y + this.height) > this.parentH) this.top = this.parentH - this.height
138 |       },
139 |       elmDown (e) { // 组件被按下事件
140 |         // 阻止默认事件
141 |         e.preventDefault()
142 |         const passiveSupported = this.passiveSupported
143 |         // 判断是否支持拖动
144 |         if (this.disable || !this.draggable) return
145 |         const target = e.target || e.srcElement
146 |         // 确保事件发生在组件内部
147 |         if (this.$el.contains(target)) {
148 |           if (!this.active) {
149 |             this.lastMouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
150 |             this.lastMouseY = e.pageY || e.clientY + document.documentElement.scrollTop
151 |             document.documentElement.addEventListener('mousemove', this.handleMove, passiveSupported ? { passive: true } :true)
152 |             document.documentElement.addEventListener('mousedown', this.deselect, passiveSupported ? { passive: true } :true)
153 |             document.documentElement.addEventListener('mouseup', this.handleUp, passiveSupported ? { passive: true } :true)
154 |             this.active = true
155 |             this.$emit('activated')
156 |           }
157 |           this.elmX = parseInt(this.left)
158 |           this.elmY = parseInt(this.top)
159 |           this.elmW = this.$el.offsetWidth || this.$el.clientWidth
160 |           this.elmH = this.$el.offsetHeight || this.$el.clientHeight
161 |           this.dragging = true
162 |         }
163 |       },
164 |       deselect (e) { // 取消选择事件
165 |         this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
166 |         this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
167 |         this.lastMouseX = this.mouseX
168 |         this.lastMouseY = this.mouseY
169 |         const target = e.target || e.srcElement
170 |         const regex = new RegExp('handle-([trmbl]{2})', '')
171 |         if (!this.$el.contains(target) && !regex.test(target.className)) {
172 |           if (this.active) {
173 |             document.documentElement.removeEventListener('mousemove', this.handleMove, true)
174 |             document.documentElement.removeEventListener('mousedown', this.deselect, true)
175 |             document.documentElement.removeEventListener('mouseup', this.handleUp, true)
176 |             this.active = false
177 |             this.$emit('deactivated')
178 |           }
179 |         }
180 |       },
181 |       handleDown (handle) { // 拖动点按下事件
182 |         // 将handle设置为当前元素
183 |         this.handle = handle
184 |         this.resizing = true
185 |       },
186 |       handleMove (e) {
187 |         // 鼠标在页面上的坐标
188 |         this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
189 |         this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
190 |         // diffX =  当前鼠标位置 - 上次鼠标位置 + ？？
191 |         let diffX = (this.mouseX - this.lastMouseX + this.mouseOffX) / this.zoom
192 |         let diffY = (this.mouseY - this.lastMouseY + this.mouseOffY) / this.zoom
193 |         this.mouseOffX = this.mouseOffY = 0
194 |         this.lastMouseX = this.mouseX
195 |         this.lastMouseY = this.mouseY
196 |         if (this.resizing) {
197 |           if (this.handle.indexOf('t') >= 0) {
198 |             if (this.elmH - diffY < this.minh) this.mouseOffY = (diffY - (diffY = this.elmH - this.minh))
199 |             else if (this.elmY + diffY < this.parentY) this.mouseOffY = (diffY - (diffY = this.parentY - this.elmY))
200 |             this.elmY += diffY
201 |             this.elmH -= diffY
202 |           }
203 |           if (this.handle.indexOf('b') >= 0) {
204 |             if (this.elmH + diffY < this.minh) this.mouseOffY = (diffY - (diffY = this.minh - this.elmH))
205 |             else if (this.elmY + this.elmH + diffY > this.parentH) this.mouseOffY = (diffY - (diffY = this.parentH - this.elmY - this.elmH))
206 |             this.elmH += diffY
207 |           }
208 |           if (this.handle.indexOf('l') >= 0) {
209 |             if (this.elmW - diffX < this.minw) this.mouseOffX = (diffX - (diffX = this.elmW - this.minw))
210 |             else if (this.elmX + diffX < this.parentX) this.mouseOffX = (diffX - (diffX = this.parentX - this.elmX))
211 |             this.elmX += diffX
212 |             this.elmW -= diffX
213 |           }
214 |           if (this.handle.indexOf('r') >= 0) {
215 |             if (this.elmW + diffX < this.minw) this.mouseOffX = (diffX - (diffX = this.minw - this.elmW))
216 |             else if (this.elmX + this.elmW + diffX > this.parentW) this.mouseOffX = (diffX - (diffX = this.parentW - this.elmX - this.elmW))
217 |             this.elmW += diffX
218 |           }
219 |           this.left = (Math.round(this.elmX / this.grid[0]) * this.grid[0])
220 |           this.top = (Math.round(this.elmY / this.grid[1]) * this.grid[1])
221 |           this.width = (Math.round(this.elmW / this.grid[0]) * this.grid[0])
222 |           this.height = (Math.round(this.elmH / this.grid[1]) * this.grid[1])
223 |           this.$emit('resizing', this.left, this.top, this.width, this.height)
224 |         } else if (this.dragging) {
225 |           if (this.parent) {
226 |             if (this.elmX + diffX < this.parentX) this.mouseOffX = (diffX * this.zoom - (diffX = this.parentX - this.elmX))
227 |             else if (this.elmX + this.elmW + diffX > this.parentW) this.mouseOffX = (diffX * this.zoom - (diffX = this.parentW - this.elmX - this.elmW))
228 |             if (this.elmY + diffY < this.parentY) this.mouseOffY = (diffY * this.zoom - (diffY = this.parentY - this.elmY))
229 |             else if (this.elmY + this.elmH + diffY > this.parentH) this.mouseOffY = (diffY * this.zoom - (diffY = this.parentH - this.elmY - this.elmH))
230 |           }
231 |           this.elmX += diffX
232 |           this.elmY += diffY
233 |           if (this.draggable === 2 || this.draggable === 1 || this.draggable === true) {
234 |             this.left = (Math.round(this.elmX / this.grid[0]) * this.grid[0])
235 |           }
236 |           if (this.draggable === 3 || this.draggable === 1 || this.draggable === true) {
237 |             this.top = (Math.round(this.elmY / this.grid[1]) * this.grid[1])
238 |           }
239 |           this.$emit('dragging', this.left, this.top,this.dragindex)
240 |         }
241 |       },
242 |       getRestrain (num) {
243 |         const restrain = this.restrain
244 |         return (num / restrain).toFixed(0) * restrain
245 |       },
246 |       handleUp (e) {
247 |         this.handle = null
248 |         // 约束
249 |         const restrain = this.restrain
250 |         if (restrain && restrain > 0) {
251 |           this.left = this.getRestrain(this.left)
252 |           this.top = this.getRestrain(this.top)
253 |           this.width = this.getRestrain(this.width)
254 |           this.height = this.getRestrain(this.height)
255 |         }
256 |         if (this.resizing) {
257 |           this.resizing = false
258 |           this.$emit('resizestop', this.left, this.top, this.width, this.height,this.dragindex)
259 |         }
260 |         if (this.dragging) {
261 |           this.dragging = false
262 |           this.$emit('dragstop',this.left,this.top,this.dragindex)
263 |         }
264 |         this.elmX = this.left
265 |         this.elmY = this.top
266 |       }
267 |     },
268 |     watch: {
269 |       x (newVal) {
270 |         if (isNaN(newVal)) {
271 |           console.error('传入x值为空!')
272 |         } else {
273 |           this.left = newVal
274 |         }
275 |       },
276 |       y (newVal) {
277 |         if (isNaN(newVal)) {
278 |           console.error('传入y值为空!')
279 |         } else {
280 |           this.top = newVal
281 |         }
282 |       },
283 |       w (newVal) {
284 |         if (isNaN(newVal)) {
285 |           console.error('传入w值为空!')
286 |         } else {
287 |           this.width = newVal
288 |         }
289 |       },
290 |       h (newVal) {
291 |         if (isNaN(newVal)) {
292 |           console.error('传入h值为空!')
293 |         } else {
294 |           this.height = newVal
295 |         }
296 |       }
297 |     },
298 |     computed: {
299 |       style () {
300 |         const w = this.width === 0? 'auto': this.width + 'px'
301 |         const h = this.height === 0? 'auto': this.height + 'px'
302 |         return {
303 |           top: this.top + 'px',
304 |           left: this.left + 'px',
305 |           width: w,
306 |           height: h
307 |         }
308 |       },
309 |     }
310 |   }
311 | </script>
312 | 
313 | <style scoped lang="less">
314 |   .vdr {
315 |     padding: 0;
316 |     position: absolute;
317 |     user-select: none;
318 |     border-color: #45DBF7;
319 |     background-color: rgba(0,0,0,.3);
320 |     z-index:999;
321 |     &:focus{outline:none;}
322 |     &:before{
323 |       content:'';border-width:6px;border-color:transparent transparent #000 transparent ;border-style: solid;
324 |       transform: rotate(135deg) translate(0px,-8px);bottom:0;right:0;position:absolute;
325 |     }
326 |   }
327 |   .draggable:hover {
328 |     cursor: move;
329 |   }
330 |   .resizable{
331 |     background-color:#999;
332 |   }
333 |   .handle {
334 |     display: none;
335 |     position: absolute;
336 |     z-index: 999;
337 |   }
338 |   svg {
339 |     fill: #45DBF7;
340 |   }
341 |   .handle-br {
342 |     bottom: 0;
343 |     right: 0;
344 |     cursor: se-resize;
345 |     width: 10px;
346 |     height: 10px;
347 |     padding: 5px;
348 | 
349 |   }
350 |   .handle-ml {
351 |     top: 0;
352 |     left: -5px;
353 |     cursor: w-resize;
354 |     position: absolute;
355 |     height: 100%;
356 |     width: 5px;
357 |   }
358 |   .handle-ml:hover {
359 |     background: linear-gradient(to right, rgba(255, 255, 255, 0), #3F51B5);
360 |   }
361 |   .handle-mr {
362 |     top: 0;
363 |     right: -5px;
364 |     cursor: w-resize;
365 |     position: absolute;
366 |     height: 100%;
367 |     width: 5px;
368 |   }
369 |   .handle-mr:hover {
370 |     background: linear-gradient(to right, #3F51B5, rgba(255, 255, 255, 0));
371 |   }
372 |   .handle-tm {
373 |     position: absolute;
374 |     width: 100%;
375 |     height: 5px;
376 |     top: -5px;
377 |     left: 0;
378 |     cursor: n-resize;
379 |   }
380 |   .handle-tm:hover {
381 |     background: linear-gradient(rgba(255, 255, 255, 0), #3F51B5);
382 |   }
383 |   .handle-bm {
384 |     position: absolute;
385 |     width: 100%;
386 |     height: 5px;
387 |     bottom: -5px;
388 |     left: 0;
389 |     cursor: s-resize;
390 |   }
391 |   .handle-bm:hover {
392 |     background: linear-gradient(#3F51B5, rgba(255, 255, 255, 0));
393 |   }
394 |   .active .handle {
395 |     display: block;
396 |   }
397 |   .active {
398 |     padding: 0;
399 |     /*border: 2px solid rgba(255, 255, 255, 0);*/
400 |     background-color: rgba(0,0,0,.2);
401 |     /*border-color: #45DBF7;*/
402 |   }
403 |   .icon {
404 |     text-align: center;
405 |     line-height: 25px;
406 |     color: white;
407 |     font-size: 22px;
408 |     overflow: hidden;
409 |   }
410 | </style>
411 | 


--------------------------------------------------------------------------------