♻️ refactor fab_dial with ES6

src/pages/settings/components/fab_dial.js

@@ -1,52 +1,56 @@
-Vue.component('fab-dial', {
-  data: function () {
+const Mdui = require('mdui/dist/js/mdui.min.js');
+
+export default {
+  name: 'FabDial',
+  data () {
     return {
       edit: false,
       instFab: null,
-    }
+    };
   },
-  template: '\
-    <div class="fab-dial">\
-      <div class="mdui-fab-wrapper mdui-fab-fixed" id="mainFab">\
-        <button class="mdui-fab mdui-ripple mdui-color-theme-accent" @click="fabClick">\
-          <i class="mdui-icon material-icons">add</i>\
-          <i class="mdui-icon mdui-fab-opened material-icons">build</i>\
-        </button>\
-        <div class="mdui-fab-dial">\
-          <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink" @click="delClick"><i class="mdui-icon material-icons">&#xe872;</i></button>\
-          <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red" @click="allClick"><i class="mdui-icon material-icons">&#xe877;</i></button>\
-        </div>\
-      </div>\
-    </div>\
-  ',
-  mounted: function () {
-    var _this = this;
-    var fabBtn = document.getElementById('mainFab');
-
-    this.instFab = new mdui.Fab('#mainFab', {trigger: 'click'});
-    fabBtn.addEventListener('close.mdui.fab', function () {
-      if (_this.edit) {// 确保点击书签checkbox时不会自动关闭
-        _this.instFab.open();
+  mounted () {
+    const fabBtn = document.getElementById('mainFab');
+
+    this.instFab = new Mdui.Fab('#mainFab', {trigger: 'click'});
+    fabBtn.addEventListener('close.mdui.fab', () => {
+      if (this.edit) {// 确保点击书签checkbox时不会自动关闭
+        this.instFab.open();
       }
     });
   },
   methods: {
-    fabClick: function () {// 进入编辑模式
+    fabClick () {// 进入编辑模式
       this.edit = !this.edit;
       this.$emit('enterEditMode', this.edit);
     },
-    delClick: function () {
+    delClick () {
       this.$emit('delBooks');
     },
-    allClick: function () {
+    allClick () {
       this.$emit('selectAll');
     },
   },
   watch: {
-    edit: function () {// 根据状态唯一确定关闭开启状态
+    edit () {// 根据状态唯一确定关闭开启状态
       this.edit
         ? this.instFab.open()
         : this.instFab.close();
     }
+  },
+  render () {
+    return (
+      <div class='fab-dial'>
+        <div class='mdui-fab-wrapper mdui-fab-fixed' id='mainFab'>
+          <button class="mdui-fab mdui-ripple mdui-color-theme-accent" onClick={this.fabClick.bind(this)}>
+            <i class="mdui-icon material-icons">add</i>
+            <i class="mdui-icon mdui-fab-opened material-icons">build</i>
+          </button>
+          <div class="mdui-fab-dial">
+            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink" onClick={this.delClick.bind(this)}><i class="mdui-icon material-icons">&#xe872;</i></button>
+            <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red" onClick={this.allClick.bind(this)}><i class="mdui-icon material-icons">&#xe877;</i></button>
+          </div>
+        </div>
+      </div>
+    );
   }
-})
+};