当初 flash 的 mask 可以做很多事情。 css 貌似也可以。先收留，后边再研究。
分类目录
git 地址： https://github.com/hinesboy/mavonEditor
操作一波
npm install mavon-editor
然后
# main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
markdown 写技术博客的必须品。这里记录下 vue 中使用 tui-editor 的过程
代码： https://github.com/nhn/tui.editor
preview： https://ui.toast.com/tui-editor
操作一波
npm install tui-editor
安装好后，先定义一个组件，我们在组件里组织 markdown 编辑器相关的逻辑。
那么就在 src/components/ 下吧。
src/components/MarkdownEditor/index.vue
继续阅读
eleme ui 的 el-select 组件会自动清除数据空格，无论空格在左边，右边还是中间。某些场景下，这个让人难以接受， 怎么办了。方法是有的。
操作一波
<el-select v-model="form.id" clearable placeholder="请选择">
<el-option
v-for="item in list"
:key="item.id"
:label="item.raw"
v-html="item.label"
:value="item.id">
</el-option>
</el-select>
# list 的内容
let list = [
{
id: 1,
label: ' 凤舞九天',
raw: '凤舞九天'
}
]
这样就可以了。babel 看情况需要，加上 v-html ，用 代替空格。
el-tree 蛮好使用的，就是排版的方向永远都是从上到下。同一级没办法，合向并着展示。那么，想要实现这种效果，就得自己改代码，操作了。
操作一波
vue 中，el-tree 的默认节点和数据如下：
继续阅读
操作一波
php artisan ui vue
yarn --no-bin-links
js/components/ 下会生一个 ExampleComponent.vue 文件。
js/app.js 中也引入了这个。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
然后再 blade 模板中使用
继续阅读
laravel8 + bootstrap + vue-element-admin（9）修改 bootstrap 主题颜色等
先看一个漂亮的 点击看漂亮的
操作一波
编辑 resources/sass/_variables.scss,增加下边的定义
// 定义主题颜色
$primary: #9c27b0 !default;
$success: #4caf50 !default;
$info: #00bcd4 !default;
$warning: #ff9800 !default;
$danger: #f44336 !default;
// 修改点击按钮的时候，按钮周围的边框，好难看，强迫症要干掉。这样会把input的边框也干掉了，不好。
$input-btn-focus-width: 0 !default;
$input-btn-focus-box-shadow: none !default;
然后，执行编译打包。
yarn run dev
打包好后，刷新登录页面，是不是发现 input框，按钮都变了呀。
下一步
主题颜色也变了，那么下一步去搞搞在 blade 中使用 vue 组件的问题。虽然大多时候不需要 vue，要不就用纯 vue 了。可偶尔某些组件用 vue 还是蛮好的。
在某些场景下，socket 是必须要使用的。vue element admin 中，自己所做的后台中，就想使用这玩意。那么，就 websocket。
websocket 的客户端创建使用是很简单，有些问题却必须要面对。
- 怎么做断线重连。（socket.io 自身就实现了，可这里不用它）
- 怎么解决在整个项目中的数据来回。
- 在什么时候创建 websocket 连接。
断线重连是自己手动去建立一个心跳的方式来实现。socket.io 中叫 ping pong。这里就自定义的搞一搞。数据来回，使用全局事件的方式来处理。无论哪种语言，事件这种方式从来都不会缺失。在什么时候创建连接呢，因为这里针对的是登录后的一些功能，所以最好在登录成功后只调用创建一次。我们可以在 permission.js 中引入并创建。
继续阅读
在常规情况下，去定义组件的时候，只需要用到父子组件通讯即可。这样比较好实现。有时候，也会用到任意组件间的通讯，这个时候自定义组件的方式就有用了。不弄那么多，只弄一个。
先看常见父子通讯
# 使用组件的地方
<sky @changeColor="changeColor" />
methods: {
changeColor(value) {
}
}
# 组件内部，仅此而已。子组件中的数据，就可以被父组件收到了
this.$emit('changeColor', 'blue')
在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.
本文将介绍一些在 Vue.js 中使用第三方库的方式.
全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}