{"id":3059,"date":"2018-08-17T11:10:47","date_gmt":"2018-08-17T03:10:47","guid":{"rendered":"http:\/\/www.daliane.com\/?p=3059"},"modified":"2018-08-17T11:20:26","modified_gmt":"2018-08-17T03:20:26","slug":"vue-slicksort_tuo_zhuai_zu_jian","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/vue-slicksort_tuo_zhuai_zu_jian\/","title":{"rendered":"vue-slicksort\u62d6\u62fd\u7ec4\u4ef6"},"content":{"rendered":"

\n\t\n<\/p>\n

\n\t\"Capture\"<\/a>\n<\/p>\n

\n\t\n<\/p>\n

\n\t\u5b89\u88c5\n<\/p>\n

\n
\n\t\t\u901a\u8fc7npm\u5b89\u88c5\n\t<\/div>\n<\/div>\n
\n
\n
\n
$ npm install vue-slicksort --save<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n
\n
\n\t\t\u901a\u8fc7yarn\u5b89\u88c5\n\t<\/div>\n<\/div>\n
\n
\n
\n
$ yarn add vue-slicksort<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n
\n\t\u63d2\u4ef6\u5e94\u7528\n<\/div>\n
\n
\n\t\t\u5f15\u5165\u7ec4\u4ef6\n\t<\/div>\n<\/div>\n<\/p>\n
\/\/ Using an ES6 transpiler like Babel<\/span> import<\/span> {ContainerMixin, ElementMixin} from<\/span> 'vue-slicksort'<\/span>; <\/pre>\n
\/\/ Not using an ES6 transpiler<\/span> <\/pre>\n
var<\/span> slicksort = require<\/span>('vue-slicksort'<\/span>); <\/pre>\n
var<\/span> ContainerMixin = slicksort.ContainerMixin; <\/pre>\n
var<\/span> ElementMixin = slicksort.ElementMixin;<\/pre>\n<\/p>\n
\n
\n\t\t\u4f7f\u7528\u7ec4\u4ef6\n\t<\/div>\n<\/div>\n
\n
import Vue from 'vue';\r\nimport { ContainerMixin, ElementMixin } from 'vue-slicksort';\r\n\r\nconst SortableList = {\r\n  mixins: [ContainerMixin],\r\n  template: ` <ul<\/span> class<\/span>=\"list\"<\/span>><\/span> <slot<\/span> \/><\/span> <\/ul<\/span>><\/span> `,\r\n};\r\n\r\nconst SortableItem = {\r\n  mixins: [ElementMixin],\r\n  props: ['item'],\r\n  template: ` <li<\/span> class<\/span>=\"list-item\"<\/span>><\/span>{{item}}<\/li<\/span>><\/span> `,\r\n};\r\n\r\nconst ExampleVue = {\r\n  name: 'Example',\r\n  template: ` <div<\/span> class<\/span>=\"root\"<\/span>><\/span> <SortableList<\/span> lockAxis<\/span>=\"y\"<\/span> v-model<\/span>=\"items\"<\/span>><\/span> <\/pre>\n
<SortableItem<\/span> v-for<\/span>=\"(item, index) in items\"<\/span> :index<\/span>=\"index\"<\/span> :key<\/span>=\"index\"<\/span> :item<\/span>=\"item\"<\/span>\/><\/span><\/pre>\n
 <\/SortableList<\/span>><\/span> <\/div<\/span>><\/span> `,\r\n  components: {\r\n    SortableItem,\r\n    SortableList,\r\n  },\r\n  data() {\r\n    return {\r\n      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],\r\n    };\r\n  },\r\n};\r\n\r\nconst app = new Vue({\r\n  el: '#root',\r\n  render: (h) => h(ExampleVue),\r\n});<\/pre>\n<\/p>\n<\/div>\n
\n\t\u7ec4\u4ef6\u53c2\u6570\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\t\t\t\t\u540d\u79f0\n\t\t\t<\/th>\n\n\t\t\t\t\u7c7b\u578b\n\t\t\t<\/th>\n\n\t\t\t\t\u9ed8\u8ba4\u503c\n\t\t\t<\/th>\n\n\t\t\t\t\u8bf4\u660e\n\t\t\t<\/th>\n<\/tr>\n<\/tbody>\n
\n\t\t\t\tvalue\n\t\t\t<\/td>\n\n\t\t\t\tArray\n\t\t\t<\/td>\n\n\t\t\t\t–\n\t\t\t<\/td>\n\n\t\t\t\t\u5217\u8868\u7684\u5185\u5bb9\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\taxis\n\t\t\t<\/td>\n\n\t\t\t\tString\n\t\t\t<\/td>\n\n\t\t\t\ty\n\t\t\t<\/td>\n\n\t\t\t\t\u5217\u8868\u5143\u7d20\u53ef\u4ee5\u88ab\u6a2a\u5411\u62d6\u62fd\uff0c\u7eb5\u5411\u62d6\u62fd\u8fd8\u662f\u7f51\u683c\u62d6\u62fd\u3002\u7528x,y,xy\u6765\u8868\u793a\u3002\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tlockAxis\n\t\t\t<\/td>\n\n\t\t\t\tString\n\t\t\t<\/td>\n\n\t\t\t\t–\n\t\t\t<\/td>\n\n\t\t\t\t\u7528\u4e8e\u6392\u5e8f\u65f6\u5728\u5750\u6807\u7cfb\u4e2d\u9501\u5b9a\u5143\u7d20\u7684\u79fb\u52a8\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\thelperClass\n\t\t\t<\/td>\n\n\t\t\t\tString\n\t\t\t<\/td>\n\n\t\t\t\t–\n\t\t\t<\/td>\n\n\t\t\t\thelper\u7684\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\ttransitionDuration\n\t\t\t<\/td>\n\n\t\t\t\tNumber\n\t\t\t<\/td>\n\n\t\t\t\t300\n\t\t\t<\/td>\n\n\t\t\t\t\u5143\u7d20\u79fb\u52a8\u52a8\u753b\u7684\u6301\u7eed\u65f6\u95f4\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tpressDelay\n\t\t\t<\/td>\n\n\t\t\t\tNumber\n\t\t\t<\/td>\n\n\t\t\t\t0\n\t\t\t<\/td>\n\n\t\t\t\t\u5982\u679c\u9700\u8981\u5f53\u5143\u7d20\u88ab\u6309\u4e0b\u4e00\u6bb5\u65f6\u95f4\u518d\u5141\u8bb8\u62d6\u62fd\uff0c\u53ef\u4ee5\u8bbe\u7f6e\u8fd9\u4e2a\u5c5e\u6027\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tpressThreshold\n\t\t\t<\/td>\n\n\t\t\t\tNumber\n\t\t\t<\/td>\n\n\t\t\t\t5\n\t\t\t<\/td>\n\n\t\t\t\t\u79fb\u52a8\u5141\u8bb8\u88ab\u5ffd\u7565\u7684\u9608\u503c\uff0c\u5355\u4f4d\u662f\u50cf\u7d20\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tdistance\n\t\t\t<\/td>\n\n\t\t\t\tNumber\n\t\t\t<\/td>\n\n\t\t\t\t0\n\t\t\t<\/td>\n\n\t\t\t\t\u5982\u679c\u9700\u8981\u5728\u62d6\u62fd\u51fa\u4e00\u5b9a\u8ddd\u79bb\u4e4b\u540e\u624d\u88ab\u8bc6\u522b\u4e3a\u6b63\u5728\u62d6\u62fd\u7684\u5143\u7d20\uff0c\u53ef\u4ee5\u8bbe\u7f6e\u8fd9\u4e2a\u5c5e\u6027\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tuseDragHandle\n\t\t\t<\/td>\n\n\t\t\t\tBoolean\n\t\t\t<\/td>\n\n\t\t\t\tfalse\n\t\t\t<\/td>\n\n\t\t\t\t\u5982\u679c\u4f7f\u7528HandleDirective\uff0c\u8bbe\u7f6e\u4e3atrue\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tuseWindowAsScrollContainer\n\t\t\t<\/td>\n\n\t\t\t\tBoolean\n\t\t\t<\/td>\n\n\t\t\t\tfalse\n\t\t\t<\/td>\n\n\t\t\t\t\u662f\u5426\u8bbe\u7f6ewindow\u4e3a\u53ef\u6eda\u52a8\u7684\u5bb9\u5668\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\thideSortableGhost\n\t\t\t<\/td>\n\n\t\t\t\tBoolean\n\t\t\t<\/td>\n\n\t\t\t\ttrue\n\t\t\t<\/td>\n\n\t\t\t\t\u662f\u5426\u81ea\u52a8\u9690\u85cfghost\u5143\u7d20\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tlockToContainerEdges\n\t\t\t<\/td>\n\n\t\t\t\tBoolean\n\t\t\t<\/td>\n\n\t\t\t\tfalse\n\t\t\t<\/td>\n\n\t\t\t\t\u662f\u5426\u5bf9\u6b63\u5728\u62d6\u62fd\u7684\u5143\u7d20\u9501\u5b9a\u5bb9\u5668\u8fb9\u7f18\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tlockOffset\n\t\t\t<\/td>\n\n\t\t\t\tString\n\t\t\t<\/td>\n\n\t\t\t\t50%\n\t\t\t<\/td>\n\n\t\t\t\t\u5bf9\u6b63\u5728\u62d6\u62fd\u7684\u5143\u7d20\u9501\u5b9a\u5bb9\u5668\u8fb9\u7f18\u7684\u504f\u79fb\u91cf\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tshouldCancelStart\n\t\t\t<\/td>\n\n\t\t\t\tFunction\n\t\t\t<\/td>\n\n\t\t\t\t–\n\t\t\t<\/td>\n\n\t\t\t\t\u5728\u62d6\u62fd\u5f00\u59cb\u524d\u8fd9\u4e2a\u65b9\u6cd5\u5c06\u88ab\u8c03\u7528\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tgetHelperDimensions\n\t\t\t<\/td>\n\n\t\t\t\tFunction\n\t\t\t<\/td>\n\n\t\t\t\t–\n\t\t\t<\/td>\n\n\t\t\t\t\u53ef\u9009\u65b9\u6cd5({node, index, collection}),\u7528\u4e8e\u8fd4\u56deSortableHelper\u7684\u8ba1\u7b97\u5c3a\u5bf8\n\t\t\t<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n\t\u4e8b\u4ef6\n<\/div>\n\n\n\n\n\n\n\n\n
\n\t\t\t\t\u540d\u79f0\n\t\t\t<\/th>\n\n\t\t\t\t\u53c2\u6570\n\t\t\t<\/th>\n\n\t\t\t\t\u8bf4\u660e\n\t\t\t<\/th>\n<\/tr>\n<\/tbody>\n
\n\t\t\t\tsortStart\n\t\t\t<\/td>\n\n\t\t\t\tevent, node, index, collection\n\t\t\t<\/td>\n\n\t\t\t\t\u5f53\u62d6\u62fd\u5f00\u59cb\u65f6\u89e6\u53d1\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tsortMove\n\t\t\t<\/td>\n\n\t\t\t\tevent\n\t\t\t<\/td>\n\n\t\t\t\t\u5f53\u62d6\u62fd\u65f6\u9f20\u6807\u79fb\u52a8\u65f6\u89e6\u53d1\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tsortEnd\n\t\t\t<\/td>\n\n\t\t\t\tevent, newIndex, oldIndex, collection\n\t\t\t<\/td>\n\n\t\t\t\t\u5f53\u62d6\u62fd\u7ed3\u675f\u65f6\u89e6\u53d1\n\t\t\t<\/td>\n<\/tr>\n
\n\t\t\t\tinput\n\t\t\t<\/td>\n\n\t\t\t\tnewList\n\t\t\t<\/td>\n\n\t\t\t\t\u5f53\u62d6\u62fd\u7ed3\u675f\u540e\u4ea7\u751f\u65b0\u7684\u5217\u8868\u65f6\u89e6\u53d1\n\t\t\t<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n\t\u66f4\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5b89\u88c5 \u901a\u8fc7npm\u5b89\u88c5 $ npm install vue-slicksort –save \u901a\u8fc7yarn\u5b89\u88c5 …<\/p>\n","protected":false},"author":2,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[212],"tags":[],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/3059"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=3059"}],"version-history":[{"count":2,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/3059\/revisions"}],"predecessor-version":[{"id":3062,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/3059\/revisions\/3062"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=3059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=3059"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=3059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}