jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 > ui >

vue-slicksort卡片拖动

官方网址:https://jexordexan.github.io/vue-slicksort/ 下载次数:
插件描述

触屏友好、丝滑反馈动效、可混合到自定义控件中
大家都想要在手机上有良好体验的组件!
因为组件是以“混合”的方式组织,所以你可以轻易把它与你自己的任何需要拖拽排序的组件相结合,给现有的组件提升体验感


使用方法:

cnpm install vue-slicksort --save



/*在.vue中引入*/
import {ContainerMixin, ElementMixin} from 'vue-slicksort';
const SortableList = {
mixins: [ContainerMixin],
template: `
  <ul class="list">
    <slot />
  </ul>
`,
};
const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item"></li>
  `,
};
const ExampleVue = {
  name: 'Example',
  template: `
    <div class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" 
          :index="index" :key="index" :item="item"/>
      </SortableList>
    </div>
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ['拖动我 1', '拖动我 2', '拖动我 3',
       '拖动我 4', '拖动我 5', '拖动我 6', '拖动我 7', '拖动我 8'],
    };
  },
};
export default {
  scrollToTop:true,
  components: {
    ExampleVue
  },
}    
</script>



顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表