vux初步使用-placeOrder

www/vue/src/components/placeOrder.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="place-order">
     <h3>placeOrder</h3>
+    <div v-transfer-dom>
+      <x-dialog v-model="show" class="dialog-demo">
+        <div class="img-box">
+        </div>
+        <div @click="show=false">
+          <span class="vux-close"></span>
+        </div>
+      </x-dialog>
+    </div>
     <img :src="productBox.pics[0].url" alt="">
     <!--extra-->
     <div class="extra">
@@ -20,15 +29,26 @@
 <script>
   import config from '../config/config'
   import {mapState, mapActions} from 'vuex'
+  import { XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
   export default {
     name: 'placeOrder',
     data () {
       return {
         productBox: config.productInfo,
         extraB: config.productInfo.extra,
-        isActive: -1
+        isActive: -1,
+        show: true
       }
     },
+    directives: {
+      TransferDom
+    },
+    components: {
+      XDialog,
+      XButton,
+      Group,
+      XSwitch
+    },
     beforeCreate () {},
     computed: {
       ...mapState({
@@ -90,8 +110,8 @@
   }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" scoped>
+  @import '~vux/src/styles/close';
   /*类目*/
   .extra {
     display: flex;
@@ -144,4 +164,23 @@
     display: block;
     width: 100%;
   }
+
+  .dialog-demo {
+    .weui-dialog{
+      border-radius: 8px;
+      padding-bottom: 8px;
+    }
+    .dialog-title {
+      line-height: 30px;
+      color: #666;
+    }
+    .img-box {
+      height: 350px;
+      overflow: hidden;
+    }
+    .vux-close {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
 </style>