vue component library

[xgqfrms]

vue component library

https://github.com/vuejs/awesome-vue

vue ui frameworks

https://github.com/vuejs/awesome-vue#frameworks

https://github.com/ElemeFE/element https://github.com/iview/iview

https://github.com/matsp/material-components-vue

https://alibaba.github.io/ice/block?type=vue

[xgqfrms]

element-ui & vue

完整引入 & global import all

https://element.eleme.io/#/zh-CN/component/quickstart#yin-ru-element

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description 基于角色的权限控制系统
 * @augments
 * @example
 *
 */

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "normalize.css/normalize.css";
import "./styles/index.scss";
import App from "./App.vue";
import router from "./router";

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount("#app");

[xgqfrms]

table

edit

https://element.eleme.io/#/zh-CN/component/table

https://jsfiddle.net/api/post/library/pure/

---

https://stackoverflow.com/questions/50563050/vuejs-element-ui-how-to-enable-edit-one-row-el-table-column

https://jsfiddle.net/budgw/d3fxw5wq/1/

bug ???

---

基于vue和element ui的table,在table内部进行每条数据编辑保存和删除

https://github.com/Higginshuangjing/vue-element-table-edit/tree/master/src https://github.com/Higginshuangjing/vue-element-table-edit/blob/master/src/views/dashboard/Index.vue

编辑 table

modal

https://d2-projects.github.io/d2-admin/#/demo/d2-crud/demo17

form

https://alibaba.github.io/ice/block/basic-form?type=vue

[xgqfrms]

empty array

bug

let temps = new Array(3);
// (3) [empty × 3]
temps.forEach(
    (item, i) => {
        // empty & undefined bug
        console.log(`item =`, item, i);
    }
);

solution & Array.from()

OK

let temps = Array.from(new Array(3));
// (3) [undefined, undefined, undefined]
temps.forEach(
    (item, i) => {
        // undefined ok
        console.log(`item =`, item, i);
        // item = undefined 0
    }
);

    const duplicationArray = (arr = [], times = 2, debug = false) => {
        let result = [];
        // let temps = new Array(times);
        let temps = new Uint8Array(times).map((item, i) => item = i);
        // BAD
        // let temps = new Array(times).join("").split(``);// []
        // let temps = new Array(times).join(" ").split(``);// (2) [" ", " "]
        // OK
        // let temps = new Array(times).join(" ").split(` `);// (3) ["", "", ""]
        console.log(`temps =`, temps);
        temps.forEach(
            (item, i) => {
                // undefined bug
                console.log(`item =`, item);
                let temp = arr;
                result = result.concat(temp);
                console.log(`result =`, result);
            }
        );
        // for (let i = 0; i < times; i++) {
        //     let temp = arr;
        //     result = result.concat(temp);
        // }
        if (debug) {
            console.log(`result =`, result.length);
        }
        return result;
    };

[xgqfrms]

empty array bug

    const duplicationArray = (arr = [], times = 2, debug = false) => {
        let result = [];
        let temps = new Array(times);
        console.log(`temps =`, temps);
        temps.forEach(
            (item, i) => {
                // undefined bug
                console.log(`item =`, item);
                let temp = arr;
                result.concat(temp);
                console.log(`result =`, result);
            }
        );
        // for (let i = 0; i < times; i++) {
        //     let temp = arr;
        //     result.concat(temp);
        // }
        if (debug) {
            console.log(`result =`, result.length);
        }
        return result;
    };

[xgqfrms]

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=array

Uint8Array

let arr = new Uint8Array(10).map((item, i) => item = i);
// Uint8Array(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

let arr = new Uint8Array(10).map((item, i) => item = i + 1);
// Uint8Array(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

[xgqfrms]

empty array bug

    const duplicationArray = (arr = [], times = 2, debug = false) => {
        let result = [];
        let temps = new Uint8Array(times).map((item, i) => item = i + 1);
        // let temps = Array.from(new Array(times));
        temps.forEach(
            (item, i) => {
                let temp = arr;
                result = result.concat(temp);
            }
        );
        // for (let i = 0; i < times; i++) {
        //     result = result.concat(arr);
        // }
        if (!debug) {
            console.log(`result =`, result.length);
        }
        return result;
    };

[xgqfrms]

@submit.native.prevent

https://element.eleme.io/#/zh-CN/component/form

https://github.com/lz82/vue-prerender-demo/issues/1#issuecomment-421922253

[xgqfrms]

loading

https://element.eleme.io/#/zh-CN/component/loading

[xgqfrms]

select & bug

默认值没有呀？

https://element.eleme.io/#/zh-CN/component/select#select-xuan-ze-qi

shit api

<el-form-item label="角色类型" prop="role">
        <el-select v-model="formData.role" placeholder="请输入角色类型" value="Developer">
        <!-- <el-select v-model="formData.role" placeholder="请输入角色类型" value="Developer"> -->
        <!-- <el-select v-model="formData.role" placeholder="请输入角色类型" value-key="Developer"> -->
            <!-- <el-option label="开发" value="Developer" selected></el-option> -->
            <el-option label="开发" value="Developer"></el-option>
            <el-option label="配管" value="Operator"></el-option>
            <el-option label="管理员" value="Admin"></el-option>
        </el-select>
    </el-form-item>

[xgqfrms]

fetch & file-upload

https://github.com/github/fetch#file-upload

// global
import "whatwg-fetch";
// window.fetch(...)   // use native browser version

// local
import {fetch as fetchPolyfill} from "whatwg-fetch";
// fetchPolyfill(...)  // use polyfill implementation

https://github.com/taylorhakes/promise-polyfill#simple-use

//  global Promise object
import 'promise-polyfill/src/polyfill';

// local
import Promise from 'promise-polyfill';

vue-fetch

https://github.com/bangbang93/vue-fetch#polyfill

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18

axios

https://github.com/axios/axios#example

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

[xgqfrms]

talk is cheap, show me the code.

shit api

select & default value

v-modal 双向绑定

https://element.eleme.io/#/zh-CN/component/select#select-xuan-ze-qi

https://jsfiddle.net/aq92n8Le/5/

[xgqfrms]

initial state

[xgqfrms]

React & vue

https://v3.fusioncharts.com/resources/js-frontend-frameworks-comparison/

https://expertise.jetruby.com/react-vs-vue-js-which-front-end-framework-to-choose-in-2018-2a62a1fe76f9

https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962

https://github.com/gothinkster/realworld

[xgqfrms]

React

https://npm-stat.com/charts.html?package=react&package=vue&package=angular&from=2014-01-01&to=2018-09-18

initial state

https://elemefe.github.io/element-react/#/zh-CN/select

[xgqfrms]

缩放 Chrome & Scale Chrome

Ctrl + 0 / Ctrl + - / Ctrl + +

[xgqfrms]

HTTP & Headers & Content-Type

HTTP/Headers/Content-Type

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

[xgqfrms]

js & keypress & enter

https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box

https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript

https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp

    componentDidMount() {
        const title = document.querySelector(`title`).innerHTML || ``;
        if (title && title !== "登录 - 自动化发布部署平台") {
            document.querySelector(`title`).innerHTML = "登录 - 自动化发布部署平台";
        }
        let btn = document.querySelector(`.submitBtn`);// refs
        let pwd = document.querySelector(`input[type="password"]`);
        // pwd.addEventListener(`keyup`, function(e) {
        pwd.addEventListener(`keypress`, (e) => {
            event.preventDefault();
            console.log(`e = `, e);
            console.log(`e.keyCode = `, e.keyCode);
            if (e.keyCode === 13) {
                btn.click();
            }
        });
    }

[xgqfrms]

enter & save

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description EnterKeySaver
 * @augments
 * @example
 *
 */

const EnterKeySaver = (debug = false) => {
    let body = document.querySelector(`body`);
    body.addEventListener(`keypress`, function(e) {
        let enterKey = e.which || e.keyCode;
        let modal = document.querySelector(`.f10_settings_options-box-open`);
        if (modal && enterKey === 13) {
            let btn = modal.querySelector(`[data-configs="save-btn"]`);
            btn.click();
        }
    });
};

export default EnterKeySaver;

export {
    EnterKeySaver,
    EnterKeySaver as enterKeySaver
};

[xgqfrms]

JavaScript 30

https://github.com/wesbos/JavaScript30

https://github.com/wesbos/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection

https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit

---

https://github.com/akinjide/JS30days/blob/master/views/drumKit.jade

[xgqfrms]

historyReverser & bug

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description historyReverser
 * @augments Reverse 逆向 / Recursive 递归
 * @example
 * @link
 *
 */

const historyReverser = (datas = [], text = ``, debug = false) => {
    if (text === null) {
        text = `xyz`;
    }
    let result = {};
    let newDatas = [];
    let reverseDatas = [];
    let length = datas.length;
    if (length === 10) {
        if(datas.includes(text)) {
            // remove old & add new
            let index = datas.indexOf(text);
            datas.splice(index, 1);
            datas.push(text);
        } else {
            // add new
            datas.push(text);
            datas.shift(0);
        }
        if(datas.includes(text)) {
            // remove old & add new
            let index = datas.indexOf(text);
            datas.splice(index, 1);
            datas.push(text);
        } else {
            // add new
            datas.push(text);
            datas.shift(0);
        }
    } else {
        datas.push(text);
    }
    newDatas = datas;
    // datas.forEach(
    //     (item, i) => {
    //         let value = datas[length - i - 1];
    //         console.log(`null value`, value);
    //         reverseDatas.push(value);
    //     }
    // );
    if (1 <= length) {
        datas.forEach(
            (item, i) => {
                let value = datas[length - i - 1];
                console.log(`null value`, value);
                reverseDatas.push(value);
            }
        );
    } else {
        reverseDatas = datas;
    }
    result = {
        newDatas,
        reverseDatas,
    };
    return result;
};

export default historyReverser;

export {
    historyReverser,
};