
vue.js的简单让它可以很方便的集成到各应用中,相比react它更轻便灵活,所以react做大型应用是合适的。不过作为wordpress一个插件,react太重了。
其实,在wp的插件中集成vue是很简单的事情,可以看下面的代码示意,比较重要的是要先include页面进来,然后再引入vue.js,以及vue的初始化以及逻辑代码了
- 下面这个是插件主文件,我这里是dfass.php
function df_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
//加载页面
include(plugin_dir_path(__FILE__) . 'view.php');
//加载css
wp_enqueue_style('element-css', plugin_dir_url(__FILE__) . 'element.css', [], '2.14.1');
wp_enqueue_style('index.css', plugin_dir_url(__FILE__) . 'index.css', array(), '1.0');
//加载js
wp_enqueue_script('vue', plugin_dir_url(__FILE__) . 'vue.js', [], '2.6.12');
wp_enqueue_script('element-js', plugin_dir_url(__FILE__) . 'element.js', [], '2.14.1');
wp_enqueue_script('axios', plugin_dir_url(__FILE__) . 'axios.min.js', [], '0.21.1');
wp_enqueue_script('index.js', plugin_dir_url(__FILE__) . 'index.js', array(), '1.0');
init_user();
}
add_action('admin_menu', 'df_options_page');
function df_options_page() {
add_dashboard_page('钉钉表单助手', '钉钉表单助手', 'manage_options', 'df', 'df_options_page_html');
}
2. 接下来是view页面html文件view.php
<div id="app" class="wrapper">
<div class="centered">
<h2>钉钉表单助手</h2>
</div>
<template>
<el-row>
<el-input
v-model="value"
style="width: 300px"
placeholder="请输入手机号">
</el-input>
<el-button type="primary" v-on:click="btnClick()">添加</el-button>
<el-button type="primary" v-on:click="btnApply()">执行</el-button>
</el-row>
<el-row>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="name"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="user_id"
label="钉钉id"
width="180">
</el-table-column>
<el-table-column
prop="created_at"
label="添加时间">
</el-table-column>
<el-table-column
prop="last_time"
label="最后执行时间">
</el-table-column>
<el-table-column
prop="last_result"
label="最后执行结果">
</el-table-column>
<el-table-column
prop="enable"
label="状态">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag v-show="scope.row.enable===true" type="success" size="medium">启用</el-tag>
<el-tag v-show="scope.row.enable===false" type="info" size="medium">禁用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button v-show="scope.row.enable === false" @click="handleClick(scope.row,true)" type="primary"
size="small">启用
</el-button>
<el-button v-show="scope.row.enable === true" @click="handleClick(scope.row,false)" type="danger"
size="small">禁用
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</template>
</div>
3. 最后是vue初始化及逻辑代码index.js
(function () {
let vue = new Vue({
el: '#app',
data: function () {
return {
activeIndex: '1',
activeSubIndex: '1',
tableData: [],
loading: false,
value: undefined,
options: [],
}
},
mounted: function () {
this.getTableData()
},
methods: {
getTableData() {
let data = new FormData();
data.append('action', 'df_get_setting_list');
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
return;
}
vue.tableData = res.data.data.userList;
})
},
handleClick(row, enable) {
let data = new FormData();
data.append('action', 'df_update_form_enable');
data.append('user_id', row.user_id);
data.append('enable', enable);
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
})
},
btnApply() {
let data = new FormData();
data.append('action', 'df_apply_form');
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
})
},
btnClick() {
let data = new FormData();
data.append('action', 'df_add_user_form');
data.append('phone', this.value);
this.value = undefined;
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
vue.$message({
message: '添加成功',
type: 'success'
});
})
}
}
})
})();
如上,其实就可以在wp插件中集成vue了,完整的逻辑代码省略。
这个插件其实实现的是,每天9点根据钉钉打卡记录检测如果有加班讲自动发起加班餐表单申请。
可能有的人觉得奇葩,加班餐都还要申请!确实,博主所在公司也是个几百人的“大公司”,所以规章很多。但加班了还要手动填单,说句实话虽然我不是多懒的人,但我觉得不符合我们做“懒人”宗旨。
具体实现的不开源了,需要了解详细的可以留言交流。