vue

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_datekey=>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);
")

其中akey

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();?>