haiwei-ui 1.0.2 → 1.0.4

package/packages/components/details/index.vue

@@ -1,12 +1,5 @@
 <template>
-  <section
-    ref="details"
-    :class="['nm-details', noBorder ? 'no-border' : '']"
-    v-loading="loading"
-    :element-loading-text="loadingText"
-    :element-loading-background="loadingBackground"
-    :element-loading-spinner="loadingSpinner"
-  >
+  <section ref="details" :class="['nm-details', noBorder ? 'no-border' : '']" v-loading="loading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner">
     <template v-if="model_">
       <template v-for="(group, i) in options">
         <div v-if="group.length > 0" :class="['nm-details-group', `nm-details-group-${group.length}`]" :key="i">
@@ -24,82 +17,82 @@
   </section>
 </template>
 <script>
-import { mapState } from 'vuex'
-export default {
-  name: 'Details',
-  data() {
-    return {
-      model_: {},
-      loading_: false
-    }
-  },
-  props: {
-    // 查询方法
-    action: Function,
-    // 模型数据
-    model: Object,
-    /** 配置项 */
-    options: Array,
-    /** 标签的宽度 */
-    labelWidth: {
-      type: String,
-      default: '80px'
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Details',
+    data() {
+      return {
+        model_: {},
+        loading_: false
+      }
     },
-    // 不显示loading
-    noLoading: Boolean,
-    // 不包含外边框
-    noBorder: Boolean,
-    // 是否创建时查询一次
-    queryOnCreated: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
-    loading() {
-      return !this.noLoading && this.loading_
-    }
-  },
-  methods: {
-    query() {
-      if (this.action && typeof this.action === 'function') {
-        this.loading_ = true
-        this.action()
-          .then(data => {
-            this.model_ = data
-            this.loading_ = false
-          })
-          .catch(() => {
-            this.loading_ = false
-          })
+    props: {
+      // 查询方法
+      action: Function,
+      // 模型数据
+      model: Object,
+      /** 配置项 */
+      options: Array,
+      /** 标签的宽度 */
+      labelWidth: {
+        type: String,
+        default: '80px'
+      },
+      // 不显示loading
+      noLoading: Boolean,
+      // 不包含外边框
+      noBorder: Boolean,
+      // 是否创建时查询一次
+      queryOnCreated: {
+        type: Boolean,
+        default: true
       }
     },
-    refresh() {
-      this.query()
-    }
-  },
-  mounted() {
-    if (this.queryOnCreated) {
-      this.query()
-    }
-    if (this.model) {
-      this.model_ = this.model
-    }
-    this.$nextTick(() => {
-      // 设置标签宽度
-      const items = this.$el.querySelectorAll('.nm-details-item-label')
-      for (let i = 0; i < items.length; i++) {
-        items[i].style.width = this.labelWidth
+    computed: {
+      ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+      loading() {
+        return !this.noLoading && this.loading_
       }
-    })
-  },
-  watch: {
-    model(val) {
-      if (val) {
-        this.model_ = val
+    },
+    methods: {
+      query() {
+        if (this.action && typeof this.action === 'function') {
+          this.loading_ = true
+          this.action()
+            .then(data => {
+              this.model_ = data
+              this.loading_ = false
+            })
+            .catch(() => {
+              this.loading_ = false
+            })
+        }
+      },
+      refresh() {
+        this.query()
+      }
+    },
+    mounted() {
+      if (this.queryOnCreated) {
+        this.query()
+      }
+      if (this.model) {
+        this.model_ = this.model
+      }
+      this.$nextTick(() => {
+        // 设置标签宽度
+        const items = this.$el.querySelectorAll('.nm-details-item-label')
+        for (let i = 0; i < items.length; i++) {
+          items[i].style.width = this.labelWidth
+        }
+      })
+    },
+    watch: {
+      model(val) {
+        if (val) {
+          this.model_ = val
+        }
       }
     }
   }
-}
 </script>