将TAB选择UI改为下拉选择；解决预览视图中最后一个元素存在下边距的问题；

Author: jaweii

src/components/components.vue

@@ -1,7 +1,7 @@
 <template>
  <section>
  <mu-content-block style="display:flex;">
- <mu-select-field :value="activeTab" @change="handleTabChange" autoWidth>
+ <mu-select-field :value="activeUI" @change="handleTabChange" autoWidth>
  <mu-menu-item title="Muse-UI" value="Muse-UI">
  </mu-menu-item>
  <mu-menu-item title="Mint-UI" value="Mint-UI">
@@ -15,7 +15,7 @@
  </mu-select-field>
  <mu-sub-header style="white-space:nowrap;">- 组件</mu-sub-header>
  </mu-content-block>
- <div v-if="activeTab === 'Muse-UI'">
+ <div v-if="activeUI === 'Muse-UI'">
  <ul class="components-list">
  <!-- 导航栏 -->
  <li draggable="true" @dragstart="dragStart" data-name="App Bar">
@@ -122,7 +122,7 @@
  -->
  </ul>
  </div>
- <div v-if="activeTab === 'Mint-UI'">
+ <div v-if="activeUI === 'Mint-UI'">
  <ul class="components-list">
  <li draggable="true" @dragstart="dragStart" data-name="Header">
  <mt-header fixed title="Header"></mt-header>
@@ -132,7 +132,7 @@
  </li>
  </ul>
  </div>
- <div v-if="activeTab === 'iView-UI'">
+ <div v-if="activeUI === 'iView-UI'">
  <ul class="components-list">
  <!-- 
  <li draggable="true" @dragstart="dragStart" data-name="Header">
@@ -141,7 +141,7 @@
  -->
  </ul>
  </div>
- <div v-if="activeTab === 'Element-UI'">
+ <div v-if="activeUI === 'Element-UI'">
  <ul class="components-list">
  <!-- 
  <li draggable="true" @dragstart="dragStart" data-name="Header">
@@ -150,7 +150,7 @@
  -->
  </ul>
  </div>
- <div v-if="activeTab==='Common'">
+ <div v-if="activeUI==='Common'">
  <ul class="components-list">
  <li draggable="true" @dragstart="dragStart" data-name="Text">
  <mu-icon value="text_fields" style="vertical-align:middle;" /> 文本
@@ -176,16 +176,14 @@ import museUiList from './list/muse-ui'
 export default {
  name: 'components',
  data() {
- return {
- activeTab: 'Muse-UI'
- }
+ return {}
  },
  mounted() {
 
  },
  methods: {
  handleTabChange(val) {
- this.activeTab = val
+ this.activeUI = val
  },
  getComponent(e) {
  if (!e)
@@ -203,11 +201,23 @@ export default {
  let componentName = e.target.getAttribute('data-name')
  let info = {
  name: componentName,
- ui: this.activeTab
+ ui: this.activeUI
  }
  e.dataTransfer.setData('info', JSON.stringify(info))
  }
  },
+ computed: {
+ activeUI: {
+ get() {
+ return this.$store.state.activeUI 
+ },
+ set(val) {
+ this.$store.commit('setState', {
+ activeUI: val
+ })
+ }
+ }
+ },
  components: {
  ...museUiList
  }

src/components/preview.vue

@@ -1,8 +1,8 @@
 <template>
  <section class="preview" @dragover="dragOver" @drop="drop">
  <!-- CODE视图 -->
- <mu-paper class="sound-code">
- <div class="sound-code-bar">
+ <mu-paper class="preview-head">
+ <div class="bar">
  <mu-sub-header style="display:inline;">{{showType}}</mu-sub-header>
  <mu-icon-button style="float:right;" icon="fullscreen" tooltip="全屏" @click="fullScreen" />
  <mu-icon-button style="float:right;" icon="delete" tooltip="清空" @click="empty" />
@@ -14,7 +14,7 @@
  <mu-icon-button style="float:right;" icon="code" tooltip="查看代码" @click="showCode" />
  <mu-icon-button v-if="$store.state.backupComponents.length" style="float:right;" icon="undo" tooltip="撤销" @click="undo" />
  </div>
- <mu-content-block :class="{'sound-code-content':true,'active':showType!=='预览'}">
+ <mu-content-block :class="{'content':true,'active':showType!=='预览'}">
  <pre v-show="showType==='CODE'" v-highlightjs="getSource(components)"><code class="html"></code></pre>
  <textarea v-show="showType==='编辑样式'" class="css-editor" placeholder=".vue-layout{ ... }" v-model="css"></textarea>
  </mu-content-block>
@@ -395,7 +395,7 @@ export default {
  if (placeholder)
  placeholder.parentElement.removeChild(placeholder)
  },
- selectedSlot(){
+ selectedSlot() {
  // 必需，勿删，会在ondrop中被重写
  },
  getSource(components) { //预览视图中所有组件的代码
@@ -569,15 +569,15 @@ export default {
  components = components.concat(copiedComponents)
  this.$store.commit('setState', {
  components,
- copiedComponents: []//粘贴后清除剪切板
+ copiedComponents: [] //粘贴后清除剪切板
  })
  let topComponent = this.getParentComponent(components[index])
  let topIndex = components.findIndex(c => c.info.id === topComponent.info.id)
  components[topIndex].template = getTemplate(components[topIndex].info, components[topIndex].attributes, components[topIndex].slots).template
  //因为getTemplate中需要最新的components，所以提交两次状态
  this.$store.commit('setState', {
  components,
- copiedComponents: []//粘贴后清除剪切板
+ copiedComponents: [] //粘贴后清除剪切板
  })
  this.fresh()
  })
@@ -649,10 +649,10 @@ export default {
 
 .preview-area {
  overflow: auto;
- padding-top: 48px;
  position: relative;
  height: inherit;
  z-index: 0;
+ padding-bottom: 100px;
 }
 
 .preview-tip {
@@ -663,27 +663,31 @@ export default {
  z-index: -1;
 }
 
-.sound-code {
- position: absolute;
+.preview-head {
  width: 100%;
  top: 0;
  z-index: 2;
-}
-
-.sound-code-bar {
- background-color: @grey100;
-}
-
-.sound-code-content {
- height: 0;
- overflow: auto;
- transition: all .2s;
- padding-top: 0;
- padding-bottom: 0;
- margin-top: 0;
- margin-bottom: 0;
- background-color: @grey50;
- user-select: text;
+ .bar {
+ background-color: @grey100;
+ }
+ .content {
+ height: 0;
+ overflow: auto;
+ transition: all .2s;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ background-color: @grey50;
+ user-select: text;
+ code {
+ background: none;
+ font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
+ }
+ }
+ .content.active {
+ height: 95vh;
+ }
 }
 
 .css-editor {
@@ -695,15 +699,6 @@ export default {
  overflow: auto;
 }
 
-.sound-code-content code {
- background: none;
- font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
-}
-
-.sound-code-content.active {
- height: 95vh;
-}
-
 .preview-mobile {
  position: absolute;
  width: 375px;
@@ -719,10 +714,4 @@ export default {
  width: 100%;
 }
 </style>
-<style>
-/*预览视图底部预留空间 方便操作 */
 
-.preview-area > *:nth-last-child(1) {
- margin-bottom: 100px;
-}
-</style>

src/components/preview_mobile.vue

@@ -31,6 +31,5 @@ section {
  width: 100%;
  height: 100vh;
  background-color: @grey50;
- margin-top: 48px;
 }
 </style>

src/components/template/Mint-UI/Header.js

@@ -5,6 +5,10 @@ var handle = function(_attr, _slots) {
  title: {
  type: 'text',
  value: 'title'
+ },
+ fixed:{
+ type:'boolean',
+ value:false
  }
  },
  slots = {

src/components/template/README.md

@@ -1,32 +0,0 @@
-如何拓展UI可视化组件？
-==
-
- 1. 如果是新增的UI，先在main.js中引入，然后在`./src/components/template`路径下，创建对应的UI的文件夹（如果没有）；
- 2. copy已有的类似组件。假设你要拓展mint-ui的导航栏组件，你可以直接复制muse-ui的导航栏（`./src/components/template/Muse-UI/App Bar.js`）到Mint-UI目录中，修改文件名为Header.js、以及其中的部分代码即可：
- ![此处输入图片的描述][1]
- 主要就是修改红框部分的内容，attributes和slots参照UI文档的API，template改成对应组件的标签名，当然每个UI、每个组件都不同，有的只需要稍作修改，有的则需要改很多。
-每次属性视图上触发的属性更新，都会让handle函数执行一遍，并传入新的属性、嵌套以及组件的信息，然后返回拼凑的新模板，重新挂载到预览视图。**属性可视化编辑的功能就是这么实现的。**
- 
- 3. header.js完成后，在`./src/components/template/Mint-UI/index.js`中引入，
-![此处输入图片的描述][2]
-图中的键名的写法，是因为有的键名包含空格，比如"App Bar",为了直观和便于维护，命名都是与UI官方文档相同。
- 
- 4. 再将添加的Header组件添加到组件列表视图即可。
-
-> 
- <li draggable="true" @dragstart="dragStart" data-name="Header">
- <mt-header fixed title="Header"></mt-header>
- </li>
-
-
-li标签包裹的元素，就是显示在组件列表视图的元素，其中li的data-name的值必须与上一步骤中保存的键名相同。
-
-到此，一个mint-ui导航栏组件的可视化就拓展完成了。
-
-完结，撒花。
-
- 
-
-
- [1]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/docs/images/App%20Bar1.png
- [2]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/docs/images/Header%201.png

src/store/index.js

@@ -22,6 +22,7 @@ const store = new Vuex.Store({
  components: '25'
  }],
  css: '', //用户编辑的自定义css字符串
+ activeUI:'Muse-UI',
  currentComponent: {}, //预览视图的选中组件
  components: [], //预览视图的组件树
  backupComponents: [],//删除组件时备份的