Vue3

从Hcms 0.8 开始，管理后台的页面采用vue3的UI框架 Element Plus，所以每个页面的初始化vue对象需要改成vue3 的出初始化方式。

vue 初始化

因为在layout 中封装了 vue 初始化，所以在每个页面中，仅需要定义好 App这个变量就可以。

  1.     $(function () {
  2.         let app = Vue.createApp(App)
  3.         app.use(ElementPlus, {
  4.             locale: ElementPlusLocaleZhCn,
  5.         })
  6.         app.mixin(window.__vueCommon)
  7.         app.mixin(window.__vueList)
  8.         //加载页面中引入的组件
  9.         component_list.forEach(item => {
  10.             app.component(item.key, item.c)
  11.         })
  12.         app.mount('.page-container', {})
  13.     })

App 定义

  1. new Vue({
  2.   el:".page-container"
  3. })
  1. const App = {
  2.   data(){
  3.     return {}
  4.   }
  5. }

组件 component_list

会在组件渲染定义的时候push加入到component_list 中，然后在vue初始化的时候 通过app.component进行定义。只要页面通过 include 引用组件，就可以使用该组件。

  1. <!-- 模板定义 -->
  2. <script type="text/x-template" id="select-doc">
  3.     <div>hello components</div>
  4. </script>
  6. <script>
  7.     $(function() {
  8.         component_list.push({
  9.             key: 'select-doc',
  10.             c: {
  11.                 template: `#select-doc`,
  12.                 data() {
  13.                     return {}
  14.                 },
  15.                 computed: {},
  16.                 methods: {}
  17.             }
  18.         })
  19.     })
  20. </script>

公共封装方法

打开新标签窗口

在某些使用场景下，业务需要的页面跳转需要打开新的标签窗口显示。需要调用公共的封装发放 openNewFrame 

   this.openNewFrame('新窗口Demo', "{:url('demo/demo/edit')}")

获取URL参数

this.getUrlQuery()  //获取全部的参数
this.getUrlQuery('goods_id',0) //获取参数goods_id值，默认是0

解析URL

this.parserUrl(url)

// {{protocol: string, hostname: string, search: ({}|{}), host: string, hash: string, pathname: string}}

接口请求

请求方法 httpGet、httpPost 调用方式都一致，分别对应get、post请求方法。

  • loading 是否显示加载框，默认是显示
  • loadingTarget 默认加载指定元素是 .loading，对于一些弹窗数据，可以直接在弹窗类加载。

    httpGet

    httpGet: function (url, data, loading = true, loadingTarget = '.loading')�

    httpPost

    httpPost: function (url, data, loading = true, loadingTarget = '.loading')

    列表页面

    因为layout初始化vue的时候已经默认引入 vue-list mixin 了，所以通过定义 GetList 和 is_init_list
    �=true 页面加载初始化会加载
    const App = {
      data() {
          return {
              is_init_list: true, //表示该页面是列表页面
              where: {},
          }
      },
      methods: {
          GetList() {
              this.handRes({
                  current_page: 1,
                  last_page: 2,
                  total: 25,
                  data: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1518 弄'
                  }, {
                      date: '2016-05-04',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1517 弄'
                  }, {
                      date: '2016-05-01',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }]
              })
              // this.httpGet('{:url("admin/access/index/lists")}', {
              //     page: this.current_page,
              //     ...this.where
              // }).then(res => {
              //     let {lists = {}} = res.data
              //     this.handRes(lists)
              // })
          }
      }
  }

    分页

    <div class="pagination-container">
<el-pagination
               background
               layout="prev, pager, next"
               :total="total_num"
               :current-page="current_page"
               :page-size="per_page"
               @current-change="currentChangeEvent"
               >
</el-pagination>
          </div>
    ```javascript window.__vueList = { data() {
      return {
      total_num: 0,
      data_list: [],
      per_page: 20,
      last_page: 0,
      current_page: 1,
      is_init_list: false
  }
    }, mounted() {
      if (this.is_init_list) {
      this.GetList()
  }
    }, methods: {
      //重置数组，一般搜索、更换状态等筛选会调用
  refreshList() {
      this.current_page = 1
      this.GetList()
  },
  //切换页码
  currentChangeEvent(e) {
      this.current_page = e
      this.GetList()
  },
  //处理分页数据
  handRes({data, current_page = 1, last_page = 0, per_page = 20, total = 0}) {
      this.data_list = data
      this.per_page = per_page;
      this.last_page = last_page
      this.current_page = current_page
      this.total_num = total
  },
    } };

```