haiwei-ui 1.0.3 → 1.0.4

package/packages/components/map-coord-picking/index.vue

@@ -6,8 +6,9 @@
 
     <nm-dialog v-bind="dialog" :visible.sync="visible" @opened="onOpened">
       <template v-slot:title>
-        {{ dialog.title }} (<span class="nm-size-14 nm-text-danger">当前坐标 : {{ label_ }}</span
-        >)
+        {{ dialog.title }} (
+        <span class="nm-size-14 nm-text-danger">当前坐标 : {{ label_ }}</span>
+        )
       </template>
       <div class="nm-map-coord-picking-box" v-loading="loading">
         <nm-split v-model="split">
@@ -33,244 +34,244 @@
   </div>
 </template>
 <script>
-export default {
-  name: 'MapCoordPicking',
-  data() {
-    return {
-      split: 0.8,
-      /**是否显示 */
-      visible: false,
-      /**地图实例 */
-      map: null,
-      /**中心点 */
-      center: null,
-      /**标注对象 */
-      marker: null,
-      /**选择的的坐标点 */
-      selection: null,
-      loading: true,
-      oldValue: this.value,
-      /**显示的坐标 */
-      label: '',
-      /**是否手动输入 */
-      isManualInput: false,
-      /**打开对话框时是否需要重置标注 */
-      resetMarkerOnOpen: false
-    }
-  },
-  props: {
-    value: Object,
-    /**标题 */
-    title: {
-      type: String,
-      default: '坐标拾取'
-    },
-    /**图标 */
-    icon: {
-      type: String,
-      default: 'coordinate'
-    },
-    /**是否显示全屏按钮 */
-    fullscreen: {
-      type: Boolean,
-      default: true
-    },
-    width: {
-      type: String,
-      default: '70%'
-    },
-    height: {
-      type: String,
-      default: '80%'
-    },
-    placeholder: {
-      type: String,
-      default: '请输入或选择坐标，如：116.404,39.915'
-    },
-    /**禁用 */
-    disabled: Boolean,
-    /**允许手动输入 */
-    allowInput: Boolean,
-    /**查询延时，默认700ms */
-    delay: {
-      type: Number,
-      default: 700
-    },
-    /**保留小数位精度 */
-    precision: {
-      type: Number,
-      default: 3
-    },
-    /**查询时每页数量，默认15 */
-    searchPageCapacity: {
-      type: Number,
-      default: 15
-    },
-    /**启用滚轮放大缩小，默认启用 */
-    scrollWheelZoom: {
-      type: Boolean,
-      default: true
-    },
-    /**缩放 */
-    zoom: Number
-  },
-  computed: {
-    dialog() {
+  export default {
+    name: 'MapCoordPicking',
+    data() {
       return {
-        title: this.title,
-        icon: this.icon,
-        fullscreen: this.fullscreen,
-        noScrollbar: true,
-        width: this.width,
-        height: this.height,
-        draggable: true
+        split: 0.8,
+        /**是否显示 */
+        visible: false,
+        /**地图实例 */
+        map: null,
+        /**中心点 */
+        center: null,
+        /**标注对象 */
+        marker: null,
+        /**选择的的坐标点 */
+        selection: null,
+        loading: true,
+        oldValue: this.value,
+        /**显示的坐标 */
+        label: '',
+        /**是否手动输入 */
+        isManualInput: false,
+        /**打开对话框时是否需要重置标注 */
+        resetMarkerOnOpen: false
       }
     },
-    label_() {
-      if (this.selection) {
-        return `${this.selection.lng},${this.selection.lat}`
-      } else {
-        return ''
-      }
-    }
-  },
-  methods: {
-    /**警告提示 */
-    _warning(msg) {
-      this.$message({
-        message: msg,
-        type: 'warning'
-      })
+    props: {
+      value: Object,
+      /**标题 */
+      title: {
+        type: String,
+        default: '坐标拾取'
+      },
+      /**图标 */
+      icon: {
+        type: String,
+        default: 'coordinate'
+      },
+      /**是否显示全屏按钮 */
+      fullscreen: {
+        type: Boolean,
+        default: true
+      },
+      width: {
+        type: String,
+        default: '70%'
+      },
+      height: {
+        type: String,
+        default: '80%'
+      },
+      placeholder: {
+        type: String,
+        default: '请输入或选择坐标，如：116.404,39.915'
+      },
+      /**禁用 */
+      disabled: Boolean,
+      /**允许手动输入 */
+      allowInput: Boolean,
+      /**查询延时，默认700ms */
+      delay: {
+        type: Number,
+        default: 700
+      },
+      /**保留小数位精度 */
+      precision: {
+        type: Number,
+        default: 3
+      },
+      /**查询时每页数量，默认15 */
+      searchPageCapacity: {
+        type: Number,
+        default: 15
+      },
+      /**启用滚轮放大缩小，默认启用 */
+      scrollWheelZoom: {
+        type: Boolean,
+        default: true
+      },
+      /**缩放 */
+      zoom: Number
     },
-    /**重置 */
-    reset() {
-      if (this.map) {
-        this.setSelection(this.oldValue)
-        this.setCenter(this.oldValue)
-        this.createMarker()
-        this.$refs.search.reset()
-      }
-      this.setSelection(this.oldValue)
-      this.save()
-    },
-    show() {
-      if (!this.disabled) this.visible = !this.visible
-    },
-    save() {
-      this.setLabel()
-      this.$emit('input', this.selection ? Object.assign({}, this.selection) : null)
-      this.visible = false
-    },
-    /**重置中心坐标 */
-    setCenter(point) {
-      this.center = point ? Object.assign({}, point) : null
-    },
-    /**设置选择的坐标点 */
-    setSelection(point) {
-      if (point) {
-        this.selection = {
-          lng: parseFloat(point.lng).toFixed(this.precision),
-          lat: parseFloat(point.lat).toFixed(this.precision)
+    computed: {
+      dialog() {
+        return {
+          title: this.title,
+          icon: this.icon,
+          fullscreen: this.fullscreen,
+          noScrollbar: true,
+          width: this.width,
+          height: this.height,
+          draggable: true
+        }
+      },
+      label_() {
+        if (this.selection) {
+          return `${this.selection.lng},${this.selection.lat}`
+        } else {
+          return ''
         }
-      } else {
-        this.selection = null
-      }
-    },
-    setLabel() {
-      if (this.selection) {
-        this.label = `${this.selection.lng},${this.selection.lat}`
-      } else {
-        this.label = ''
       }
     },
-    //创建标注
-    createMarker() {
-      if (typeof BMap !== 'undefined') {
-        //先删除，再创建
-        if (this.marker) {
-          this.map.removeOverlay(this.marker)
+    methods: {
+      /**警告提示 */
+      _warning(msg) {
+        this.$message({
+          message: msg,
+          type: 'warning'
+        })
+      },
+      /**重置 */
+      reset() {
+        if (this.map) {
+          this.setSelection(this.oldValue)
+          this.setCenter(this.oldValue)
+          this.createMarker()
+          this.$refs.search.reset()
         }
+        this.setSelection(this.oldValue)
+        this.save()
+      },
+      show() {
+        if (!this.disabled) this.visible = !this.visible
+      },
+      save() {
+        this.setLabel()
+        this.$emit('input', this.selection ? Object.assign({}, this.selection) : null)
+        this.visible = false
+      },
+      /**重置中心坐标 */
+      setCenter(point) {
+        this.center = point ? Object.assign({}, point) : null
+      },
+      /**设置选择的坐标点 */
+      setSelection(point) {
+        if (point) {
+          this.selection = {
+            lng: parseFloat(point.lng).toFixed(this.precision),
+            lat: parseFloat(point.lat).toFixed(this.precision)
+          }
+        } else {
+          this.selection = null
+        }
+      },
+      setLabel() {
         if (this.selection) {
-          this.marker = new BMap.Marker(this.selection)
-          this.map.addOverlay(this.marker)
+          this.label = `${this.selection.lng},${this.selection.lat}`
+        } else {
+          this.label = ''
         }
-      }
-    },
-    onMapInit(map) {
-      this.map = map
-      //初始化搜索
-      this.$refs.search.init(map)
-      //关闭loading
-      this.loading = false
+      },
+      //创建标注
+      createMarker() {
+        if (typeof BMap !== 'undefined') {
+          //先删除，再创建
+          if (this.marker) {
+            this.map.removeOverlay(this.marker)
+          }
+          if (this.selection) {
+            this.marker = new BMap.Marker(this.selection)
+            this.map.addOverlay(this.marker)
+          }
+        }
+      },
+      onMapInit(map) {
+        this.map = map
+        //初始化搜索
+        this.$refs.search.init(map)
+        //关闭loading
+        this.loading = false
 
-      //设置标注
-      this.createMarker()
+        //设置标注
+        this.createMarker()
 
-      const _this = this
-      //注册点击事件
-      this.map.addEventListener('click', function(e) {
-        _this.setSelection(e.point)
-        _this.createMarker()
-      })
-    },
-    onSelect(point) {
-      this.setSelection(point)
-      this.setCenter(point)
-      this.createMarker()
-    },
-    onOpened() {
-      if (this.resetMarkerOnOpen && this.map) {
         const _this = this
-        setTimeout(() => {
+        //注册点击事件
+        this.map.addEventListener('click', function(e) {
+          _this.setSelection(e.point)
           _this.createMarker()
-          _this.setCenter(this.value)
-        }, 200)
-        this.resetMarkerOnOpen = false
-      }
-    },
-    onLabelChange(val) {
-      let point = null
-      this.refreshMarkerOnOpen = true
+        })
+      },
+      onSelect(point) {
+        this.setSelection(point)
+        this.setCenter(point)
+        this.createMarker()
+      },
+      onOpened() {
+        if (this.resetMarkerOnOpen && this.map) {
+          const _this = this
+          setTimeout(() => {
+            _this.createMarker()
+            _this.setCenter(this.value)
+          }, 200)
+          this.resetMarkerOnOpen = false
+        }
+      },
+      onLabelChange(val) {
+        let point = null
+        this.refreshMarkerOnOpen = true
 
-      if (val.indexOf(',') < 0 || val.endsWith(',') || val.startsWith(',')) {
-        this.label = ''
-        this._warning('坐标无效')
-        return
-      }
+        if (val.indexOf(',') < 0 || val.endsWith(',') || val.startsWith(',')) {
+          this.label = ''
+          this._warning('坐标无效')
+          return
+        }
 
-      const arr = val.split(',')
-      point = {
-        lng: arr[0],
-        lat: arr[1]
-      }
-      this.isManualInput = true
+        const arr = val.split(',')
+        point = {
+          lng: arr[0],
+          lat: arr[1]
+        }
+        this.isManualInput = true
 
-      this.$emit('input', point)
-    }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(val) {
-        this.setSelection(val)
+        this.$emit('input', point)
+      }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler(val) {
+          this.setSelection(val)
 
-        //如果是手动输入，需要重新设置中心坐标，并且再打开时需要重置标注，反之，需要设置label
-        if (this.isManualInput) {
-          this.resetMarkerOnOpen = true
-          if (!this.map) {
-            this.setCenter(val)
+          //如果是手动输入，需要重新设置中心坐标，并且再打开时需要重置标注，反之，需要设置label
+          if (this.isManualInput) {
+            this.resetMarkerOnOpen = true
+            if (!this.map) {
+              this.setCenter(val)
+            }
+          } else {
+            this.setLabel()
           }
-        } else {
-          this.setLabel()
         }
       }
-    }
-  },
-  created() {
-    //首次创建设置中心坐标
-    if (!this.center) {
-      this.setCenter(this.value)
+    },
+    created() {
+      //首次创建设置中心坐标
+      if (!this.center) {
+        this.setCenter(this.value)
+      }
     }
   }
-}
 </script>

package/packages/components/map-search/index.vue

@@ -5,7 +5,10 @@
       <el-scrollbar>
         <ul v-if="data.length > 0" class="nm-map-search-list-box">
           <li v-for="(item, i) in data" :key="i" :class="['nm-map-search-list-item', active === i ? 'active' : '']" @click="onSelect(item, i)">
-            <div class="title"><i class="el-icon-location-information" /> {{ item.title }}</div>
+            <div class="title">
+              <i class="el-icon-location-information" />
+              {{ item.title }}
+            </div>
             <div class="address">{{ item.address }}</div>
             <div class="point">{{ item.point.lng.toFixed(precision) }},{{ item.point.lat.toFixed(precision) }}</div>
           </li>
@@ -16,83 +19,83 @@
   </section>
 </template>
 <script>
-export default {
-  name: 'MapSearch',
-  data() {
-    return {
-      /**关键字 */
-      keyword: '',
-      /**搜索实例 */
-      local: null,
-      /**定时器 */
-      timer: null,
-      /**数据 */
-      data: [],
-      /**显示加载动画 */
-      loading: false,
-      /**已选择的 */
-      active: ''
-    }
-  },
-  props: {
-    /**查询延时，默认800ms */
-    delay: {
-      type: Number,
-      default: 700
-    },
-    /**保留小数位精度 */
-    precision: {
-      type: Number,
-      default: 4
+  export default {
+    name: 'MapSearch',
+    data() {
+      return {
+        /**关键字 */
+        keyword: '',
+        /**搜索实例 */
+        local: null,
+        /**定时器 */
+        timer: null,
+        /**数据 */
+        data: [],
+        /**显示加载动画 */
+        loading: false,
+        /**已选择的 */
+        active: ''
+      }
     },
-    /**查询时每页数量，默认15 */
-    searchPageCapacity: {
-      type: Number,
-      default: 15
-    }
-  },
-  methods: {
-    init(map) {
-      this.local = new BMap.LocalSearch(map, { searchPageCapacity: this.searchPageCapacity, onSearchComplete: this.onSearchComplete })
+    props: {
+      /**查询延时，默认800ms */
+      delay: {
+        type: Number,
+        default: 700
+      },
+      /**保留小数位精度 */
+      precision: {
+        type: Number,
+        default: 4
+      },
+      /**查询时每页数量，默认15 */
+      searchPageCapacity: {
+        type: Number,
+        default: 15
+      }
     },
-    search() {
-      //删除定时器
-      clearTimeout(this.timer)
+    methods: {
+      init(map) {
+        this.local = new BMap.LocalSearch(map, { searchPageCapacity: this.searchPageCapacity, onSearchComplete: this.onSearchComplete })
+      },
+      search() {
+        //删除定时器
+        clearTimeout(this.timer)
 
-      this.timer = setTimeout(() => {
-        this.data = []
-        if (this.keyword) {
-          this.loading = true
-          this.local.search(this.keyword)
+        this.timer = setTimeout(() => {
+          this.data = []
+          if (this.keyword) {
+            this.loading = true
+            this.local.search(this.keyword)
+          }
+        }, this.delay)
+      },
+      onSearchComplete(results) {
+        this.loading = false
+        if (this.local.getStatus() == BMAP_STATUS_SUCCESS) {
+          this.data = results.Sq.map(m => {
+            return { title: m.title, address: m.address, point: m.point }
+          })
+        } else {
+          this.$message.error('查询失败~')
         }
-      }, this.delay)
-    },
-    onSearchComplete(results) {
-      this.loading = false
-      if (this.local.getStatus() == BMAP_STATUS_SUCCESS) {
-        this.data = results.Sq.map(m => {
-          return { title: m.title, address: m.address, point: m.point }
-        })
-      } else {
-        this.$message.error('查询失败~')
-      }
 
-      this.$emit('search', this.data)
-    },
-    onSelect(item, i) {
-      this.active = i
-      this.$emit('select', item.point, item)
+        this.$emit('search', this.data)
+      },
+      onSelect(item, i) {
+        this.active = i
+        this.$emit('select', item.point, item)
+      },
+      reset() {
+        this.active = ''
+        this.keyword = ''
+        this.data = []
+      }
     },
-    reset() {
-      this.active = ''
-      this.keyword = ''
-      this.data = []
-    }
-  },
-  watch: {
-    keyword() {
-      this.search()
+    watch: {
+      keyword() {
+        this.search()
+      }
     }
   }
-}
 </script>

package/packages/components/scrollbar/index.vue

@@ -4,17 +4,17 @@
   </el-scrollbar>
 </template>
 <script>
-export default {
-  name: 'Scrollbar',
-  props: {
-    /** 是否显示水平滚动条 */
-    horizontal: Boolean
-  },
-  methods: {
-    // 重绘滚动条
-    update() {
-      this.$refs.bar.update()
+  export default {
+    name: 'Scrollbar',
+    props: {
+      /** 是否显示水平滚动条 */
+      horizontal: Boolean
+    },
+    methods: {
+      // 重绘滚动条
+      update() {
+        this.$refs.bar.update()
+      }
     }
   }
-}
 </script>