https://github.com/thefunpower/vue
初始化
vue 3
$vue = new Vue;
$vue->version = 3;
vue 2
$vue = new Vue;
index
<el-table-column type="index" label="序号" :index="indexMethod" width="80">
</el-table-column>
时间区间
$vue->search_date = [
'今天',
'昨天',
'本周',
'上周',
'上上周',
'本月',
'上月',
'上上月',
'本年'=>'今年',
'上年'=>'去年',
'上上年',
'最近一个月',
'最近两个月',
'最近三个月',
'第一季度',
'第二季度',
'第三季度',
'第四季度',
];
//限制在这个时间之前的不无法选择
$vue->start_date = '2023-11-01';
$vue->add_date();
search_date
以 key
=>value
形式存在,key
是显示的时间,value
是显示的标题
<el-date-picker v-model="where.date" value-format="yyyy-MM-dd" :picker-options="pickerOptions" size="medium" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
data
$vue->data('text','welcome');
created
$vue->created(['load()']);
$vue->method('load()',"
");
mounted
$vue->mounted("a","
alert(2);
")
其中a
是key
watch
$vue->watch("page(new_val,old_val)","
console.log('watch');
console.log(old_val);
console.log(new_val);
")
$vue->watch("where.per_page","
handler(new_val,old_val){
console.log('watch');
console.log(old_val);
console.log(new_val);
},
");
$vue->watch("where","
handler(new_val,old_val){
console.log('watch');
console.log(old_val.per_page);
console.log(new_val.per_page);
},
deep: true
");
底部加入
<?php
if($vue){
?>
<script type="text/javascript">
<?=$vue->run();?>
</script>
<?php }?>
wangeditor 富文本
如body
字段
在html中
<?=$vue->editor()?>
页面
<el-dialog @opened="on_open_form"
vue代码
$vue->editor_method();
$vue->method("on_open_form()","
this.weditor();
");
添加时
setTimeout(function(){
editorbody.setHtml('');
},600);
编辑时
setTimeout(function(){
editorbody.setHtml(d.body);
},600);
wangeditor 5
有时需要替换原来的图片上传按钮,以下为演示,实际使用请根据情况处理。
$vue->data('is_open_editor',false);
$vue->editor_image_upload_click = "
app.add_media('editorbody');
app.is_open_editor = true;
";
压缩JS
安装
yarn add --dev javascript-obfuscator
配置
$config['vue_encodejs'] = true;
$config['vue_encodejs_ignore'] = ['/plugins/config/config.php'];
一般函数
每个季度开始、结束时间
vue_get_jidu_array($year)
某月的最后一天
vue_get_last_day($month = '2023-07')
业务处理
- 管理员页面
<?php
global $vue;
admin_header();
$vue->upload_url = '/admin/media/upload';
?>
<?php admin_footer();?>