thefunpower开发包

# Vue类

# JS代码加密

从 thefunpower/vue >= 1.0.3

安装yarn

yarn add --dev javascript-obfuscator

在config.ini.php配置

//是否启用$vue生成JS加密
$config['vue_encodejs'] = true;
// 哪些文件不需要用JS加密
$config['vue_encodejs_ignore'] = ['/plugins/config/config.php'];

设置dist目录可写

# 使用

$vue = new Vue;
//定义对象
$vue->data("object","{}");
//定义数组
$vue->data("array","[]");

$vue->data("string","");
$vue->data("bool",true);
//定义方法
$vue->method("jump(url)","
  window.open(url,'_blank');
");
$vue->method("link(url)","
  window.location.href = url;
");

在页面底部加入

<script type="text/javascript">
  <?=$vue->run()?>
</script>

# 定义data

$vue->data("object","{}");
$vue->data("array","[]");
$vue->data("string","");
$vue->data("bool",true);

# 定义方法

$vue->method("jump(url)","
  window.open(url,'_blank');
");

# mounted

$vue->mounted('key1',"
     const that = this
     window.onresize = () => {
      return (() => {
        that.height = that.\$refs.tableCot.offsetHeight;
      })()
    }
");

# watch

$vue->watch("where:"," 
      handler(newValue, oldValue) { 
        console.log(_this.where.per_page)
        console.log(newValue.per_page)
        if(_this.per_page != newValue.per_page){ 
            ajax('/plugins/table/api/admin/per_page.php',{
              key:'".$per_page_key."',
              val: newValue.per_page
            },function(res){}); 
            _this.per_page = newValue.per_page; 
        } 
      },
      deep: true 
");

# opt 参数


$vue = new Vue;
$vue->opt = [
  'is_editor' => true,
  'is_page'  => true,
  'is_reset' => true,
  'is_add'   => true,
  'is_edit'  => true,
  'is_tree'  => true,
];
$editor_body = $vue->editor('body'); 
misc("wangEditor,sortable");

# 分页

调用Vue

$vue = new Vue; 
misc('vue,element'); 
//不使用Vue类中的load();
$vue->load_name = '';
$vue->method('load()',"
  console.log(this.where); 
  ajax('/ajax.php',this.where,function(res){
    _this.where.page = res.current_page;
    _this.total  = res.total;
    _this.lists  = res.data;
  })
");

AJAX

$all = db_pager($table,"*",$where);
foreach($all['data'] as &$v){

}
json($all);

分页HTML

<div id="app">  
  <?= $vue->pager($load='load',$where = 'where',$arr = [])?> 
</div>
<script type="text/javascript"><?=$vue->run()?></script>

一个表单可以同时支持多个富文本编辑器

$editor_title = $vue->editor('title'); 
$editor_body = $vue->editor('body');

在表单中输出

<el-form-item label="内容" class="mt10">
    <?php echo $editor_body;?>
</el-form-item>

以下可忽略

# 自定义add editor操作JS

$vue->add_method = [
        "show()" => "js:{
             this.is_show = true;
             this.form = {
              is_spec:'-1'
             };
             this.load_common();
             ".$vue->loadEditorAdd()."
        }"
];
$vue->edit_method = [
"update(row)" => "js:{ 
  this.activeName = 'a';
    this.is_show = true;
    let id = row.id;
    ajax('/plugins/product/api/admin/product_show.php',{id:id},function(res){
      _this.form = res.data;  
      if(_this.form.tag && _this.form.tag.length > 0){
        _this.tag = _this.tags = _this.form.tag;  
      }else{
        _this.tag = _this.tags = ['']; 
      }
      _this.main_spec = row.main_spec_name;
      if(_this.form.spec && _this.form.spec.length > 0){
        _this.spec = _this.form.spec;
      }
    });
    ".$vue->loadEditorUpdate()."
    
}"
];

# dialog

<el-dialog @opened="weditor()" :title="row.id?'编辑商品':'添加商品'" 
    :visible.sync="is_show"  
    @closed="closed()" 
    :close-on-click-modal="false" 
    :show-close="true" 
    :close-on-press-escape="false" 
    width="1000px" top="20px"
  >

输出js

<script> 
  var E = window.wangEditor; 
  var editor;
  Vue.component('vuedraggable', window.vuedraggable);
</script>
<script type="text/javascript"> 
  <?= $js ?>
</script>

← 路由 →