拖动组件

PC和H5都适用

es6

javaScript

typeScript

vue

more

other

react

<template>
  <div class="demo-drag">
    <xiao-drag
      class="drag-component"
      :movesList="movesList"
      :iconTextStyle="iconTextStyle"
      :iconStyle="iconStyle"
      :itemContentStyle="itemContentStyle"
      @moveData="moveData"
    />
  </div>
</template>

<script>
export default {
  name: 'demo-drag',
  props: {},
  data() {
    return {
      iconTextStyle: {
        // fontSize: '20px',
        color: 'blue',
      },
      iconStyle: {
        width: '50%',
      },
      itemContentStyle: {
        // background: 'pink',
      },
      movesList: [
        {
          src: 'http://yaru.vip:8080/images/icon/ES6.png',
          text: 'es6',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/js.png',
          text: 'javaScript',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/git.png',
          // text: 'git',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/ts.png',
          text: 'typeScript',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/vue.png',
          text: 'vue',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/more.png',
          text: 'more',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/other.png',
          text: 'other',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/react.svg',
          text: 'react',
        },
      ],
    }
  },
  methods: {
    moveData(data) {
      console.log('拖动后的数据', data)
    },
  },
}
</script>
<style lang="less" scoped>
.demo-drag {
  position: relative;
  margin-top: 100px;
  padding: 15px;
}
.drag-component {
  // background: chartreuse;
}
</style>

Props

参数	说明	类型	默认值	可选值
movesList	图标数据	arrayObject	-	-
col	列	number	4	-
itemContentStyle	整个图标的样式	object	-	-
iconStyle	图标中图片的样式	object	-	-
iconTextStyle	图标中文字的样式	object	-	-

col 相关说明 根据col列数和父元素的宽度计算得出图标的宽度，然后让高度和宽度相等 行数根据movesList数据的数量和col列数计算得出

movesList 数据结构说明

// 图标下方的文字是否展示，取决于有没有传入text
movesList = [
        {
          src: 'http://yaru.vip:8080/images/icon/ES6.png',
          text: 'es6',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/js.png',
          text: 'javaScript',
        },
        {
          src: 'http://yaru.vip:8080/images/icon/git.png',
          // text: 'git',
        },
]

Methods

参数	说明	类型	参数
moveData	拖动后触发的函数	function	拖动后的数据通过参数接收