Vue introduces element Transfer shuttle box on demand

In this article, we mainly share with you the relevant information on the on-demand introduction of the element Transfer shuttle box in vue. Friends who need it can refer to it. I hope it can help everyone.

Transfer shuttle box

Introduce Transfer on demand

Edit main.js

import {
 ...
 Transfer
} from 'element-ui';
const components = [
 ...
 Transfer
];
components.map(component => {
 Vue.component(component.name, component);
});

Install transform-vue- jsx plug-in

Edit .babelrc file

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": [["component", [
  {
   "libraryName": "element-ui",
   "styleLibraryName": "theme-default"
  }
 ]], "transform-runtime", "transform-vue-jsx"],
 "comments": false
}

Install the corresponding plug-in

npm install babel-plugin-syntax-jsx --save-dev
npm install babel-plugin-transform-vue-jsx --save-dev
npm install babel-helper-vue-jsx-merge-props --save-dev

Related recommendations;

HTML5 explanation of dataTransfer object

The above is the detailed content of Vue introduces element Transfer shuttle box on demand. For more information, please follow other related articles on the PHP Chinese website!