标签: quasar-framework

情况：

在我的移动应用程序中，我需要下载一个文件并将其存储在“下载”文件夹中。

下载部分工作正常。该文件已从服务器正确下载并存储在以下文件夹中：

file:///storage/emulated/0/Android/data/org.cordova.MY_APP_NAME.app/my_file.pdf

但是该位置并不是真正的用户友好型。

要访问它，我必须转到：内部存储/ Android /数据/ org.cordova.MY_APP_NAME.app /

因此，我需要将其移至主下载文件夹。

文件传输是我无法完成的。

我知道关于SO已经有几个类似的问题。

我已经尝试了所有方法，但对我来说真的没有用，我无法在实际的Download文件夹中看到该文件。

项目信息：

我使用的类星体与Vuejs和科尔多瓦。

平台：

目前，我正在使用Android。但理想情况下，我正在寻找一种适用于Android和IOS的解决方案。

代码：

下载代码：

var fileTransfer = new FileTransfer() // eslint-disable-line
var uri = encodeURI('https://MY_SERVER_PATH')

fileTransfer.download(
  uri,
  cordova.file.externalApplicationStorageDirectory + 'my_file.pdf',
  entry => {
    console.log('download complete: ' + entry.toURL())
    this.moveFile(entry.toURL())
  },
  error => {
    console.log('download error source ' + error.source)
    console.log('download error target ' + error.target)
    console.log('download error code' + error.code)
  },
  false,
  {
    headers: {
      'Authorization': …

我有一个导航流程，其中包括

SearchPage -> ...Others or SearchPage -> ...Others or SearchPage ->

并希望在返回时保留搜索字符串。

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <toolbar :title="title" :action="doCreate" label="New"></toolbar>
    <q-search inverted placeholder="Type Name, Code, Nit, Phone Number or Email" float-label="Search" v-model="search" />
    <q-btn icon="search" color="secondary" @click="doSearch" />
  </q-layout-header>
</q-layout>
</template>

现在的问题是，当用户可以导航到其他地方时，如何将查询堆栈与路由器之一关联起来。

PD 全部位于一个页面中。如果可能的话，保留屏幕而不刷新它们（但仅适用于搜索页面，直到弹出回来）会更好。

关于类星体框架上传器组件的问题。我需要将图像发布到一个 URL，该 URL 将重命名上传的文件并返回完整路径。

我正在使用上传工厂和axios

但是我在理解如何将文件传递给 axios 时遇到了问题，就好像它只是一个输入类型文件一样。基本上，我需要将其设置为如果我正在发送一个带有单个输入文件的表单，如下所示：

<input type="file" name="banner">

这是组件：

<q-uploader
  url=""
  extensions=".gif,.jpg,.jpeg,.png"
  :filter="filterFiles"
  :upload-factory="uploadFile" />

这是上传方法，但我不断收到来自服务器的错误响应。

uploadFile (file, updateProgress) {
  const formData = new FormData()
  formData .set('banner', file)
  var headers = {
    'Content-Type': 'multipart/form-data'
  }
  axios.post('http://someurl/uploadFile', formData , headers)
    .then(function (response) {
      console.log(response)
    })
    .catch(function (response) {
      console.log(response)
    })
}

如果我使用 method="post" enctype="multipart/form-data"和一个

<input type="file" name="banner">

我通过处理/上传的图像 URL 从服务器得到我的 OK 响应

我正在构建一个带有页眉/主要内容/页脚的组件，其中主要内容将是可滚动的。虽然我可以在 Js 中执行此操作，但我需要该组件占用高度上的所有可用空间并将页脚置于底部。即使代码是正确的，我也无法让它占据整个高度。

这是一支带有不起作用代码的笔：https://codepen.io/SharpBCD/pen/MNgxgY

    .panel {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    flex-grow: 1;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

    background-color: #00acc1;
  }
   .panel-header{
    flex: 0 1 auto;
    /*max-height: fit-content;*/
  }
  .panel-main{
    /*margin-bottom: auto;*/
    display: flex;
    flex-direction: column;
    flex: 1; /* same as flex: 1 1 auto; */
    justify-content: flex-start; /* align items in Main Axis …

我想创建一个可以使用 Quasar Framework 中的 QExpansionItem 通过嵌套对象结构进行扩展的组件。

我制作了一个递归组件来尝试实现此目的，但没有像我希望的那样显示。这些项目以错误的方式重复，我不知道为什么。

我正在使用 Quasar V1.0.5，我使用 QexpansionItem 的组件

这里是菜单对象

[
{
    name: '1',
    icon: 'settings',
    permission: 'configuration',
    description: '1',
    url: '',
    children: [
      {
        name: '1.1',
        permission: 'configuration',
        url: '/insuranceTypes',
        icon: 'add',
        description: '1.1'
      },
      {
        name: '1.2',
        permission: 'configuration',
        url: '/insuranceTypes2',
        icon: 'phone',
        description: '1.2'
      }
    ]
  }, {
    name: '2',
    icon: 'person',
    permission: 'configuration',
    url: 'contacts',
    description: '2'
  }
  ]

MenuComponent.vue，我在其中调用 side-tree-menu 组件

<q-list
        bordered
        class="rounded-borders q-pt-md"
      >
        <side-tree-menu :menu="menu"></side-tree-menu>

      </q-list>

SideTreeMenuComponent.vue

<template>
  <div> …

我试图覆盖类星体表中的标准标题。主要是因为我需要一个堆叠标题（带有 colspans/rowspans 的 2 行）。我可以让它看起来正确，但我无法让它表现得像一个正确的表头 - 主要是它不会排序。我尝试了几种方法来声明性地绑定它。

<q-table
    :data="data"
    :columns="columns"
    row-key="name" class="col-12">
    <template v-slot:header="props">
      <q-tr :props="props">
          <q-th rowspan="2" >Sku</q-th>
          <q-th rowspan="2">Name</q-th>
          <q-th colspan="3" style="text-align:center">Sales</q-th>
          <q-th rowspan="2" style="text-align:center">Order</q-th>
          <q-th colspan="3" style="text-align:center">Before Order</q-th>
          <q-th colspan="3" style="text-align:center">After Order</q-th>
          <q-th colspan="3" style="text-align:center">Order</q-th>
       </q-tr>
       <q-tr :props="props">
          <q-th>Qty</q-th>
          <q-th>Count</q-th>
          <q-th>Daily</q-th>
          <q-th>Stock</q-th>
          <q-th>Days</q-th>
          <q-th>Date</q-th>
          <q-th>Stock</q-th>
          <q-th>Days</q-th>
          <q-th>Date</q-th>
          <q-th>Price</q-th>
          <q-th>Discount</q-th>
          <q-th>Total</q-th>
       </q-tr>
  </template>
</q-table>

我正在尝试 Quasar 框架（对于那些不熟悉的人，它基于 Vue）并且进展顺利。但是我试过运行构建（npm run build）并重复：

错误意外的控制台语句 no-console

...所以构建失败，因为它看到console.log(...)并且不高兴。我的选择：

1. 不要在开发中使用console.log。但它很方便。
2. 注释掉可能强制执行的 eslint 规则，因此让console.log进入生产环境。但这对于性能/安全性来说并不理想。
3. 让构建自动删除任何console.log。这就是我所追求的。

但是如何？

我查看了构建https://quasar.dev/quasar-cli/cli-documentation/build-commands，它提到在内部使用 webpack 和 UglifyJS。鉴于此，我在通用 Vue/webpack 项目中找到了删除 console.log 的答案：https : //github.com/vuejs-templates/webpack-simple/issues/21

...但如果是这样，由于没有 webpack 配置文件，Quasar 中的内容在哪里？我想象在 quasar.conf.js 文件中（因为我在那里看到了一个 'extendWebpack' 行 - 听起来很有希望）。或者有没有更好的方法来做到这一点？使用 Quasar 时，其他人如何在生产中删除console.log？或者在没有它的情况下处理日志？

谢谢！

我想更改 q-table 组件单元格中的颜色样式。

https://codepen.io/abkrim-the-flexboxer/pen/eYYjPZZ

{
  name: 'Active',
  align: 'center',
  label: 'Active',
  field: row => row.active,
  style: val => val ? 'color: red;' : 'color: black;',
  format: val => String(!!val),
  sortable: true
}

但这行不通。

如果我尝试进行测试，这在所有单元格中都有效：

style: 'color: red;'

我认为这是我的JS代码的错误。

我在 VueJS 中使用类星体组件来制作应用程序。我在父组件中导入了一个子组件。对于孩子，我通过直接在样式标签中访问类星体类来覆盖和应用自定义 css。问题是在父类中导入子项后，父项 css 应用于子项。即使我使用范围、模块或深度它也没有效果，因为我想更改类星体组件内部根 css。

我还尝试在 created() 中在运行时设置孩子的样式，但它没有任何效果，也不接受 !important 关键字。

有什么方法可以在类星体组件根/内部 css 上应用自定义子级 css 而不让父级 css 应用到子级上？请帮忙。

我的选择有以下代码

     <q-select label="Select country"
                behavior="menu"
                :lazy-rules="true"
                :rules="[val => !!val || 'Select your country']"
                dense outlined v-model="form.code" :options="countries"
                option-label="name" option-value="code">
      </q-select>

我有我的 vuejs 代码

<script>
   export default{
      data:()=>({

        form:{
            code:""
         }
        countries:[
              {name:"Country-1", code:"+101"},
              {name:"Country-2", code:"+201"},
           ]
       })

     }

 <script>

从上面我期望的值form.code是代码，例如：+101 但是当我检查时我发现该值是完整的对象。我缺少什么，因为在我的选择中我已经设置了选项标签和选项值我缺少什么？